Streaming vidéo dans le navigateur

Martin Richard, alwaysdata

Streaming vidéo dans le navigateur

Dans cette présentation :

Comment diffuser de la vidéo dans un navigateur ?

  1. Le navigateur
  2. Streaming de contenu avec HTTP
  3. Streaming en temps réel avec WebRTC

Le navigateur

Dans cette partie :

  1. Définition d'un navigateur
  2. Afficher de la vidéo
  3. Contraintes du système
  4. Contraintes du réseau

Définition d'un navigateur

Afficher de la vidéo dans le navigateur

Afficher de la vidéo dans le navigateur

            <video loop controls src="public/horseplay-2.webm"></video>
            <video controls>
              <source src="public/horseplay-2.webm">
              <source src="public/horseplay-2.mp4">
            </video>

Contraintes du système

Contraintes du réseau

Streaming de contenu avec HTTP

Dans cette partie :

  1. TCP
  2. HTTP/1.1
  3. HTTP/2
  4. TLS

TCP

HTTP/1.1 : une requête

		    GET /resource HTTP/1.1
		    Host: www.martiusweb.net
		    Connection: Keep-Alive

HTTP/1.1 : une réponse

		    HTTP/1.1 200 OK
		    Connection: Keep-Alive
		    Date: Tue, 27 Oct 2015 15:02:49 GMT
            Content-Type: text/html
            Content-Length: 22796

Avantages

Inconvénients

Range-Request : oui, tu peux !

		    HTTP/1.1 200 OK
		    Accept-Ranges: bytes
		    ...

Range-Request : requête

		    GET /video.webm HTTP/1.1
		    Range: bytes=0-4096
		    ...

Range-Request : réponse

		    HTTP/1.1 206 Partial Content
		    Content-Length: 4096
		    Content-Range: bytes 0-4096/381467554
		    ...

Range-Request

HTTP/2: Résoudre les problèmes

Pour la vidéo ?

Streaming en temps réel avec WebRTC

Dans cette partie :

  1. Objectifs de WebRTC
  2. MediaStream
  3. Signaling
  4. RTCPeerConnection: ICE, STUN, TURN, Nat traversal
  5. RTCDataChannel: SCTP over UDP

Objectifs de WebRTC

WebRTC, un gros framework

MediaStream

MediaStream

navigator.getUserMedia(constraints, onStream, onError);
        function onStream(stream) {
          var video = document.querySelector('video');
          video.src = window.URL.createObjectURL(stream);
        }

RTCPeerConnection

RTCDataChannel

SCTP

Etablir une connexion: le problème des NAT

NAT

STUN

STUN

TURN

TURN

ICE

Comment deux pairs se trouvent ? Le signaling

Signaling

Bibliographie

Bibliographie

High Performance Browser Networking
Ilya Grigorik, O'Reilly Media, 2013

C'est aussi le crédit images

Des questions ?