🥇(Bijna) nutteloos webcamstreaming vanuit de browser. Media Stream en Websockets

In dit artikel wil ik mijn pogingen delen om video te streamen via websockets zonder gebruik te maken van externe browserplugins zoals Adobe Flash Player. Wat daaruit voortkwam, lees je verderop.

Adobe Flash – voorheen Macromedia Flash, is een platform voor het creëren van applicaties die in een webbrowser draaien. Tot de invoering van de Media Stream API was dit praktisch het enige platform voor het streamen van video- en audio vanuit webcams, evenals voor het creëren van verschillende soorten conferenties en chats in de browser. Het protocol voor het verzenden van media-informatie, RTMP (Real Time Messaging Protocol), was een lange tijd feitelijk gesloten, wat betekende: als je je eigen streamingdienst wilde opzetten, moest je gebruik maken van software van Adobe zelf – Adobe Media Server (AMS).

Na enige tijd gaven Adobe in 2012 'op en spuugden' ze de specificatie specificatie van het RTMP-protocol, die fouten bevatte en in wezen niet compleet was. Tegen die tijd begonnen ontwikkelaars hun eigen implementaties van dit protocol te maken, wat leidde tot de opkomst van de Wowza-server. In 2011 diende Adobe een rechtszaak in tegen Wowza wegens onrechtmatig gebruik van patenten in verband met RTMP, en na 4 jaar werd het conflict vredig opgelost.

Adobe Flash bestaat al meer dan 20 jaar en in die tijd zijn er veel kritieke kwetsbaarheden ontdekt. De ondersteuning werd beloofd te stoppen in 2020, dus er blijven niet veel alternatieven voor streamingdiensten over.

Voor mijn project besloot ik onmiddellijk volledig afstand te doen van het gebruik van Flash in de browser. De belangrijkste reden heb ik hierboven aangegeven, ook wordt Flash helemaal niet ondersteund op mobiele platforms, en het was me ook niet echt een zinloze moeite om Adobe Flash voor ontwikkeling op Windows (in een Wine-emulator) op te zetten. Daarom begon ik een client in JavaScript te schrijven. Dit wordt slechts een prototype, want later ontdekte ik dat streaming veel efficiënter kan worden gedaan op basis van p2p, maar in mijn geval wordt het peer – server – peers, maar daarover een andere keer, want dat is nog niet klaar.

Om te beginnen hebben we eigenlijk een websockets-server nodig. Ik maakte een eenvoudige op basis van het go-pakket melody:

Code van de serverzijde

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

	// Videostream uitzenden
	m.HandleMessageBinary(func(s *melody.Session, msg []byte) {
		m.BroadcastBinary(msg)
	})

	log.Println("Server wordt gestart...")

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

Aan de clientzijde (de zender) moet eerst toegang tot de camera worden verkregen. Dit gebeurt via MediaStream API.

Toegangsrechten verkrijgen voor de camera/microfoon via Media Devices API. Deze API biedt de methode MediaDevices.getUserMedia(), die een pop-upvenster toont dat de gebruiker om toestemming vraagt om toegang te krijgen tot de camera en/of microfoon. Ik wil opmerken dat ik al mijn experimenten in Google Chrome heb uitgevoerd, maar ik denk dat het in Firefox ongeveer hetzelfde zal werken.

Vervolgens retourneert getUserMedia() een Promise, die een MediaStream-object doorgeeft — een vide/audio datastream. Dit object wijzen we toe aan de src-property van het video-element. Code:

De zender

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

Om een videostream via sockets uit te zenden, moet deze op een bepaalde manier worden gecodeerd, gebufferd en in delen worden verzonden. Een ruwe videostream kan niet via websockets worden verzonden. Hier komt de MediaRecorder API. Deze API maakt het mogelijk om de stream te coderen en op te splitsen in stukken. Ik voer de codering uit voor het comprimeren van de videostream, zodat er minder bytes over het netwerk worden verzonden. Door deze in stukken te splitsen, kan elk stuk naar de websocket worden verzonden. Code:

We coderen de videostream en splitsen deze in delen

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

Laten we nu de verzending via websockets toevoegen. Verrassend genoeg is hiervoor slechts een object nodig WebSocket. Dit heeft slechts twee methoden: send en close. De namen spreken voor zich. Uitgebreide code:

We zenden de videostream naar de 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>

De zender is klaar! Laten we nu proberen de videostream te ontvangen en deze aan de client te tonen. Wat hebben we hiervoor nodig? Ten eerste natuurlijk een socketverbinding. We hangen een ‘listener’ op het WebSocket-object en abonneren ons op de gebeurtenis ‘message’. Zodra we een stuk binaire gegevens ontvangen, wordt dit door onze server uitgezonden naar de abonnees, dat zijn de clients. Aan de clientzijde wordt er een callbackfunctie geactiveerd die aan de ‘listener’ voor de gebeurtenis ‘message’ is gekoppeld, en het object zelf — een stukje videostream gecodeerd in vp8 — wordt als argument aan deze functie doorgegeven.

We ontvangen de videostream

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

Ik heb lange tijd geprobeerd te begrijpen waarom je de verkregen fragmenten niet meteen naar het video-element kunt verzenden om ze af te spelen, maar het blijkt dat je dit niet kunt doen. Je moet eerst het fragment in een speciale buffer plaatsen die aan het video-element is gekoppeld, en pas dan begint de videostream met afspelen. Hiervoor heb je nodig MediaSource API en FileReader API.

MediaSource fungeert als een soort tussenpersoon tussen het afspeelobject van media en de bron van deze media-stroom. Het MediaSource-object bevat een aan te sluiten buffer voor de video-/audio-stream. Een bijzonderheid is dat de buffer alleen gegevens van het type Uint8 kan bevatten, daarom heb je een FileReader nodig om zo'n buffer te maken. Bekijk de code, en het wordt duidelijker:

Videostream wordt afgespeeld

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

De prototype streamingdienst is klaar. Het belangrijkste nadeel is dat de videoweergave 100 ms achterloopt op de verzendzijde, wat we zelf hebben ingesteld bij het splitsen van de videostream voordat deze naar de server werd verzonden. Bovendien, toen ik het op mijn laptop controleerde, stapelde de vertraging zich geleidelijk op tussen de verzend- en ontvangzijde, wat goed zichtbaar was. Ik begon manieren te zoeken om dit nadeel te overwinnen en... kwam terecht bij RTCPeerConnection API, die het mogelijk maakt om videostreams zonder trucs zoals het splitsen van de stream in fragmenten te verzenden. De opbouwende vertraging, denk ik, is te wijten aan het feit dat in de browser elke fragment vóór verzending wordt gecodeerd naar het webm-formaat. Ik ben niet verder gaan zoeken, maar begon WebRTC te bestuderen. Over de resultaten van mijn onderzoek denk ik dat ik een apart artikel zal schrijven, als ik het interessant genoeg acht voor de gemeenschap.

Bron: habr.com

(Bijna) nutteloze webcam streaming vanuit de browser. Media Stream en Websockets