🥇(Cishe) ukusakaza kwekhamera yewebhu okungenamsebenzi kusuka kusiphequluli. Ukusakaza Kwemidiya kanye nama-Websockets

Kulesi sihloko ngifuna ukwabelana ngemizamo yami yokusakaza ividiyo ngama-websockets ngaphandle kokusebenzisa ama-plugin esiphequluli senkampani yangaphandle njenge-Adobe Flash Player. Qhubeka ufunde ukuze uthole ukuthi yini eyavela ngakho.

I-Adobe Flash, eyake yabizwa ngokuthi yiMacromedia Flash, iyinkundla yokwakha izinhlelo zokusebenza ezisebenza kusiphequluli sewebhu. Ngaphambi kokwethulwa kwe-Media Stream API, bekuyinkundla kuphela yokusakaza ividiyo nezwi kusuka kukhamera yewebhu, kanye nokudala izinhlobo ezahlukene zezingqungquthela nezingxoxo esipheqululini. Iphrothokholi yokudlulisa ulwazi lwemidiya i-RTMP (I-Real Time Messaging Protocol) empeleni yavalwa isikhathi eside, okusho ukuthi: uma ufuna ukukhulisa isevisi yakho yokusakaza-bukhoma, yiba nomusa ngokwanele ukusebenzisa isofthiwe evela ku-Adobe ngokwabo - I-Adobe Media Server (AMS).

Ngemva kwesikhathi esithile ku-2012, u-Adobe "wayeka futhi wayikhafulela" emphakathini. ukucaciswa Iphrothokholi ye-RTMP, ebiqukethe amaphutha futhi empeleni ibingaphelele. Ngaleso sikhathi, abathuthukisi baqala ukwenza okwabo ukusebenzisa le nqubo, futhi kwavela iseva ye-Wowza. Ngo-2011, u-Adobe wafaka icala ngokumelene no-Wowza ngokusebenzisa ngokungemthetho amalungelo obunikazi ahlobene ne-RTMP; ngemva kweminyaka engu-4, ukungqubuzana kwaxazululwa ngokuthula.

Iplathifomu ye-Adobe Flash ineminyaka engaphezu kwengu-20 ubudala, phakathi nalesi sikhathi kutholwe ubungozi obuningi, ukusekela. ethenjisiwe ukuze iphele ngo-2020, ishiye ezinye izindlela ezimbalwa zesevisi yokusakaza.

Ngephrojekthi yami, nginqume ngokushesha ukuyeka ngokuphelele ukusetshenziswa kweFlash esipheqululini. Ngikhombise isizathu esiyinhloko esingenhla; I-Flash nayo ayisekelwa nhlobo ezinkundleni zokuxhumana, futhi bengingafuni ngempela ukuphakela i-Adobe Flash ukuze ithuthukiswe ku-Windows (isifanisi sewayini). Ngakho-ke ngazimisela ukubhala iklayenti ku-JavaScript. Lokhu kuzoba isibonelo nje, njengoba kamuva ngafunda ukuthi ukusakazwa kungenziwa ngokuphumelelayo kakhulu ngokusekelwe ku-p2p, kimi kuphela kuzoba ontanga - iseva - ontanga, kodwa ngaphezulu kwalokho ngesinye isikhathi, ngoba ayikalungi.

Ukuze uqalise, sidinga iseva yangempela yama-websockets. Ngenze elula kakhulu ngokusekelwe kuphakheji ye-melody go:

Ikhodi yeseva

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

Kuklayenti (uhlangothi lokusakaza), udinga kuqala ukufinyelela ikhamera. Lokhu kwenziwa ngokusebenzisa I-MediaStream API.

Sithola ukufinyelela (imvume) kukhamera/kumakrofoni nge I-Media Devices API. Le API inikeza indlela MediaDevices.getUserMedia(), okubonisa okuzivelelayo. iwindi elicela umsebenzisi imvume yokufinyelela ikhamera kanye/noma imakrofoni. Ngingathanda ukuqaphela ukuthi ngenze zonke izivivinyo ku-Google Chrome, kodwa ngicabanga ukuthi konke kuzosebenza ngendlela efanayo kuFirefox.

Okulandelayo, i-getUserMedia() ibuyisela Isithembiso, lapho idlulisela khona into ye-MediaStream - ukusakazwa kwedatha yomsindo wevidiyo. Sabela le nto endaweni ye-src yesici sevidiyo. Ikhodi:

Uhlangothi lokusakaza

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

Ukuze usakaze ukusakazwa kwevidiyo ngamasokhethi, udinga ukuyifaka ikhodi kwenye indawo, uyibhafa, futhi uyidlulise ngezingxenye. Ukusakaza kwevidiyo akukwazi ukudluliselwa ngama-websockets. Yilapho esiza khona ukuze asisize I-MediaRecorder API. Le API ikuvumela ukuthi ufake ikhodi futhi uphule umfudlana ube yizicucu. Ngenza ukubhala ngekhodi ukuze ngicindezele ukusakaza kwevidiyo ukuze ngithumele amabhayithi ambalwa ngenethiwekhi. Ngemva kokuliphula libe yizicucu, ungathumela ucezu ngalunye ku-websocket. Ikhodi:

Sifaka ikhodi ukusakazwa kwevidiyo, sikuhlephule kube yizicucu

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

Manje ake sengeze ukuhanjiswa ngama-websockets. Okumangazayo, okudingayo nje kule nto I-WebSocket. Inezindlela ezimbili kuphela zokuthumela nokuvala. Amagama ayazikhulumela. Ikhodi engeziwe:

Sidlulisela ukusakazwa kwevidiyo kuseva

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

Uhlangothi lokusakaza selulungile! Manje ake sizame ukwamukela ukusakazwa kwevidiyo futhi sikubonise kuklayenti. Yini esiyidingayo kulokhu? Okokuqala, yiqiniso, uxhumano lwesokhethi. Sinamathisela “umlaleli” entweni ye-WebSocket futhi sibhalisela umcimbi 'womlayezo'. Ngemva kokuthola ucezu lwedatha kanambambili, iseva yethu iyisakaza kwababhalisile, okungukuthi, amakhasimende. Kulokhu, umsebenzi wokuphinda ushayele ohlotshaniswa “nomlaleli” womcimbi 'womlayezo' ucushwa kuklayenti; into ngokwayo idluliswa ku-agumenti yomsebenzi - ucezu lokudlalwa kwevidiyo olufakwe ikhodi yi-vp8.

Samukela ukusakazwa kwevidiyo

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

Sekuyisikhathi eside ngizama ukuqonda ukuthi kungani kungenakwenzeka ukuthumela ngokushesha izingcezu ezitholiwe engxenyeni yevidiyo ukuze idlalwe, kodwa kwavela ukuthi lokhu ngeke kwenziwe, yebo, kufanele uqale ubeke ucezu ku-buffer ekhethekile eboshwe ingxenye yevidiyo, futhi yilapho kuphela lapho izoqala khona ukudlala ukusakazwa kwevidiyo. Ukuze lokhu uzodinga I-MediaSource API и I-FileReader API.

I-MediaSource isebenza njengohlobo lomlamuli phakathi kwento edlalwayo yemidiya kanye nomthombo walokhu kusakazwa kwemidiya. Into ye-MediaSource iqukethe ibhafa exhumekayo yomthombo wevidiyo/umsindo wokusakaza. Esinye isici ukuthi isigcinalwazi singabamba kuphela idatha ye-Uint8, ngakho-ke uzodinga i-FileReader ukuze udale isilondolozi esinjalo. Bheka ikhodi futhi izocaca kakhulu:

Idlala ukusakaza kwevidiyo

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

I-prototype yesevisi yokusakaza isilungile. Ububi obukhulu ukuthi ukudlalwa kwevidiyo kuzosala ngemuva kohlangothi lokudlulisela ngo-100 ms; sizibeka thina lokhu lapho sihlukanisa ukusakaza kwevidiyo ngaphambi kokuyidlulisela kuseva. Ngaphezu kwalokho, lapho ngibheka i-laptop yami, i-lag phakathi kwezinhlangothi zokudlulisa nokwamukela zanqwabelana kancane kancane, lokhu kwakubonakala ngokucacile. Ngaqala ukufuna izindlela zokunqoba lokhu kubi, futhi ... ngahlangana RTCPeerConnection API, okukuvumela ukuthi udlulise ukusakazwa kwevidiyo ngaphandle kobuqili njengokuhlukanisa umfudlana ube yizicucu. I-lag enqwabelanayo, ngicabanga, kungenxa yokuthi isiphequluli siphinda sibethele ucezu ngalunye kufomethi yewebhu ngaphambi kokudluliselwa. Angizange ngiqhubeke, kodwa ngaqala ukufunda i-WebRTC. Ngicabanga ukuthi ngizobhala isihloko esihlukile mayelana nemiphumela yocwaningo lwami uma ngiluthola luthakaseleka emphakathini.

Source: www.habr.com

(Cishe) ukusakazwa kwekhamera yewebhu okungenamsebenzi kusuka kusiphequluli. Ukusakazwa kwemidiya kanye nama-Websockets

Engeza amazwana Отменить ответ