🥇(Takriban) utiririshaji wa kamera ya wavuti kutoka kwa kivinjari. Mtiririko wa Media na Soketi za Wavuti

Katika makala haya ninataka kushiriki majaribio yangu ya kutiririsha video kupitia soketi za wavuti bila kutumia programu-jalizi za kivinjari cha wahusika wengine kama vile Adobe Flash Player. Soma ili kujua kilichotokea.

Adobe Flash, ambayo zamani ilikuwa Macromedia Flash, ni jukwaa la kuunda programu zinazoendeshwa katika kivinjari. Kabla ya kuanzishwa kwa API ya Media Stream, ilikuwa ni jukwaa pekee la kutiririsha video na sauti kutoka kwa kamera ya wavuti, na pia kuunda aina mbalimbali za mikutano na gumzo kwenye kivinjari. Itifaki ya kusambaza taarifa za vyombo vya habari RTMP (Itifaki ya Kutuma Ujumbe kwa Wakati Halisi) ilifungwa kwa muda mrefu, ambayo ilimaanisha: ikiwa unataka kuboresha huduma yako ya utiririshaji, kuwa mkarimu wa kutumia programu kutoka kwa Adobe wenyewe - Adobe Media Server (AMS).

Baada ya muda katika 2012, Adobe "alikata tamaa na kuitema" kwa umma. vipimo Itifaki ya RTMP, ambayo ilikuwa na makosa na kimsingi haikuwa kamilifu. Kufikia wakati huo, watengenezaji walianza kufanya utekelezaji wao wenyewe wa itifaki hii, na seva ya Wowza ilionekana. Mnamo 2011, Adobe alifungua kesi dhidi ya Wowza kwa matumizi haramu ya hataza zinazohusiana na RTMP; baada ya miaka 4, mzozo ulitatuliwa kwa amani.

Mfumo wa Adobe Flash una zaidi ya miaka 20, wakati ambapo udhaifu mwingi umegunduliwa, msaada. aliahidi kuisha ifikapo 2020, na kuacha njia mbadala chache za huduma ya utiririshaji.

Kwa mradi wangu, mara moja niliamua kuacha kabisa matumizi ya Flash kwenye kivinjari. Nilitaja sababu kuu hapo juu; Flash pia haitumiki hata kidogo kwenye mifumo ya simu, na kwa kweli sikutaka kupeleka Adobe Flash kwa ajili ya usanidi kwenye Windows (kiigaji cha divai). Kwa hivyo niliamua kuandika mteja katika JavaScript. Hii itakuwa mfano tu, kwani baadaye nilijifunza kuwa utiririshaji unaweza kufanywa kwa ufanisi zaidi kulingana na p2p, kwangu tu itakuwa rika - seva - rika, lakini zaidi kwa wakati mwingine, kwa sababu bado haijawa tayari.

Ili kuanza, tunahitaji seva halisi ya soketi za wavuti. Nilifanya rahisi zaidi kulingana na kifurushi cha melody go:

Msimbo wa seva

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

Kwenye mteja (upande wa kutiririsha), kwanza unahitaji kufikia kamera. Hii inafanywa kupitia API ya MediaStream.

Tunapata ufikiaji (ruhusa) kwa kamera/kipaza sauti kupitia API ya Vyombo vya Habari. API hii hutoa mbinu MediaDevices.getUserMedia(), ambayo inaonyesha ibukizi. dirisha linalouliza mtumiaji ruhusa ya kufikia kamera na/au maikrofoni. Ningependa kutambua kwamba nilifanya majaribio yote katika Google Chrome, lakini nadhani kila kitu kitafanya kazi sawa katika Firefox.

Ifuatayo, getUserMedia() inarudisha Ahadi, ambayo hupitisha kitu cha MediaStream - mtiririko wa data ya sauti ya video. Tunakabidhi kitu hiki kwa mali ya src ya kipengee cha video. Msimbo:

Upande wa utangazaji

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

Ili kutangaza mtiririko wa video juu ya soketi, unahitaji kuisimba mahali fulani, kuihifadhi na kuisambaza kwa sehemu. Mtiririko mbichi wa video hauwezi kusambazwa kupitia soketi za wavuti. Hapa ndipo inapokuja kwa msaada wetu API ya MediaRecorder. API hii hukuruhusu kusimba na kuvunja mkondo vipande vipande. Mimi hufanya usimbaji kukandamiza utiririshaji wa video ili kutuma baiti chache kwenye mtandao. Baada ya kuivunja vipande vipande, unaweza kutuma kila kipande kwenye soketi ya wavuti. Msimbo:

Tunasimba mkondo wa video, tuivunje vipande vipande

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

Sasa hebu tuongeze maambukizi kupitia soketi za wavuti. Kwa kushangaza, unachohitaji kwa hii ni kitu Mtandao. Ina njia mbili tu kutuma na kufunga. Majina yanajieleza yenyewe. Nambari iliyoongezwa:

Tunasambaza mtiririko wa video kwa seva

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

Upande wa utangazaji uko tayari! Sasa hebu tujaribu kupokea mtiririko wa video na kuuonyesha kwenye mteja. Tunahitaji nini kwa hili? Kwanza, bila shaka, uhusiano wa tundu. Tunaambatisha "msikilizaji" kwa kitu cha WebSocket na kujiandikisha kwa tukio la 'ujumbe'. Baada ya kupokea kipande cha data ya binary, seva yetu inaitangaza kwa waliojisajili, ambayo ni, wateja. Katika hali hii, kipengele cha urejeshaji simu kinachohusishwa na "msikilizaji" wa tukio la 'ujumbe' huanzishwa kwa mteja; kitu chenyewe hupitishwa kwenye hoja ya kukokotoa - kipande cha mtiririko wa video kilichosimbwa na vp8.

Tunakubali utiririshaji wa 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>

Kwa muda mrefu nilijaribu kuelewa kwa nini haiwezekani kutuma vipande vilivyopokelewa mara moja kwenye kipengele cha video kwa uchezaji, lakini ikawa kwamba hii haiwezi kufanywa, bila shaka, lazima kwanza uweke kipande kwenye buffer maalum iliyofungwa. kipengele cha video, na hapo ndipo itaanza kucheza mkondo wa video. Kwa hili utahitaji MediaSource API и FileReader API.

MediaSource hufanya kama aina ya mpatanishi kati ya kitu cha kucheza tena media na chanzo cha mtiririko huu wa media. Kipengee cha MediaSource kina bafa inayoweza kuchomeka kwa chanzo cha mtiririko wa video/sauti. Kipengele kimoja ni kwamba bafa inaweza tu kushikilia data ya Uint8, kwa hivyo utahitaji FileReader kuunda bafa kama hiyo. Angalia nambari na itakuwa wazi zaidi:

Inacheza mtiririko wa 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>

Mfano wa huduma ya utiririshaji iko tayari. Ubaya kuu ni kwamba uchezaji wa video utabaki nyuma ya upande wa kusambaza kwa 100 ms; tunaweka hii wenyewe wakati wa kugawanya mtiririko wa video kabla ya kuisambaza kwa seva. Kwa kuongezea, nilipoangalia kwenye kompyuta yangu ya mbali, bakia kati ya pande za kupitisha na kupokea polepole zilikusanyika, hii ilionekana wazi. Nilianza kutafuta njia za kuondokana na hasara hii, na ... nikapata API ya RTCPeerConnection, ambayo hukuruhusu kusambaza mtiririko wa video bila hila kama vile kugawanya mkondo vipande vipande. Lag ya kukusanya, nadhani, ni kutokana na ukweli kwamba kivinjari husimba tena kila kipande kwenye umbizo la webm kabla ya kusambaza. Sikuchimba zaidi, lakini nilianza kusoma WebRTC. Nadhani nitaandika makala tofauti kuhusu matokeo ya utafiti wangu ikiwa nitapata kuvutia kwa jamii.

Chanzo: mapenzi.com

(Takriban) utiririshaji wa kamera ya wavuti kutoka kwa kivinjari. Utiririshaji wa media na Soketi za Wavuti

Kuongeza maoni Kufuta kujibu