🥇(Quasi) inutile streaming webcam da un browser. Flusso multimediale e Websocket

In questo articolo voglio condividere i miei tentativi di eseguire lo streaming di video tramite websocket senza utilizzare plug-in del browser di terze parti come Adobe Flash Player. Continua a leggere per scoprire cosa ne è venuto fuori.

Adobe Flash, in precedenza Macromedia Flash, è una piattaforma per la creazione di applicazioni eseguite in un browser web. Prima dell'introduzione dell'API Media Stream, era praticamente l'unica piattaforma per lo streaming di video e voce da una webcam, nonché per creare vari tipi di conferenze e chat nel browser. Il protocollo per la trasmissione di informazioni multimediali RTMP (Real Time Messaging Protocol) in realtà è stato chiuso per molto tempo, il che significava: se volete potenziare il vostro servizio di streaming, siate così gentili da utilizzare il software della stessa Adobe - Adobe Media Server (AMS).

Dopo un po’ di tempo, nel 2012, Adobe “si arrese e lo sputò fuori” al pubblico. specifica Protocollo RTMP, che conteneva errori ed era sostanzialmente incompleto. A quel punto, gli sviluppatori iniziarono a realizzare le proprie implementazioni di questo protocollo e apparve il server Wowza. Nel 2011, Adobe ha intentato una causa contro Wowza per uso illegale di brevetti relativi a RTMP; dopo 4 anni, il conflitto è stato risolto amichevolmente.

La piattaforma Adobe Flash ha più di 20 anni, periodo durante il quale sono state scoperte molte vulnerabilità critiche, supporto promesso terminerà entro il 2020, lasciando poche alternative per il servizio di streaming.

Per il mio progetto ho deciso subito di abbandonare completamente l'uso di Flash nel browser. Ho indicato il motivo principale sopra; inoltre, Flash non è affatto supportato sulle piattaforme mobili e non volevo davvero distribuire Adobe Flash per lo sviluppo su Windows (emulatore di vino). Quindi ho deciso di scrivere un client in JavaScript. Questo sarà solo un prototipo, poiché in seguito ho appreso che lo streaming può essere eseguito in modo molto più efficiente basato su p2p, solo che per me sarà peer - server - peer, ma ne parleremo un'altra volta, perché non è ancora pronto.

Per iniziare, abbiamo bisogno del server websocket vero e proprio. Ho realizzato quello più semplice basato sul pacchetto Melody Go:

Codice del 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)
	})

         // Бродкастим видео поток 
	m.HandleMessageBinary(func(s *melody.Session, msg []byte) {
		m.BroadcastBinary(msg)
	})

	log.Println("Starting server...")

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

Sul client (lato streaming), devi prima accedere alla telecamera. Questo viene fatto attraverso API MediaStream.

Otteniamo l'accesso (autorizzazione) alla fotocamera/microfono tramite API dei dispositivi multimediali. Questa API fornisce un metodo MediaDevices.getUserMedia(), che mostra il popup. una finestra che chiede all'utente il permesso di accedere alla telecamera e/o al microfono. Vorrei sottolineare che ho effettuato tutti gli esperimenti in Google Chrome, ma penso che tutto funzionerà allo stesso modo in Firefox.

Successivamente, getUserMedia() restituisce una Promise, alla quale passa un oggetto MediaStream, un flusso di dati audio-video. Assegniamo questo oggetto alla proprietà src dell'elemento video. Codice:

Lato radiodiffusione

<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 da qualche parte, bufferarlo e trasmetterlo in parti. Il flusso video non elaborato non può essere trasmesso tramite websocket. Ecco che ci viene in aiuto API MediaRecorder. Questa API ti consente di codificare e suddividere il flusso in più parti. Eseguo la codifica per comprimere il flusso video in modo da inviare meno byte sulla rete. Dopo averlo suddiviso in pezzi, puoi inviare ogni pezzo a un websocket. Codice:

Codifichiamo il flusso video, lo spezziamo

<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 websocket. Sorprendentemente, tutto ciò di cui hai bisogno è un oggetto WebSocket. Ha solo due metodi di invio e chiusura. I nomi parlano da soli. Codice aggiunto:

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>

Il lato trasmesso è pronto! Ora proviamo a ricevere un flusso video e visualizzarlo sul client. Di cosa abbiamo bisogno per questo? Innanzitutto, ovviamente, la connessione tramite presa. Alleghiamo un "ascoltatore" all'oggetto WebSocket e ci iscriviamo all'evento "messaggio". Dopo aver ricevuto un dato binario, il nostro server lo trasmette agli abbonati, cioè ai clienti. In questo caso, la funzione di callback associata al "ascoltatore" dell'evento "messaggio" viene attivata sul client; l'oggetto stesso viene passato all'argomento della funzione, un pezzo del flusso video codificato da vp8.

Accettiamo streaming 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 molto tempo ho cercato di capire perché è impossibile inviare immediatamente i pezzi ricevuti all'elemento video per la riproduzione, ma si è scoperto che ciò non è possibile, ovviamente è necessario prima inserire il pezzo in un buffer speciale destinato a l'elemento video e solo allora inizierà la riproduzione del flusso video. Per questo avrai bisogno API MediaSource и API del lettore di file.

MediaSource funge da intermediario tra l'oggetto di riproduzione multimediale e la fonte di questo flusso multimediale. L'oggetto MediaSource contiene un buffer collegabile per l'origine del flusso video/audio. Una caratteristica è che il buffer può contenere solo dati Uint8, quindi avrai bisogno di un FileReader per creare tale buffer. Guarda il codice e diventerà 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. Lo svantaggio principale è che la riproduzione del video ritarda di 100 ms rispetto al lato di trasmissione; impostiamo noi stessi quando dividiamo il flusso video prima di trasmetterlo al server. Inoltre, quando ho controllato sul mio laptop, il ritardo tra il lato di trasmissione e quello di ricezione si è gradualmente accumulato, questo era chiaramente visibile. Ho iniziato a cercare modi per superare questo svantaggio e... mi sono imbattuto API RTCPeerConnection, che ti consente di trasmettere un flusso video senza trucchi come dividere il flusso in parti. Il ritardo accumulato, penso, è dovuto al fatto che il browser ricodifica ogni pezzo nel formato webm prima della trasmissione. Non ho approfondito ulteriormente, ma ho iniziato a studiare WebRTC e penso che scriverò un articolo a parte sui risultati della mia ricerca se lo troverò interessante per la comunità.

Fonte: habr.com

Streaming webcam (quasi) inutile da un browser. Flusso multimediale e Websocket

Aggiungi un commento Cancella risposta