SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
Découvrez la technologie
WebRTC.
Comment cela fonctionne ?
Linux Meetup Montréal - Février 2022
Sommaire
● WebRTC c’est quoi ?
● En tant qu’utilisateur, comment je l’utilise ?
● En tant que développeur, comment je m’en sers ?
● En tant que technicien, comment je debug ?
WEBRTC c’est quoi ?
● Technologie permettant d’avoir des communications temps réel dans un navigateur
web (Javascript API)
○ https://fr.wikipedia.org/wiki/WebRTC
● Créer par Google en 2011
● Normalisé 1.0 https://www.w3.org/TR/webrtc/
● Supporté par différents navigateur web comme
○ Chromium, Chrome
○ Firefox
○ Edge
○ Opéra
● Pas de protocol établi, chacun est libre de son implémentation
● Permet au navigateur d’avoir accès au micro, haut parleur de l’ordinateur
● Permet de monter une session SRTP dans le navigateur web pour le flux média temps
réel
● Permet d’avoir des statistiques sur le média
● API web : https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API
WEBRTC
● Composants principaux
○ getUserMedia : caméra,
micro
○ RTCPeerConnection :
négociation, encodage,
décodage
○ RTCDataChannel :
échange de données
entre navigateurs
● Autres APIs
○ getStats
○ getDisplayMedia
○ MediaRecorder
● SRTP
○ Chiffrement des flux média
● STUN, TURN, SDP, ICE, DTLS
ICE, dur comme de la glace ;)
● ICE : Permet de trouver comment deux
ordinateurs peuvent parler ensemble.
● STUN : Permet de découvrir votre
adresse IP publique
● TURN : Inclus la traversé du média
● NAT : Traduction d’une adresse publique
vers une ip privé
● Ice candidate : Information de l’adresse
IP et du port pour passer le média
Plus d’infos : Très bonne définition ici
SDP - Session Description Protocol
● Permet de décrire une session média dans un appel VOIP
● L’anatomie est très bien décrite ici : https://webrtchacks.com/sdp-anatomy/
Serveurs WebRTC Open-Source
● Asterisk
● Freeswitch
● Jitsi
● Janus
● Kamailio
● Rtpengine
● Kurento
● Mediasoup
● Pion
SFU, MCU, P2P ??? Comment on s’y retrouve ?
● SFU : Selective Forwardings Units
● MCU : Multiple Control Unit
● P2P : Peer to peer
Et la sécurité ?
E2E : Webrtc insertable streams
Permet de chiffrer de bout en bout
le média.
Très récent dans le webrtc,
fonctionne à partir d’échange de
clefs.
En tant qu’utilisateur, on parle de quoi ?
Pour l’utilisateur ça sert à quoi ?
Grâce au webrtc on a des services comme :
● google meet
● jitsi
● bigblue buttons
● Microsoft teams
● Wazo ;)
● etc …
On embarque de la communication temps réel dans la navigateur web, voix,
vidéo ou texte sans plugin sans télécharger des addons et cela améliore très
largement l’expérience utilisateur.
En tant que Développeur, comment ça marche ?
Développer des applications de
communications temps réel dans
un navigateur web :
● Télécommunications
● Jeux vidéo
● …
Principalement en Javascript.
En tant que technicien, comment je debug ?
On ouvre la console debug webrtc :
Chrome => chrome://webrtc-internals

Contenu connexe

Tendances

Alphorm.com Support de la Formation VMware vSphere 6, Les machines virtuelles
Alphorm.com Support de la Formation VMware vSphere 6, Les machines virtuellesAlphorm.com Support de la Formation VMware vSphere 6, Les machines virtuelles
Alphorm.com Support de la Formation VMware vSphere 6, Les machines virtuelles
Alphorm
 

Tendances (20)

Virtualisation des serveurs et Sécurisation avec Docker
Virtualisation des serveurs et Sécurisation avec Docker  Virtualisation des serveurs et Sécurisation avec Docker
Virtualisation des serveurs et Sécurisation avec Docker
 
Installation et Configuration de Pfsense
Installation et Configuration de PfsenseInstallation et Configuration de Pfsense
Installation et Configuration de Pfsense
 
VMware vSphere 6.0 - Troubleshooting Training - Day 4
VMware vSphere 6.0 - Troubleshooting Training - Day 4VMware vSphere 6.0 - Troubleshooting Training - Day 4
VMware vSphere 6.0 - Troubleshooting Training - Day 4
 
Beyond Java: Go for Java developers
Beyond Java: Go for Java developersBeyond Java: Go for Java developers
Beyond Java: Go for Java developers
 
Thanos: Global, durable Prometheus monitoring
Thanos: Global, durable Prometheus monitoringThanos: Global, durable Prometheus monitoring
Thanos: Global, durable Prometheus monitoring
 
4 protocole de redondance(hsrp-vrrp-glbp)
4 protocole de redondance(hsrp-vrrp-glbp)4 protocole de redondance(hsrp-vrrp-glbp)
4 protocole de redondance(hsrp-vrrp-glbp)
 
The Inside Story: How OPC UA and DDS Can Work Together in Industrial Systems
The Inside Story: How OPC UA and DDS Can Work Together in Industrial SystemsThe Inside Story: How OPC UA and DDS Can Work Together in Industrial Systems
The Inside Story: How OPC UA and DDS Can Work Together in Industrial Systems
 
Mémoire L3
Mémoire L3Mémoire L3
Mémoire L3
 
VMware vSphere
VMware vSphereVMware vSphere
VMware vSphere
 
WebRTC presentation
WebRTC presentationWebRTC presentation
WebRTC presentation
 
Alphorm.com Support de la Formation VMware vSphere 6, Les machines virtuelles
Alphorm.com Support de la Formation VMware vSphere 6, Les machines virtuellesAlphorm.com Support de la Formation VMware vSphere 6, Les machines virtuelles
Alphorm.com Support de la Formation VMware vSphere 6, Les machines virtuelles
 
Chapitre 6 - Protocoles TCP/IP, UDP/IP
Chapitre 6  - Protocoles TCP/IP, UDP/IPChapitre 6  - Protocoles TCP/IP, UDP/IP
Chapitre 6 - Protocoles TCP/IP, UDP/IP
 
Protocoles SSL/TLS
Protocoles SSL/TLSProtocoles SSL/TLS
Protocoles SSL/TLS
 
Introduction To OpenStack
Introduction To OpenStackIntroduction To OpenStack
Introduction To OpenStack
 
Présentation VOIP
Présentation  VOIPPrésentation  VOIP
Présentation VOIP
 
MPLS-VPN
MPLS-VPNMPLS-VPN
MPLS-VPN
 
Azure redis cache
Azure redis cacheAzure redis cache
Azure redis cache
 
Comparison of MQTT and DDS as M2M Protocols for the Internet of Things
Comparison of MQTT and DDS as M2M Protocols for the Internet of ThingsComparison of MQTT and DDS as M2M Protocols for the Internet of Things
Comparison of MQTT and DDS as M2M Protocols for the Internet of Things
 
M2M Protocols for Constrained Environments in the Context of IoT: A Compariso...
M2M Protocols for Constrained Environments in the Context of IoT: A Compariso...M2M Protocols for Constrained Environments in the Context of IoT: A Compariso...
M2M Protocols for Constrained Environments in the Context of IoT: A Compariso...
 
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
Migration d'une Architecture Microservice vers une Architecture Event-Driven ...
 

Similaire à Découvrez la technologie WebRTC, comment cela fonctionne?

Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYENWeb rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
malik3rdH
 
Wireless snif
Wireless snifWireless snif
Wireless snif
Asma_dz
 
Alphorm.com Formation Blockchain : Maîtriser les Smart Contracts
Alphorm.com Formation Blockchain : Maîtriser les Smart ContractsAlphorm.com Formation Blockchain : Maîtriser les Smart Contracts
Alphorm.com Formation Blockchain : Maîtriser les Smart Contracts
Alphorm
 

Similaire à Découvrez la technologie WebRTC, comment cela fonctionne? (20)

Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYENWeb rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
 
Introduction to WebRTC on iOS
Introduction to WebRTC on iOSIntroduction to WebRTC on iOS
Introduction to WebRTC on iOS
 
Mise en place vidéoconférence + chat avec Openfire
Mise en place vidéoconférence + chat avec OpenfireMise en place vidéoconférence + chat avec Openfire
Mise en place vidéoconférence + chat avec Openfire
 
Le monitoring de la performance front
Le monitoring de la performance frontLe monitoring de la performance front
Le monitoring de la performance front
 
Réalité virtuelle + Open source = <3
Réalité virtuelle + Open source = <3Réalité virtuelle + Open source = <3
Réalité virtuelle + Open source = <3
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
 
Mesure_de_qualité_WebRTC.pdf
Mesure_de_qualité_WebRTC.pdfMesure_de_qualité_WebRTC.pdf
Mesure_de_qualité_WebRTC.pdf
 
Webrtc
WebrtcWebrtc
Webrtc
 
WebRTC Paris Meetup @ Google France
WebRTC Paris Meetup @ Google FranceWebRTC Paris Meetup @ Google France
WebRTC Paris Meetup @ Google France
 
Web real time communication @UXRepublic
Web real time communication @UXRepublicWeb real time communication @UXRepublic
Web real time communication @UXRepublic
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 
Virtual Private Network Virtual Private Network
Virtual Private Network Virtual Private NetworkVirtual Private Network Virtual Private Network
Virtual Private Network Virtual Private Network
 
Wireless snif
Wireless snifWireless snif
Wireless snif
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
 
Web rtc présentation-Devfest Yde 2013
Web rtc présentation-Devfest Yde 2013Web rtc présentation-Devfest Yde 2013
Web rtc présentation-Devfest Yde 2013
 
La diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud AzureLa diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud Azure
 
Gdd07 Gwt Dig
Gdd07 Gwt DigGdd07 Gwt Dig
Gdd07 Gwt Dig
 
Alphorm.com Formation Blockchain : Maîtriser les Smart Contracts
Alphorm.com Formation Blockchain : Maîtriser les Smart ContractsAlphorm.com Formation Blockchain : Maîtriser les Smart Contracts
Alphorm.com Formation Blockchain : Maîtriser les Smart Contracts
 
Media center sous linux
Media center sous linuxMedia center sous linux
Media center sous linux
 
Bisatel voi p protocol sip
Bisatel voi p protocol sipBisatel voi p protocol sip
Bisatel voi p protocol sip
 

Découvrez la technologie WebRTC, comment cela fonctionne?

  • 1. Découvrez la technologie WebRTC. Comment cela fonctionne ? Linux Meetup Montréal - Février 2022
  • 2. Sommaire ● WebRTC c’est quoi ? ● En tant qu’utilisateur, comment je l’utilise ? ● En tant que développeur, comment je m’en sers ? ● En tant que technicien, comment je debug ?
  • 3. WEBRTC c’est quoi ? ● Technologie permettant d’avoir des communications temps réel dans un navigateur web (Javascript API) ○ https://fr.wikipedia.org/wiki/WebRTC ● Créer par Google en 2011 ● Normalisé 1.0 https://www.w3.org/TR/webrtc/ ● Supporté par différents navigateur web comme ○ Chromium, Chrome ○ Firefox ○ Edge ○ Opéra ● Pas de protocol établi, chacun est libre de son implémentation ● Permet au navigateur d’avoir accès au micro, haut parleur de l’ordinateur ● Permet de monter une session SRTP dans le navigateur web pour le flux média temps réel ● Permet d’avoir des statistiques sur le média ● API web : https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API
  • 4. WEBRTC ● Composants principaux ○ getUserMedia : caméra, micro ○ RTCPeerConnection : négociation, encodage, décodage ○ RTCDataChannel : échange de données entre navigateurs ● Autres APIs ○ getStats ○ getDisplayMedia ○ MediaRecorder ● SRTP ○ Chiffrement des flux média ● STUN, TURN, SDP, ICE, DTLS
  • 5. ICE, dur comme de la glace ;) ● ICE : Permet de trouver comment deux ordinateurs peuvent parler ensemble. ● STUN : Permet de découvrir votre adresse IP publique ● TURN : Inclus la traversé du média ● NAT : Traduction d’une adresse publique vers une ip privé ● Ice candidate : Information de l’adresse IP et du port pour passer le média Plus d’infos : Très bonne définition ici
  • 6. SDP - Session Description Protocol ● Permet de décrire une session média dans un appel VOIP ● L’anatomie est très bien décrite ici : https://webrtchacks.com/sdp-anatomy/
  • 7. Serveurs WebRTC Open-Source ● Asterisk ● Freeswitch ● Jitsi ● Janus ● Kamailio ● Rtpengine ● Kurento ● Mediasoup ● Pion
  • 8. SFU, MCU, P2P ??? Comment on s’y retrouve ? ● SFU : Selective Forwardings Units ● MCU : Multiple Control Unit ● P2P : Peer to peer
  • 9. Et la sécurité ? E2E : Webrtc insertable streams Permet de chiffrer de bout en bout le média. Très récent dans le webrtc, fonctionne à partir d’échange de clefs.
  • 10. En tant qu’utilisateur, on parle de quoi ? Pour l’utilisateur ça sert à quoi ? Grâce au webrtc on a des services comme : ● google meet ● jitsi ● bigblue buttons ● Microsoft teams ● Wazo ;) ● etc … On embarque de la communication temps réel dans la navigateur web, voix, vidéo ou texte sans plugin sans télécharger des addons et cela améliore très largement l’expérience utilisateur.
  • 11. En tant que Développeur, comment ça marche ? Développer des applications de communications temps réel dans un navigateur web : ● Télécommunications ● Jeux vidéo ● … Principalement en Javascript.
  • 12. En tant que technicien, comment je debug ? On ouvre la console debug webrtc : Chrome => chrome://webrtc-internals