Communication web en temps réel


Présenté par Nouriel AZRIA

Sommaire


    Description générale

  1. Le WebRTC, qu'est ce que c'est?
  2. .. comment ca marche?
  3. Un peu d'histoire
  4. Pourquoi tant de bruit?
  5. De quoi a t-on besoin?


    Aspects techniques du WebRTC

  1. MediaStreams : GetUserMedia
  2. PeerConnection
  3. DataChannel





Quel avenir pour le WebRTC?

Description générale

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.

Est une technologie

pas une solution

Mode de fonctionnement

Mode de fonctionnement

Mode de fonctionnement

Mode de fonctionnement

Mode de fonctionnement

Mode de fonctionnement

Quels supports?

Un peu d'histoire

Encore très méconnu



Une recherche sous LinkedIn affiche


2990 WebRTC
494K Big Data
3.9M HTML

Pourquoi tant de bruit?

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

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);
						
Exemple 1 : Screenshoot

Pour visualiser le code, veuillez aller dans le répértoire "../Autres/ex1_screenshoot"


Tutorial suivi pour l'exemple
Exemple 2 : Traitement du flux vidéo

Pour visualiser le code, veuillez aller dans le répértoire "../Autres/ex2_traitementGris"


Tutorial suivi pour l'exemple 2
Exemple 3 : Autre traitement (utilisation d'un canvas)

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

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

Demo de partage video


Demo connexion distante avec echange de video

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"

Des questions?