Communication web en temps réel
Présenté par Nouriel AZRIA
Sommaire
Description générale
Le WebRTC, qu'est ce que c'est?
.. comment ca marche?
Un peu d'histoire
Pourquoi tant de bruit?
De quoi a t-on besoin?
Aspects techniques du WebRTC
MediaStreams : GetUserMedia
PeerConnection
DataChannel
Quel avenir pour le WebRTC?
Le WebRTC, qu'est ce que c'est?
WebRTC offre une communication en temps réel native à partir d'un navigateur Web .
WebRTC est un projet open-source utilisant des APIs JavaScript .
API = Interface de programmation (hit 's' on your keyboard).
Voix par IP.
Est une technologie
pas une solution
Mode de fonctionnement
Mode de fonctionnement
Mode de fonctionnement
Mode de fonctionnement
Mode de fonctionnement
Mode de fonctionnement
1-4 : Signalisation
SIP : Session Initiation Protocol
Quels supports?
Un peu d'histoire
100 vendeurs qui s'interessent au WebRTC en 2011. Malgré le seul navigateur qui fonctionne.
Fin 2013, Opera commence à implementer le WebRTC sous navigateur pc et mobile.
Encore très méconnu
Une recherche sous LinkedIn affiche
2990 WebRTC
494K Big Data
3.9M HTML
Mais la communauté grandit rapidement!
Pourquoi tant de bruit?
Not Voice over IP. For Web developpers!
De quoi a t-on besoin?
Avoir accès au flux audio et vidéo
Etablir une connexion entre pairs
Transmettre lex flux de média
Transmettre des données en général
Not Voice over IP. For Web developpers!
Aspects techniques du WebRTC
3 APIs centraux
MediaStream (getUserMedia)
Donne accès au microphone, au caméra ou à l'ecran de l'appareil.
PeerConnection
Permet d'encoder et decoder un média, l'envoyer à travers le réseau, se charger du NAT transversal, etc.
DataChannel
Envois des données directement entre les navigateurs.
MediaStreams
Représente un flux de média synchronisé
Peut contenir plusieurs MediaStreamTracks d'audio et/ou vidéo
S'obtient facilement graçe à la méthode getUserMedia() du navigateur
getUserMedia
var constraints = {video: true};
function successCallback(stream) {
var video = document.querySelector("video");
video.src = window.URL.createObjectURL(stream);
}
function errorCallback(error) {
console.log("navigator.getUserMedia error: ", error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
PeerConnection
Initie la connexion entre les pairs
Représente le lien établi avec un navigateur distant
Repose sur le protocole UDP
Nécessite un canal de communication établi par un serveur web (XMLHttpRequest ou WebSocket)
Le signaling
Echange d'objets de description de session
Indique les formats médiatiques supportés / ce qu'on désire envoyer Englobe les informations du réseau pour une connexion P2P
Echange des requêtes laissé au choix de l'implémentation
Habituellement en passant par un serveur web utilisant une socket
UDP, STUN et ICE
Pour assurer la continuité de la connexion en cas de transaction d'adresse par NAT ou le blocage par les parefeux
Le protocole ICE utilise des paquets de tests pour déterminer les règles de filtrage du parefeu et est aussi utilisé pour traverser un NAT.
L'architecture JSEP
Initialisation du PeerConnection
Détermine les supports médias locaux (codecs, resolution..)
Réceptionne les adresses potentiels de réseau pour l'hôte de l'application (candidates)
Echange ces données via le méchanisme de signalisation
W3C - "Simple" connexion P2P
Signalisation avec Node et Socket.io
Socket.io utilise WebSocket
Permet d'echanger façilement des messages
Tutorial Socket.io
Session Description Protocol
v=0
o=jdoe 2890844526 2890842807 IN IP4 10.47.16.5
s=SDP Seminar
i=A Seminar on the session description protocol
u=http://www.example.com/seminars/sdp.pdf
e=j.doe@example.com (Jane Doe)
c=IN IP4 224.2.17.12/127
t=2873397496 2873404696
a=recvonly
m=audio 49170 RTP/AVP 0
m=video 51372 RTP/AVP 99
a=rtpmap:99 h263-1998/90000
Explication du schéma SDP
DataChannel
Même API que les WebSockets
Offre un moyen d'échanger des données génériques bidirectionnel et P2P
Les données autre que le média sont échangées via le protocole SCTP, lui-même encapsulé dans DTLS (intégre ainsi ces données au même paquet et donc le même numéro de port)
Temps de latence très faible
Quel avenir pour le WebRTC?
Technologie très jeune
Une communauté de plus en plus grande
Solution pour les développeurs web
Les sources utilisées
Pour une liste plus exaustive, veuillez lire le fichier "README.txt"