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

In questo articolo voglio condividere i miei tentativi di fare streaming video tramite websockets senza utilizzare plugin esterni per il browser come Adobe Flash Player. Leggi di seguito cosa ne è uscito.

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 video e audio dalle webcam e per la creazione di vari tipi di conferenze e chat nel browser. Il protocollo per la trasmissione di informazioni multimediali RTMP (Real Time Messaging Protocol) era essenzialmente chiuso per lungo tempo, il che significava: se vuoi avviare il tuo servizio di streaming, dovrai utilizzare il software di Adobe stesso — Adobe Media Server (AMS).

Dopo un po' di tempo, nel 2012 Adobe "si arrese e sputò" al pubblico la specifica del protocollo RTMP, che conteneva errori e di fatto non era completa. A quel tempo, gli sviluppatori iniziarono a realizzare le proprie implementazioni di questo protocollo, così nacque il server Wowza. Nel 2011 Adobe fece causa a Wowza per uso illegale di brevetti legati a RTMP, e dopo 4 anni il conflitto si risolse in modo pacifico.

La piattaforma Adobe Flash è attiva da oltre 20 anni, durante i quali sono emerse molte vulnerabilità critiche, e il supporto è stato promesso di cessare entro il 2020, quindi le alternative per il servizio di streaming non sono molte.

Per il mio progetto, ho subito deciso di abbandonare completamente l'uso di Flash nei browser. La motivazione principale l'ho già indicata, inoltre Flash non è affatto supportato sulle piattaforme mobili, e non avevo voglia di configurare Adobe Flash per lo sviluppo su Windows (con l'emulatore wine). Pertanto, ho iniziato a scrivere un client in JavaScript. Sarà solo un prototipo, poiché in seguito ho scoperto che lo streaming può essere fatto in modo molto più efficiente basandosi su p2p; il mio sarà un sistema peer — server — peers, ma di questo parlerò un'altra volta, perché non è ancora pronto.

Per iniziare, abbiamo bisogno di un server WebSocket. Ne ho realizzato uno molto 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 lato client (lato trasmittente) è prima necessario accedere alla fotocamera. Questo si fa tramite MediaStream API.

Otteniamo accesso (permesso) alla fotocamera/microfono tramite Media Devices API. Questa API fornisce un metodo MediaDevices.getUserMedia(), che mostra una finestra pop-up che chiede all'utente il permesso di accedere alla fotocamera o/ed al microfono. Ci tengo a sottolineare che tutti gli esperimenti li ho eseguiti su Google Chrome, ma penso che in Firefox funzionerà più o meno allo stesso modo.

Successivamente, getUserMedia() restituisce una Promise, che passa l'oggetto MediaStream — un flusso di dati video-audio. Assegniamo questo oggetto 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 tramite socket, è necessario codificarlo, bufferizzarlo e inviarlo in parti. Un flusso video grezzo non può essere inviato tramite WebSockets. Qui ci viene in aiuto l'API MediaRecorder. Questa API consente di codificare e suddividere il flusso in segmenti. La codifica la faccio per comprimere il flusso video, in modo da ridurre i byte inviati attraverso la rete. Una volta suddivisi in pezzi, ogni pezzo può essere inviato tramite WebSocket. Codice:

Codifichiamo il flusso video, spezzandolo 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. Incredibilmente, ci vuole solo un oggetto WebSocket. Ha solo due metodi: send e close. I nomi parlano da soli. Codice aggiornato:

Trasmettiamo 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>

La parte trasmittente è pronta! Adesso proviamo a ricevere il flusso video e mostrarlo al client. Di cosa abbiamo bisogno per farlo? Prima di tutto, naturalmente, di una connessione socket. Aggiungiamo un 'listener' all'oggetto WebSocket e ci iscriviamo all'evento 'message'. Una volta ricevuto un pezzo di dati binari, il nostro server lo broadcast ai suoi abbonati, cioè ai client. Sul client, scatta la callback associata all' 'listener' dell'evento 'message', nella quale viene passato l'oggetto stesso — 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>

A lungo ho cercato di capire perché non fosse possibile inviare immediatamente i pezzi ricevuti per la riproduzione nell'elemento video, ma si è rivelato che non è possibile farlo: prima bisogna memorizzare il pezzo in un buffer speciale associato all'elemento video, e solo allora inizierà a riprodurre il flusso video. Per fare questo, sarà necessario API MediaSource e API FileReader.

MediaSource funge da intermediario tra l'oggetto di riproduzione dei media e la sorgente del flusso multimediale. L'oggetto MediaSource contiene un buffer connesso per la sorgente del flusso video/audio. Una peculiarità è che il buffer può contenere solo dati di tipo Uint8, quindi per creare tale buffer sarà necessario un FileReader. 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 di invio di 100 ms, che abbiamo impostato noi stessi durante la frammentazione del flusso video prima di inviarlo al server. Inoltre, quando ho fatto un controllo sul mio laptop, ho notato che si accumulava gradualmente un ritardo tra la parte di invio e quella di ricezione, esattamente come era evidente. Ho iniziato a cercare modi per superare questo difetto, e… ho scoperto l'API RTCPeerConnection, che consente di trasmettere il flusso video senza sofisticazioni come la frammentazione del flusso. Il ritardo accumulato, credo, è dovuto al fatto che nel browser avviene una ricodifica di ogni pezzo nel formato webm prima della trasmissione. Non ho approfondito ulteriormente, ma ho iniziato a studiare WebRTC e sui risultati delle mie ricerche penso di scrivere un articolo a parte, se lo riterrò interessante per la comunità.

Fonte: habr.com

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