🥇(Hoo e ka bang) ho phalla ha webcam e se nang thuso ho tsoa ho sebatli. Media Stream le Websockets

Sehloohong sena ke batla ho arolelana boiteko ba ka ba ho phallela video ka li-websockets ntle le ho sebelisa li-plugins tsa batho ba bang tse kang Adobe Flash Player. Tsoela pele ho bala ho fumana hore na ho tlile joang ka eona.

Adobe Flash, eo pele e neng e le Macromedia Flash, ke sethala sa ho etsa lits'ebetso tse sebetsang ho sebatli sa marang-rang. Pele ho kenyelletsoa Media Stream API, e ne e le eona feela sethala sa ho phallela video le lentsoe ho tsoa ho webcam, hammoho le ho theha mefuta e fapaneng ea likopano le lipuisano ho sebatli. Protocol ea ho fetisetsa tlhahisoleseding ea mecha ea litaba RTMP (Real Time Messaging Protocol) e hlile e koetsoe nako e telele, e bolelang: haeba u batla ho matlafatsa tšebeletso ea hau ea ho phallela, e-ba mosa ho sebelisa software e tsoang ho Adobe ka bobona - Adobe Media Server (AMS).

Ka mor'a nako e itseng ho 2012, Adobe "o ile a tela 'me a e tšoela" ho sechaba. tlhaloso RTMP protocol, e neng e na le liphoso 'me ha e le hantle e ne e sa fella. Ka nako eo, bahlahisi ba ile ba qala ho iketsetsa ts'ebetsong ea protocol ena, 'me seva sa Wowza se ile sa hlaha. Ka 2011, Adobe o ile a hlahlela nyeoe khahlanong le Wowza bakeng sa tšebeliso e seng molaong ea litokelo tsa molao tse amanang le RTMP; ka mor'a lilemo tse 4, khohlano e ile ea rarolloa ka khotso.

Sethala sa Adobe Flash se na le lilemo tse fetang 20, nakong eo ho fumanoeng bofokoli bo bongata, tšehetso. tshepisitsoe ho fela ka 2020, ho siea mekhoa e seng mekae bakeng sa tšebeletso ea ho hasanya.

Bakeng sa morero oa ka, hang-hang ke ile ka etsa qeto ea ho tlohela ka ho feletseng tšebeliso ea Flash ho sebatli. Ke bonts'itse lebaka la mantlha le kaholimo; Flash le eona ha e tšehetsoe ho hang ho li-platform tsa mehala, 'me ke ne ke hlile ke sa batle ho sebelisa Adobe Flash bakeng sa nts'etsopele ho Windows (emulator ea veine). Kahoo ke ile ka qala ho ngola moreki ho JavaScript. Ena e tla ba mohlala feela, kaha hamorao ke ile ka ithuta hore ho phallela ho ka etsoa ka mokhoa o atlehileng haholoanyane ho latela p2p, ho 'na feela e tla ba lithaka tsa lithaka, empa ho feta ka nako e' ngoe, hobane ha e so lokisoe.

Ho qala, re hloka seva ea 'nete ea li-websockets. Ke entse e bonolo ka ho fetesisa ho latela sephutheloana sa melody go:

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

Ho moreki (lehlakoreng la ho phallela), o hloka ho qala ka ho fihlella khamera. Sena se etsoa ka MediaStream API.

Re fumana monyetla (tumello) ho khamera / maekerofounu ka Media Devices API. API ena e fana ka mokhoa MediaDevices.getUserMedia(), e bonts'ang popup. fensetere e kopang mosebelisi tumello ea ho fihlella khamera le/kapa maekrofono. Ke kopa ho hlokomela hore ke entse liteko tsohle ho Google Chrome, empa ke nahana hore tsohle li tla sebetsa ka mokhoa o ts'oanang ho Firefox.

Ka mor'a moo, getUserMedia () e khutlisetsa Tšepiso, eo ho eona e fetisetsang ntho ea MediaStream - letoto la data ea audio-audio. Re abela ntho ena ho thepa ea src ea karolo ea video. Khouto:

Lehlakore la kgaso

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

Ho hasanya video ka holim'a li-sockets, u hloka ho e khouta kae-kae, u e boloke, 'me u e fetise ka likarolo. Video e hlahang ha e khone ho fetisoa ka li-websockets. Ke hona moo e tlang ho re thusa MediaRecorder API. API ena e u lumella ho kopanya le ho pshatla molatsoana likotoana. Ke etsa encoding ho hatella molatsoana oa video molemong oa ho romella li-byte tse fokolang marang-rang. Ha u se u e robehile likotoana, u ka romela sengoathoana ka seng ho websocket. Khouto:

Re kenyelletsa molapo oa video, o o pshatle likoto

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

Joale ha re kenye phetiso ka li-websockets. Ho makatsang ke hore sohle seo u se hlokang bakeng sa sena ke ntho WebSockets. E na le mekhoa e 'meli feela ea ho romela le ho koala. Mabitso a ipuella. Khouto e kentsoeng:

Re fetisetsa molaetsa oa video ho 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>

Lehlakore la khaso le se le lokile! Joale ha re lekeng ho amohela molaetsa oa video ebe o o bonts'a ho moreki. Re hloka eng bakeng sa see? Taba ea pele, ehlile, khokahano ea socket. Re hokela "momameli" ho ntho ea WebSocket mme re ingolisa ketsahalong ea 'molaetsa'. Ha re se re fumane sengoathoana sa data ea binary, seva ea rona e e phatlalatsa ho ba ngolisitseng, ke hore, bareki. Tabeng ena, mosebetsi oa callback o amanang le "momameli" oa ketsahalo ea 'molaetsa' o hlahisoa ho moreki; ntho ka boeona e fetisetsoa ho ngangisano ea tšebetso - karolo ea video e kentsoeng ke vp8.

Re amohela ho shebella livideo

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

Ka nako e telele ke ile ka leka ho utloisisa hore na ke hobane'ng ha ho sa khonehe ho romela likotoana tse amoheloang hang-hang karolong ea video bakeng sa ho bapala, empa ho ile ha fumaneha hore sena se ke ke sa etsoa, ehlile, o tlameha ho qala ho beha sengoathoana ka har'a buffer e khethehileng. karolo ea video, 'me ke ka nako eo feela e tla qala ho bapala molatsoana oa video. Bakeng sa sena u tla hloka MediaSource API и FileReader API.

MediaSource e sebetsa e le mokena-lipakeng pakeng tsa ntho e bapalang mecha ea phatlalatso le mohloli oa mecha ena ea litaba. Ntho ea MediaSource e na le "buffer" e ka khonang bakeng sa mohloli oa video / audio stream. Karolo e 'ngoe ke hore buffer e ka tšoara data ea Uint8 feela, kahoo o tla hloka FileReader ho theha buffer e joalo. Sheba khoutu 'me e tla hlaka haholoanyane:

Ho bapala karolo ea 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>

Mohlala oa tšebeletso ea ho phallela o se o lokile. Phoso e kholo ke hore papali ea video e tla sala ka morao ho lehlakoreng la phetisetso ka 100 ms; re ipehela sena ha re arola molatsoana oa video pele re e fetisetsa ho seva. Ho feta moo, ha ke sheba laptop ea ka, lekhalo pakeng tsa mahlakore a ho fetisa le ho amohela le ile la bokella butle-butle, sena se ne se bonahala ka ho hlaka. Ke ile ka qala ho batla litsela tsa ho hlōla bothata bona, 'me ... ka kopana RTCPeerConnection API, e leng se u lumellang hore u fetise molaetsa oa video ntle le maqheka a kang ho arola molapo likotoana. Ho bokellana ha nako, ke nahana, ho bakoa ke taba ea hore sebatli se khutlisetsa sengoathoana ka sebopeho sa webm pele se fetisoa. Ha kea ka ka cheka ho ea pele, empa ke ile ka qala ho ithuta WebRTC Ke nahana hore ke tla ngola sehlooho se arohaneng ka liphello tsa lipatlisiso tsa ka haeba ke e fumana e thahasellisa ho sechaba.

Source: www.habr.com

(Hoo e ka bang) ho phalla ha webcam e se nang thuso ho tsoa ho sebatli. Media Stream le Websockets

Eketsa ka tlhaloso hlakola karabo