🥇(Quasi) streaming inutile della webcam dal browser. Media Stream e Websockets

In questo articolo voglio condividere i miei tentativi di fare streaming video tramite websocket senza utilizzare plugin esterni per il browser come Adobe Flash Player. Leggi oltre per scoprire cosa è venuto fuori.

Adobe Flash — precedentemente Macromedia Flash, è una piattaforma per la creazione di applicazioni che funzionano nei browser web. Prima dell'introduzione dell'API Media Stream, era praticamente l'unica piattaforma per lo streaming di video e audio dalla webcam, oltre che per creare vari tipi di conferenze e chat nel browser. Il protocollo per la trasmissione di informazioni multimediali, RTMP (Real Time Messaging Protocol), è stato praticamente chiuso per lungo tempo, il che significava: se vuoi avviare il tuo servizio di streaming, devi usare il software di Adobe stesso — Adobe Media Server (AMS).

Dopo un po', nel 2012, Adobe si è 'arresa e ha sputato' davanti al pubblico specifica del protocollo RTMP, che conteneva errori e in realtà era incompleta. A quel tempo, gli sviluppatori avevano iniziato a realizzare le loro implementazioni di questo protocollo, ed è così che è nato il server Wowza. Nel 2011 Adobe ha fatto causa a Wowza per uso illegale di brevetti relativi a RTMP, e dopo 4 anni il conflitto è stato risolto pacificamente.

La piattaforma Adobe Flash ha più di 20 anni, durante i quali sono emerse molte vulnerabilità critiche, il supporto era previsto di cessare nel 2020, quindi le alternative per il servizio di streaming non sono poi così molte.

Per il mio progetto, ho deciso fin da subito di rinunciare completamente all'uso di Flash nel browser. La ragione principale l'ho indicata sopra, inoltre Flash non è affatto supportato sulle piattaforme mobili, e nemmeno avevo voglia di avviare Adobe Flash per lo sviluppo su Windows (emulatore wine). Quindi ho iniziato a scrivere un client in JavaScript. Sarà solo un prototipo, poiché successivamente ho scoperto che lo streaming può essere fatto in modo molto più efficiente sulla base di p2p, solo che nel mio caso sarà peer — server — peers, ma di questo parleremo un'altra volta, perché non è ancora pronto.

Per iniziare, abbiamo bisogno fondamentalmente di un server websocket. Ho realizzato il più semplice basato sul pacchetto go melody:

Codice della parte server

package main

import (
	"errors"
	"github.com/go-chi/chi"
	"gopkg.in/olahol/melody.v1"
	"log"
	"net/http"
	"time"
)

func main() {
	r := chi.NewRouter()
	m := melody.New()

	m.Config.MaxMessageSize = 204800

	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
		http.ServeFile(w, r, "public/index.html")
	})
	r.Get("/ws", func(w http.ResponseWriter, r *http.Request) {
		m.HandleRequest(w, r)
	})

         // Broadcastiamo il flusso video 
	m.HandleMessageBinary(func(s *melody.Session, msg []byte) {
		m.BroadcastBinary(msg)
	})

	log.Println("Avvio del server...")

	http.ListenAndServe(":3000", r)
}

Sul client (lato trasmittente) è necessario prima ottenere l'accesso alla videocamera. Questo avviene tramite API MediaStream.

Otteniamo l'accesso (autorizzazione) alla videocamera/microfono tramite Media Devices API. Questa API fornisce il metodo MediaDevices.getUserMedia(), che mostra un popup che chiede all'utente l'autorizzazione per accedere alla videocamera o/ai microfoni. È importante notare che ho effettuato tutti gli esperimenti su Google Chrome, ma credo che su Firefox funzioni in modo simile.

Successivamente, getUserMedia() restituisce una Promise che trasmette un oggetto MediaStream — un flusso di dati video-audio. Questo oggetto lo assegniamo alla proprietà src dell'elemento video. Codice:

Lato trasmittente

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть себя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer');

// если доступен MediaDevices API, пытаемся получить доступ к камере (можно еще и к микрофону)
// getUserMedia вернет обещание, на которое подписываемся и полученный видеопоток в колбеке направляем в video объект на странице

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
          // видео поток привязываем к video тегу, чтобы клиент мог видеть себя и контролировать 
          video.srcObject = stream;
        });
}
</script>

Per trasmettere un flusso video attraverso le socket, è necessario codificarlo in qualche modo, bufferizzarlo e inviarlo a pezzi. Un flusso video grezzo non può essere inviato tramite websockets. Qui ci aiuta MediaRecorder API. Questa API consente di codificare e suddividere il flusso in pezzi. Codifico per comprimere il flusso video, così da inviare meno byte attraverso la rete. Suddividendo in pezzi, possiamo inviare ogni pezzo via websocket. Codice:

Codifichiamo il flusso video, lo suddividiamo in parti

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть себя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer');

// если доступен MediaDevices API, пытаемся получить доступ к камере (можно еще и к микрофону)
// getUserMedia вернет обещание, на которое подписываемся и полученный видеопоток в колбеке направляем в video объект на странице

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
          // видео поток привязываем к video тегу, чтобы клиент мог видеть себя и контролировать 
          video.srcObject = s;
          var
            recorderOptions = {
                mimeType: 'video/webm; codecs=vp8' // будем кодировать видеопоток в формат webm кодеком vp8
              },
              mediaRecorder = new MediaRecorder(s, recorderOptions ); // объект MediaRecorder

               mediaRecorder.ondataavailable = function(e) {
                if (e.data && e.data.size > 0) {
                  // получаем кусочек видеопотока в e.data
                }
            }

            mediaRecorder.start(100); // делит поток на кусочки по 100 мс каждый

        });
}
</script>

Ora aggiungiamo la trasmissione tramite websockets. Stranamente, per questo basta un oggetto WebSocket. Ha solo due metodi: send e close. I nomi parlano da soli. Codice aggiornato:

Inviare il flusso video al server

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть себя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer');

// если доступен MediaDevices API, пытаемся получить доступ к камере (можно еще и к микрофону)
// getUserMedia вернет обещание, на которое подписываемся и полученный видеопоток в колбеке направляем в video объект на странице

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
          // видео поток привязываем к video тегу, чтобы клиент мог видеть себя и контролировать 
          video.srcObject = s;
          var
            recorderOptions = {
                mimeType: 'video/webm; codecs=vp8' // будем кодировать видеопоток в формат webm кодеком vp8
              },
              mediaRecorder = new MediaRecorder(s, recorderOptions ), // объект MediaRecorder
              socket = new WebSocket('ws://127.0.0.1:3000/ws');

               mediaRecorder.ondataavailable = function(e) {
                if (e.data && e.data.size > 0) {
                  // получаем кусочек видеопотока в e.data
                 socket.send(e.data);
                }
            }

            mediaRecorder.start(100); // делит поток на кусочки по 100 мс каждый

        }).catch(function (err) { console.log(err); });
}
</script>

Il lato trasmittente è pronto! Ora proviamo a ricevere il flusso video e mostrarlo sul client. Cosa ci serve per questo? Prima di tutto, ovviamente, una connessione socket. Attacchiamo un "listener" all'oggetto WebSocket e ci iscriamo all'evento ‘message’. Ricevendo un pezzo di dati binari, il nostro server lo trasmette ai suoi abbonati, cioè i client. Sul client si attiva una callback legata all'"listener" dell'evento ‘message’, in cui viene passato l'oggetto — un pezzo del flusso video, codificato in vp8.

Riceviamo il flusso video

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть тебя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer'),
         socket = new WebSocket('ws://127.0.0.1:3000/ws'), 
         arrayOfBlobs = [];

         socket.addEventListener('message', function (event) {
                // "кладем" полученный кусочек в массив 
                arrayOfBlobs.push(event.data);
                // здесь будем читать кусочки
                readChunk();
            });
</script>

Per un lungo periodo ho cercato di capire perché non fosse possibile inviare immediatamente i pezzi ottenuti al elemento video per la riproduzione, ma si è scoperto che assolutamente non si può fare. Prima bisogna posizionare il pezzo in un buffer speciale collegato all'elemento video, e solo allora inizierà a riprodurre il flusso video. Per fare ciò, sarà necessario MediaSource API e FileReader API.

MediaSource funge da intermediario tra l'oggetto di riproduzione media e la sorgente di questo flusso media. L'oggetto MediaSource contiene un buffer collegato per la sorgente del flusso video/audio. Una caratteristica è che il buffer può contenere solo dati di tipo Uint8, quindi sarà necessario un FileReader per creare un tale buffer. Dai un'occhiata al codice e sarà più chiaro:

Riproduzione del flusso video

<style>
  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }
</style>
</head>
<body>
<!-- Здесь в этом "окошечке" клиент будет видеть тебя -->
<video autoplay id="videoObjectHtml5ApiServer"></video>

<script type="application/javascript">
  var
        video = document.getElementById('videoObjectHtml5ApiServer'),
         socket = new WebSocket('ws://127.0.0.1:3000/ws'),
        mediaSource = new MediaSource(), // объект MediaSource
        vid2url = URL.createObjectURL(mediaSource), // создаем объект URL для связывания видеопотока с проигрывателем
        arrayOfBlobs = [],
        sourceBuffer = null; // буфер, пока нуль-объект

         socket.addEventListener('message', function (event) {
                // "кладем" полученный кусочек в массив 
                arrayOfBlobs.push(event.data);
                // здесь будем читать кусочки
                readChunk();
            });

         // как только MediaSource будет оповещен , что источник готов отдавать кусочки 
        // видео/аудио потока
        // создаем буфер , следует обратить внимание, что буфер должен знать в каком формате 
        // каким кодеком был закодирован поток, чтобы тем же способом прочитать видеопоток
         mediaSource.addEventListener('sourceopen', function() {
            var mediaSource = this;
            sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs="vp8"");
        });

      function readChunk() {
        var reader = new FileReader();
        reader.onload = function(e) { 
          // как только FileReader будет готов, и загрузит себе кусочек видеопотока
          // мы "прицепляем" перекодированный в Uint8Array (был Blob) кусочек в буфер, связанный
          // с проигрывателем, и проигрыватель начинает воспроизводить полученный кусочек видео/аудио
          sourceBuffer.appendBuffer(new Uint8Array(e.target.result));

          reader.onload = null;
        }
        reader.readAsArrayBuffer(arrayOfBlobs.shift());
      }
</script>

Il prototipo del servizio di streaming è pronto. Il principale svantaggio è che la riproduzione video sarà in ritardo rispetto alla parte trasmittente di 100 ms, impostato da noi stessi durante la suddivisione del flusso video prima della trasmissione al server. Inoltre, quando controllavo sul mio laptop, accumulavo gradualmente un lag tra il lato trasmittente e quello ricevente, il che era chiaramente visibile. Ho iniziato a cercare modi per affrontare questo problema e… sono capitato su RTCPeerConnection API, che consente di trasmettere il flusso video senza trucchi come la suddivisione del flusso in pezzi. Il lag accumulato, penso, deriva dal fatto che nel browser avviene la ricodifica di ogni pezzo in formato webm prima della trasmissione. Non ho voluto indagare oltre e ho iniziato ad approfondire WebRTC; credo che scriverò un articolo separato sui risultati delle mie ricerche, se lo considererò interessante per la comunità.

Fonte: habr.com