🥇 (Kusan) kyamarar gidan yanar gizo mara amfani daga mai bincike. Media Stream da Websockets

A cikin wannan labarin ina so in raba ƙoƙarina don yaɗa bidiyo ta shafukan yanar gizo ba tare da amfani da plugins na ɓangare na uku ba kamar Adobe Flash Player. Ci gaba da karantawa don jin me ya faru.

Adobe Flash, wanda a da Macromedia Flash, dandamali ne na ƙirƙirar aikace-aikacen da ke gudana a cikin burauzar gidan yanar gizo. Kafin gabatarwar API ɗin Media Stream, kusan shine kawai dandamali don yaɗa bidiyo da murya daga kyamarar gidan yanar gizo, da kuma ƙirƙirar nau'ikan tarurruka da tattaunawa a cikin mazuruftar. A zahiri an rufe ka'idar isar da bayanan kafofin watsa labarai RTMP (Protocol Saƙon Gaskiya) na dogon lokaci, wanda ke nufin: idan kuna son haɓaka sabis ɗin yawo, ku kasance masu kirki don amfani da software daga Adobe kansu - Adobe Media Server (AMS).

Bayan wani lokaci a cikin 2012, Adobe "ya daina tofawa" ga jama'a. ƙayyadaddun bayanai Ka'idar RTMP, wacce ta ƙunshi kurakurai kuma da gaske bata cika ba. A wannan lokacin, masu haɓakawa sun fara aiwatar da nasu aiwatar da wannan yarjejeniya, kuma uwar garken Wowza ta bayyana. A cikin 2011, Adobe ya shigar da kara a kan Wowza saboda yin amfani da haƙƙin mallaka na RTMP ba bisa ka'ida ba; bayan shekaru 4, an warware rikicin cikin lumana.

Dandalin Adobe Flash ya kasance fiye da shekaru 20, a lokacin da aka gano yawancin lahani masu mahimmanci, tallafi. alkawari don ƙare nan da 2020, barin wasu zaɓuɓɓuka don sabis ɗin yawo.

Don aikina, nan da nan na yanke shawarar daina amfani da Flash gaba ɗaya a cikin burauzar. Na nuna babban dalilin da ke sama; Flash kuma ba a tallafawa kwata-kwata akan dandamali na wayar hannu, kuma da gaske ba na son tura Adobe Flash don haɓakawa akan Windows (koli da ruwan inabi). Don haka na tashi don rubuta abokin ciniki a JavaScript. Wannan zai zama samfuri ne kawai, tunda daga baya na koyi cewa ana iya yin yawo da inganci bisa p2p, kawai a gare ni zai zama takwarorina - uwar garken - takwarorina, amma ƙari akan wancan wani lokaci, saboda bai shirya ba tukuna.

Don farawa, muna buƙatar ainihin sabar websockets. Na yi mafi sauƙaƙa bisa ga kunshin waƙa:

Lambar uwar garken

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

A kan abokin ciniki (gefen rafi), da farko kuna buƙatar samun dama ga kyamara. Ana yin hakan ta hanyar MediaStream API.

Muna samun damar (izni) zuwa kyamara/microphone ta hanyar API ɗin Media Devices. Wannan API yana ba da hanya MediaDevices.getUserMedia(), wanda ke nuna popup. taga yana neman izinin mai amfani don isa ga kamara da/ko makirufo. Ina so in lura cewa na aiwatar da duk gwaje-gwajen a cikin Google Chrome, amma ina tsammanin komai zai yi aiki iri ɗaya a Firefox.

Na gaba, getUserMedia() ya dawo da Alkawari, wanda ya wuce abin MediaStream - rafi na bayanan bidiyo-audio. Mun sanya wannan abu ga kayan src na ɓangaren bidiyo. Lambar:

Bangaren watsa shirye-shirye

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

Don watsa rafin bidiyo akan kwasfa, kuna buƙatar ɓoye shi a wani wuri, adana shi, da watsa shi cikin sassa. Ba za a iya watsa danyen rafin bidiyo ta hanyar yanar gizo ba. Wannan shi ne inda ya zo ga taimakonmu API ɗin MediaRecorder. Wannan API ɗin yana ba ku damar ɓoyewa da karya rafi zuwa guntu. Ina yin rikodin rikodin don damfara rafin bidiyo don aika ƙarancin bytes akan hanyar sadarwa. Bayan katse shi gunduwa-gunduwa, zaku iya aika kowane yanki zuwa madaidaicin gidan yanar gizo. Lambar:

Muna ɓoye rafin bidiyo, mu karya shi guntu

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

Yanzu bari mu ƙara watsawa ta hanyar yanar gizo. Abin mamaki, duk abin da kuke buƙata don wannan abu ne Yanar Gizo. Yana da hanyoyi guda biyu kawai aikawa da rufewa. Sunayen suna magana da kansu. Ƙara code:

Muna aika rafin bidiyo zuwa uwar garken

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

An shirya gefen watsa shirye-shirye! Yanzu bari mu yi ƙoƙarin karɓar rafin bidiyo kuma mu nuna shi akan abokin ciniki. Me muke bukata don wannan? Da farko, ba shakka, haɗin soket. Muna haɗa “mai sauraro” zuwa abun WebSocket kuma muna biyan kuɗi zuwa taron 'saƙo'. Bayan samun ɗan bayanan binary, uwar garken mu tana watsa shi ga masu biyan kuɗi, wato, abokan ciniki. A wannan yanayin, aikin sake kiran da ke da alaƙa da “mai sauraro” na taron 'saƙon' yana haifar da abokin ciniki; abu da kansa an shigar da shi cikin hujjar aikin - wani yanki na rafin bidiyo wanda vp8 ya rufa masa asiri.

Muna karɓar rafin bidiyo

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

Na dogon lokaci na yi ƙoƙarin fahimtar dalilin da yasa ba zai yiwu ba nan da nan aika guntun da aka karɓa zuwa sashin bidiyo don sake kunnawa, amma ya zama cewa ba za a iya yin hakan ba, ba shakka, dole ne ku fara sanya yanki a cikin buffer na musamman daure zuwa. sinadarin bidiyo, sannan kawai zai fara kunna rafin bidiyo. Don wannan za ku buƙaci MediaSource API и API ɗin FileReader.

MediaSource yana aiki azaman tsaka-tsaki tsakanin abu na sake kunnawa kafofin watsa labarai da tushen wannan rafi na kafofin watsa labarai. Abun MediaSource yana ƙunshe da abin toshewa don tushen rafin bidiyo/audiyo. Ɗayan fasalin ita ce cewa buffer ɗin zai iya riƙe bayanan Uint8 kawai, don haka kuna buƙatar FileReader don ƙirƙirar irin wannan buffer. Dubi lambar kuma zai ƙara bayyana:

Ana kunna rafin bidiyo

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

An shirya samfurin sabis ɗin yawo. Babban hasara shine cewa sake kunna bidiyo zai kasance a bayan gefen watsawa da 100 ms; mun saita wannan da kanmu lokacin raba rafin bidiyo kafin watsa shi zuwa uwar garken. Bugu da ƙari, lokacin da na duba kwamfutar tafi-da-gidanka, raguwa tsakanin sassan watsawa da karɓa ya taru a hankali, wannan yana bayyane a fili. Na fara neman hanyoyin da zan shawo kan wannan rashin lafiyar, kuma ... na ci karo API ɗin RTCPeerConnection, wanda ke ba ka damar watsa rafi na bidiyo ba tare da dabaru irin su raba rafi zuwa guntu ba. Lag ɗin da aka tara, ina tsammanin, ya faru ne saboda gaskiyar cewa mai binciken ya sake sanya kowane yanki a cikin tsarin gidan yanar gizo kafin watsawa. Ban kara tona ba, amma na fara nazarin WebRTC. Ina tsammanin zan rubuta wani labarin dabam game da sakamakon binciken da na yi idan na ga yana da ban sha'awa ga al'umma.

source: www.habr.com

(Kusan) kyamarar gidan yanar gizo mara amfani daga mai lilo. Media Stream da Websockets

Add a comment Отменить ответ