🥇(Ku dhawaad) kamarad shabakadeed oo aan faa'iido lahayn oo ka socota browserka. Stream Media iyo Websockets

Maqaalkan waxaan rabaa in aan la wadaago isku dayga aan ku doonayo in aan ku daadiyo fiidiyooga iyada oo loo marayo websockets iyada oo aan la isticmaalin browserka qolofka saddexaad sida Adobe Flash Player. Akhri si aad u ogaato waxa ka dhashay

Adobe Flash, oo hore u ahaan jirtay Macromedia Flash, waa madal lagu abuuro codsiyada ku shaqeeya browserka webka. Kahor intaan la bilaabin Media Stream API, waxay ahayd ficil ahaan goobta kaliya ee laga daawado muuqaalka iyo codka kamaradaha webka, iyo sidoo kale abuurista noocyo kala duwan oo shirar ah iyo wada sheekaysi gudaha browserka. Hab-maamuuska gudbinta macluumaadka warbaahinta RTMP (Real Time Messaging Protocol) dhab ahaantii wuu xirnaa muddo dheer, taas oo macnaheedu yahay: haddii aad rabto inaad kor u qaaddo adeeggaaga qulqulka, u naxariiso inaad isticmaasho software-ka Adobe laftiisa - Adobe Media Server (AMS).

Muddo ka dib 2012, Adobe "waa ka tanaasulay oo u tufay" dadweynaha. qeexid Hab-maamuuska RTMP, kaas oo ka koobnaa khaladaad oo runtii ahaa mid aan dhamaystirnayn. Waqtigaas, horumariyayaashu waxay bilaabeen inay sameeyaan dhaqangelintooda borotokoolkan, waxaana soo muuqday server-ka Wowza. Sannadkii 2011, Adobe waxa ay dacwad ka gudbisay Wowza oo ku saabsan adeegsiga sharci darrada ah ee shatiyada la xidhiidha RTMP; 4 sano ka dib, isku dhaca waxa lagu xalliyay si nabad ah.

Qalabka Adobe Flash wuxuu jiraa in ka badan 20 sano, muddadaas oo la helay baylahooyin badan oo halis ah, taageero. balan qaaday in la dhammeeyo 2020, iyadoo laga tagayo doorar kale oo loogu talagalay adeegga baahinta.

Mashruucayga, waxaan isla markiiba go'aansaday inaan gabi ahaanba ka tago isticmaalka Flash ee browserka. Waxaan tilmaamay sababta ugu weyn ee kor ku xusan; Flash sidoo kale laguma taageero dhammaan aaladaha mobilada, runtiina ma aanan dooneynin inaan geeyo Adobe Flash horumarinta Windows (kumbuyuutar khamriga). Markaa waxaan damcay inaan macmiil ku qoro JavaScript. Tani waxay noqon doontaa tusaale, tan iyo markii dambe waxaan bartay in qulqulka loo samayn karo si wax ku ool ah oo ku saleysan p2p, aniga oo kaliya waxay noqon doontaa asxaabta - server - asxaabta, laakiin wax badan oo waqti kale ah, sababtoo ah wali diyaar uma aha.

Si aan u bilowno, waxaan u baahanahay server-ka websockets ee dhabta ah. Waxaan sameeyay midka ugu fudud oo ku saleysan xirmada laxanka:

Koodhka server-ka

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

Dhinaca macmiilka (dhinaca socodka), waxaad marka hore u baahan tahay inaad gasho kamaradda. Tan waxaa lagu sameeyaa MediaStream API.

Waxaan ka helnaa (ogolaansho) kamaradda/makrafoonka Qalabka Warbaahinta API. API-gani waxa uu bixiyaa hab MediaDevices.getUserMedia(), kaas oo muujinaya soo baxay daaqad waydiisanaysa isticmaalaha ogolaanshaha si uu u galo kamarada iyo/ama makarafoonka. Waxaan jeclaan lahaa in aan ogaado in aan ku sameeyay dhammaan tijaabooyinka Google Chrome, laakiin waxaan u maleynayaa in wax walba ay ku shaqeyn doonaan si la mid ah Firefox.

Marka xigta, getUserMedia() waxay soo celinaysaa Ballanqaad, kaas oo ay u gudbiso shay MediaStream - qulqulka xogta-muuqaalka-maqalka. Shaygan waxa aanu u xilsaarnay hantida src ee qaybta fiidyaha. Summada:

Dhinaca baahinta

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

Si aad u baahiso qulqulka muqaalka ee saldhigyada, waxaad u baahan tahay inaad meel ku qorto, kaydiso, oo aad u gudbiso qaybo. Fiidiyowga cayriin laguma gudbin karo websockets. Tani waa halka ay timaaddo gargaarkayaga MediaRecorder API. API-gani wuxuu kuu ogolaanayaa inaad koodka geliso oo aad u jebiso qulqulka qaybo. Waxaan codayn ku sameeyaa si aan u cadaadiyo qulqulka fiidiyowga si aan ugu diro bytes ka yar shabakada. Markaad u kala qaybiso, waxaad u diri kartaa qayb kasta godsocket. Summada:

Waxaan codeyneynaa qulqulka fiidiyowga, waxaan u kala jejebinnaa

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

Hadda aan ku darno gudbinta websockets. Waxa la yaab leh, waxa kaliya ee aad u baahan tahay tan waa shay WebSockets. Waxay leedahay laba hab oo kaliya oo loo diro oo la xidho. Magacyada ayaa iska hadlaya. Koodhka lagu daray:

Waxaan u gudbinnaa qulqulka fiidiyowga server-ka

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

Dhinaca baahinta waa diyaar! Hadda aan isku dayno inaan helno fiidiyoow fiidiyoow ah oo aan ku soo bandhigno macmiilka. Maxaan uga baahanahay tan? Marka hore, dabcan, xiriirka godka. Waxaan ku dhejineynaa "dhegeyste" shayga WebSocket oo aan rukunno dhacdada 'fariinta'. Ka dib markii la helay qayb ka mid ah xogta binary, server-kayaga ayaa u gudbiya macaamiisha, taas oo ah, macaamiisha. Xaaladdan oo kale, hawsha dib-u-warbashada ee la xidhiidha "dhegaystaha" dhacdada 'fariinta' ayaa ku kicisa macmiilka; shayga laftiisa ayaa loo gudbiyaa doodda shaqada - qayb ka mid ah qulqulka fiidiyooga ee vp8.

Waxaan aqbalnaa qulqulka muuqaalka

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

Muddo dheer waxaan isku dayay inaan fahmo sababta aysan suurtogal u ahayn in isla markiiba loo diro qaybaha la helay qaybta fiidiyowga si loogu soo celiyo, laakiin waxay soo baxday in tan aan la samayn karin, dabcan, waa inaad marka hore gelisaa gabal gaar ah oo ku xidhan. element video ah, ka dibna kaliya waxa ay bilaabi doontaa ciyaaro socodka video ah. Tan waxaad u baahan doontaa MediaSource API и FileReader API.

MediaSource waxay u shaqeysaa sidii nooc dhexdhexaadin ah oo u dhexeeya shayga dib u ciyaarida warbaahinta iyo isha qulqulka warbaahinta. Shayga MediaSource waxa uu ka kooban yahay kayd la xidhi karo oo isha laga helayo fiidyaha/maqalka. Hal sifo ayaa ah in kaydiyuhu uu hayn karo oo keliya xogta Uint8, marka waxaad u baahan doontaa FileReader si aad u abuurto kaydka noocaas ah. Fiiri koodka oo aad bay u sii caddaan doontaa:

Daarida qulqulka muuqaalka

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

Nooca adeegga baahinta waa diyaar. Khasaaraha ugu weyni waa in dib-u-ciyaarista fiidiyoogu ay ka dambayn doonto dhinaca gudbinta 100 ms; tan lafteena ayaanu dejinay markaan qaybinayno qulqulka fiidiyowga ka hor inta aan u gudbin server-ka. Intaa waxaa dheer, markii aan eegay laptop-kayga, farqiga u dhexeeya dhinacyada gudbinta iyo helitaanka ayaa si tartiib tartiib ah u ururay, tani waxay ahayd mid si cad u muuqata. Waxa aan bilaabay in aan raadiyo habab aan kaga gudbi karo khasaarahan, waxaana... la kulmay RTCPeerConnection API, kaas oo kuu ogolaanaya in aad gudbiso qulqulka muuqaalka iyada oo aan la isticmaalin farsamooyin ay ka mid yihiin qaybinta qulqulka qaybo. Dib-u-dhac ku yimaadda, waxaan u maleynayaa, inay sabab u tahay xaqiiqda ah in browser-ku uu dib-u-dhigo qayb kasta qaabka webm ka hor inta aan la gudbin. Ma sii qodin, laakiin waxaan bilaabay barashada WebRTC. Waxaan u maleynayaa inaan qori doono maqaal gaar ah oo ku saabsan natiijooyinka cilmi-baaristayda haddii aan u arko inay xiiso u leedahay bulshada.

Source: www.habr.com

(Ku dhawaad) kamarad shabakadeed oo aan faa'iido lahayn oo ka socota browserka. Media Stream iyo Websockets

Add a comment cancel reply