🥇 (Byna) nuttelose webcam wat vanaf 'n blaaier stroom. Mediastroom en websockets

In hierdie artikel wil ek my pogings deel om video via websockets te stroom sonder om derdeparty-blaaier-inproppe soos Adobe Flash Player te gebruik. Wat daarvan gekom het, lees verder.

Adobe Flash - voorheen Macromedia Flash, is 'n platform vir die skep van toepassings wat in 'n webblaaier loop. Voor die bekendstelling van die Media Stream API was dit feitlik die enigste platform vir die stroom van video en stem vanaf 'n webkamera, sowel as vir die skep van verskeie soorte konferensies en kletse in die blaaier. Die protokol vir die oordrag van media-inligting RTMP (Real Time Messaging Protocol) was eintlik vir 'n lang tyd gesluit, wat beteken het: as jy jou stromingsdiens wil verhoog, gebruik asseblief die sagteware van Adobe self - Adobe Media Server (AMS).

Na 'n geruime tyd in 2012 het Adobe "tou opgegee en uitgespoeg" na die publiek spesifikasie RTMP-protokol, wat foute bevat het en in wese onvolledig was. Teen daardie tyd het die ontwikkelaars hul eie implementering van hierdie protokol begin maak, sodat die Wowza-bediener verskyn het. In 2011 het Adobe 'n regsgeding teen Wowza ingedien vir die onwettige gebruik van patente wat met RTMP verband hou, ná 4 jaar is die konflik deur die wêreld opgelos.

Adobe Flash-platform is meer as 20 jaar oud, gedurende hierdie tyd is baie kritieke kwesbaarhede ontdek, ondersteuning belowe stop teen 2020, so daar is nie baie alternatiewe vir die stroomdiens nie.

Vir my projek het ek dadelik besluit om die gebruik van Flash in die blaaier heeltemal te laat vaar. Ek het die hoofrede hierbo aangedui, ook Flash word glad nie op mobiele platforms ondersteun nie, en ek wou regtig nie Adobe Flash vir ontwikkeling op Windows (wynemulator) ontplooi nie. Daarom het ek onderneem om 'n kliënt in JavaScript te skryf. Dit sal net 'n prototipe wees, aangesien ek later uitgevind het dat streaming baie meer doeltreffend op p2p gedoen kan word, net vir my sal dit eweknie - bediener - eweknieë wees, maar meer daaroor 'n ander keer, want dit is nog nie gereed nie.

Om te begin, benodig ons die werklike websockets-bediener. Ek het die eenvoudigste een gemaak gebaseer op die melodie go-pakket:

Bedienerkantkode

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

Op die kliënt (senderkant) moet jy eers toegang tot die kamera kry. Dit word gedoen deur MediaStream API.

Ons kry toegang (toestemming) tot die kamera/mikrofoon deur Media Toestelle API. Hierdie API bied 'n metode MediaDevices.getUserMedia(), wat die pop wys. 'n venster wat die gebruiker vir toestemming vra om toegang tot die kamera en/of mikrofoon te verkry. Ek wil daarop let dat ek al die eksperimente in Google Chrome uitgevoer het, maar ek dink alles sal in Firefox op omtrent dieselfde manier werk.

Vervolgens gee getUserMedia() 'n Belofte terug, waarin dit 'n MediaStream-voorwerp - 'n video-klankdatastroom, deurgee. Ons ken hierdie voorwerp toe aan die src-eienskap van die video-element. Kode:

Uitsaaikant

<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 'n videostroom deur voetstukke uit te saai, is dit nodig om dit iewers te enkodeer, dit te buffer en dit in dele oor te dra. Die rou videostroom kan nie via websockets versend word nie. Hier kom ons te hulp Media-opnemer API. Met hierdie API kan u die stroom in stukke enkodeer en verdeel. Ek doen enkodering om die videostroom saam te pers om minder grepe oor die netwerk te bestuur. Nadat jy in stukke gebreek het, kan jy elke stuk na 'n websok stuur. Kode:

Ons enkodeer die videostroom, ons klop dit in dele

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

Kom ons voeg nou websockets-transmissie by. Verbasend genoeg is al wat jy nodig het 'n voorwerp WebSockets. Dit het slegs twee stuur- en toemaakmetodes. Die name spreek vanself. Bygevoeg kode:

Stuur 'n videostroom na die bediener

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

Die uitsaaikant is gereed! Kom ons probeer nou om 'n videostroom te ontvang en dit op die kliënt te vertoon. Wat het ons hiervoor nodig? Eerstens, natuurlik, die sokverbinding. Ons hang 'n "luisteraar" (luisteraar) op die WebSocket-voorwerp, teken in op die 'boodskap'-geleentheid. Nadat ons 'n stukkie binêre data ontvang het, saai ons bediener uit na sy intekenare, dit wil sê kliënte. Terselfdertyd word die terugbelfunksie wat geassosieer word met die "luisteraar" van die 'boodskap'-gebeurtenis op die kliënt geaktiveer, die objek self word deurgegee na die funksie-argument - 'n stuk van die videostroom wat deur vp8 geënkodeer is.

Ontvang videostroom

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

Ek het lank probeer verstaan hoekom dit onmoontlik is om die ontvangde stukke onmiddellik na die video-element te stuur vir afspeel, maar dit het geblyk dat jy dit natuurlik nie kan doen nie, jy moet eers die stuk in 'n spesiale buffer sit na die video-element, en eers dan sal die videostroom begin speel. Dit sal vereis MediaSource API и FileReader API.

MediaSource tree op as 'n tussenganger tussen die media-afspeelvoorwerp en die bron van hierdie mediastroom. Die MediaSource-objek bevat 'n inpropbare buffer vir die bron van die video/klankstroom. Een eienaardigheid is dat 'n buffer slegs data van die tipe Uint8 kan bevat, so 'n FileReader is nodig om so 'n buffer te skep. Kyk na die kode en dit sal duideliker word:

Speel tans 'n videostroom

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

Die prototipe van die stroomdiens is gereed. Die grootste nadeel is dat video-terugspeel met 100 ms agter die oordragkant sal bly, ons stel dit self in wanneer die videostroom verdeel word voordat dit na die bediener oorgedra word. Verder, toe ek op my skootrekenaar gekyk het, het ek geleidelik 'n vertraging opgehoop tussen die stuur- en ontvangkant, dit was duidelik sigbaar. Ek het begin soek na maniere om hierdie tekortkoming te oorkom, en ... het afgekom RTCPeerConnection API, wat jou toelaat om 'n videostroom oor te dra sonder truuks soos om die stroom in stukke te verdeel. Die kumulatiewe vertraging, dink ek, is te wyte aan die feit dat die blaaier elke stuk in die webm-formaat herkodeer voor oordrag. Ek het nie meer verder begin delf nie, maar WebRTC begin bestudeer, ek dink aan die resultate van my navorsing, ek sal 'n aparte artikel skryf as ek dit interessant vind vir die gemeenskap.

Bron: will.com

(Byna) nuttelose webcam wat vanaf 'n blaaier stroom. Mediastroom en websockets

Voeg 'n opmerking Kanselleer antwoord