🥇(Ia) alferrikakoa den webcam arakatzaile batetik streaming. Media Stream eta Websockets

Artikulu honetan bideoak websocketen bidez erreproduzitzeko nire saiakerak partekatu nahi ditut hirugarrenen arakatzaileen pluginak erabili gabe, hala nola Adobe Flash Player. Irakurri zer atera zen jakiteko.

Adobe Flash, lehen Macromedia Flash, web arakatzaile batean exekutatzen diren aplikazioak sortzeko plataforma bat da. Media Stream APIa sartu aurretik, ia web-kamera batetik bideoa eta ahotsa erreproduzitzeko plataforma bakarra zen, baita nabigatzailean hainbat hitzaldi eta txatak sortzeko ere. Multimedia-informazioa RTMP (Real Time Messaging Protocol) transmititzeko protokoloa denbora luzez itxita egon zen, eta horrek esan nahi zuen: zure streaming zerbitzua areagotu nahi baduzu, izan nahikoa Adobe-ren softwarea erabiltzeko - Adobe Media Server (AMS).

2012an denbora pixka bat igaro ondoren, Adobek " amore eman eta tu egin zuen " publikoari. zehaztapena RTMP protokoloa, akatsak zituen eta funtsean osatugabea zen. Ordurako, garatzaileak protokolo honen inplementazio propioak egiten hasi ziren eta Wowza zerbitzaria agertu zen. 2011n, Adobek auzi bat aurkeztu zuen Wowzaren aurka, RTMPrekin lotutako patenteak legez kanpo erabiltzeagatik; 4 urteren buruan, gatazka adiskidetasunez konpondu zen.

Adobe Flash plataformak 20 urte baino gehiago ditu, eta denbora horretan ahultasun kritiko asko aurkitu dira, laguntza agindu 2020rako amaitzeko, streaming zerbitzurako alternatiba gutxi utziz.

Nire proiekturako, berehala erabaki nuen nabigatzailean Flash erabilera erabat uztea. Goian arrazoi nagusia adierazi nuen; Flash ere ez da batere onartzen plataforma mugikorretan, eta benetan ez nuen Adobe Flash garatu nahi Windows-en (ardoaren emuladorea) garatzeko. Beraz, bezero bat JavaScript-en idaztera abiatu nintzen. Prototipo bat besterik ez da izango, geroago jakin nuenez streaming-a askoz eraginkorrago egin daitekeela p2p-n oinarrituta, niretzat bakarrik peer - zerbitzaria - parekoak izango dira, baina beste behin gehiago, oraindik prest ez dagoelako.

Hasteko, benetako websockets zerbitzaria behar dugu. Melodia go paketean oinarrituta egin nuen sinpleena:

Zerbitzariaren kodea

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

Bezeroan (streaming aldean), lehenik kamera sartu behar duzu. Hau bidez egiten da MediaStream APIa.

Kamera/mikrofonorako sarbidea (baimena) lortzen dugu Media Devices APIa. API honek metodo bat eskaintzen du MediaDevices.getUserMedia(), popup-a erakusten duena. erabiltzaileari kamerara edo/eta mikrofonora sartzeko baimena eskatzen dion leihoa. Kontuan izan nahiko nuke esperimentu guztiak Google Chromen egin ditudala, baina uste dut Firefoxen dena berdin funtzionatuko duela.

Ondoren, getUserMedia()-k Promise bat itzultzen du, eta hari MediaStream objektu bat pasatzen dio - bideo-audio datu-korronte bat. Objektu hau bideo elementuaren src propietateari esleitzen diogu. Kodea:

Emisioaren aldea

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

Bideo-korronte bat entxufeen bidez igortzeko, nonbait kodetu behar duzu, tamponatu eta zatika transmititu. Bideo korronte gordina ezin da websocket bidez transmititu. Horra datorkigu laguntza MediaRecorder APIa. API honek korrontea kodetu eta zatitu dezakezu. Bideo korrontea konprimitzeko kodeketa egiten dut sarean byte gutxiago bidaltzeko. Zatitan hautsi ondoren, pieza bakoitza websocket batera bidal dezakezu. Kodea:

Bideo korrontea kodetzen dugu, zatitan zatitzen dugu

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

Orain gehi dezagun transmisioa websocket bidez. Harrigarria bada ere, horretarako behar duzun guztia objektu bat da WebSockets. Bidaltzeko eta ixteko bi metodo baino ez ditu. Izenek berez hitz egiten dute. Gehitutako kodea:

Bideo korrontea zerbitzariari transmititzen diogu

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

Emisio aldea prest dago! Orain saia gaitezen bideo-korronte bat jasotzen eta bezeroari bistaratzen. Zer behar dugu horretarako? Lehenik eta behin, noski, socket konexioa. WebSocket objektuari "entzule" bat eransten diogu eta "mezu" gertaerara harpidetzen gara. Datu bitarren bat jasota, gure zerbitzariak harpidedunei, hau da, bezeroei igortzen die. Kasu honetan, "mezuaren" gertaeraren "entzulearekin" lotutako dei-itzulera funtzioa abiarazten da bezeroan; objektua bera funtzioaren argumentura pasatzen da - vp8-k kodetutako bideo-korrontearen zati bat.

Bideo korrontea onartzen dugu

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

Denbora luzez saiatu nintzen ulertzen zergatik ezinezkoa den jasotako piezak bideo-elementura berehala bidaltzea erreproduzitzeko, baina hori ezin dela egin ondorioztatu zen, noski, lehenik pieza buffer berezi batean jarri behar duzu. bideo-elementua, eta orduan bakarrik hasiko da bideo-korrontea erreproduzitzen. Horretarako beharko duzu MediaSource APIa и FileReader APIa.

MediaSource-k multimedia-erreprodukzio-objektuaren eta multimedia-korronte honen iturriaren arteko bitartekari moduko bat egiten du. MediaSource objektuak buffer konektagarri bat dauka bideo/audio korrontearen iturrirako. Ezaugarri bat da buffer-ak Uint8 datuak soilik eduki ditzakeela, beraz, FileReader bat beharko duzu buffer hori sortzeko. Begiratu kodea eta argiago geratuko da:

Bideo korrontea erreproduzitzen

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

Streaming zerbitzuaren prototipoa prest dago. Desabantaila nagusia da bideo-erreprodukzioa 100 ms-ko atzerapena izango duela transmisio-aldearekiko; hori geuk ezartzen dugu bideo-jarioa zatitzean zerbitzarira transmititu aurretik. Gainera, ordenagailu eramangarrian egiaztatu nuenean, igorlearen eta hartzaileen arteko desfasea pixkanaka-pixkanaka pilatzen joan zen, hori argi ikusten zen. Desabantaila hori gainditzeko bideak bilatzen hasi nintzen, eta... topo egin nuen RTCPeerConnection APIa, bideo-korrontea transmititzeko aukera ematen duena trikimailurik gabe, hala nola korrontea zatitan zatitzea. Metatzen ari den atzerapena, nire ustez, nabigatzaileak pieza bakoitza webm formatuan birkodetzen duela transmititu aurretik. Ez nuen gehiago sakondu, baina WebRTC ikasten hasi nintzen. Uste dut artikulu bana idatziko dudala nire ikerketaren emaitzei buruz, komunitatearentzat interesgarria iruditzen bazait.

Iturria: www.habr.com

(Ia) alferrikakoa den webcam arakatzaile batetik streaming. Media Stream eta Websockets

Gehitu iruzkin berria Idatzi