🥇(Inenge) isina basa webcam inoyerera kubva kubrowser. Media Stream uye Websockets

Muchikamu chino ndinoda kugovera kuyedza kwangu kufambisa vhidhiyo kuburikidza newebhusaketi pasina kushandisa wechitatu-bato browser plugins seAdobe Flash Player. Verenga kuti uone kuti chii chakabuda.

Adobe Flash, yaimbova Macromedia Flash, ipuratifomu yekugadzira maapplication anomhanya muwebhu browser. Kusati kwaunzwa yeMedia Stream API, yaingove ndiyo yega chikuva chekutepfenyura vhidhiyo nezwi kubva pawebhu cam, pamwe nekugadzira marudzi akasiyana emisangano uye chats mubrowser. Iyo protocol yekufambisa midhiya ruzivo RTMP (Real Time Messaging Protocol) yakavharwa kwenguva yakareba, izvo zvaireva kuti: kana iwe uchida kukwidziridza sevhisi yako yekufambisa, iva netsitsi kushandisa software kubva kuAdobe pachavo - Adobe Media Server (AMS).

Mushure mechinguva mu2012, Adobe "akakanda mapfumo pasi uye akaipfira" kune veruzhinji. tsanangudzo RTMP protocol, yaive nezvikanganiso uye yaive isina kukwana. Pakazosvika nguva iyoyo, vagadziri vakatanga kuita yavo maitirwo eiyi protocol, uye server yeWowza yakaonekwa. Muna 2011, Adobe akamhan'arira Wowza nekuda kwekushandiswa zvisiri pamutemo kweRTMP-ane hukama; mushure memakore mana, kupokana kwakagadziriswa murunyararo.

Iyo Adobe Flash papuratifomu ine makore anopfuura makumi maviri, panguva iyo kwakawanda kwakakomba kusasimba kwakawanikwa, rutsigiro. akavimbisa kupera panosvika 2020, zvichisiya dzimwe nzira shoma dzebasa rekufambisa.

Pachirongwa changu, ndakabva ndafunga kusiya zvachose kushandiswa kweFlash mubrowser. Ndakaratidza chikonzero chikuru chiri pamusoro; Flash haitsigirwe zvachose pamapuratifomu enhare, uye ini ndakanga ndisingade kuendesa Adobe Flash yekusimudzira paWindows (waini emulator). Saka ndakatanga kunyora mutengi muJavaScript. Ichi chingori chiratidziro, sezvo ndakazodzidza kuti kutepfenyura kunogona kuitwa zvakanyanya nemazvo zvichibva pap2p, kwandiri chete ichave peer-server - vezera, asi zvakanyanya pane imwe nguva, nekuti haisati yagadzirira.

Kuti titange, tinoda iyo chaiyo websockets server. Ndakagadzira yakapfava zvichibva pane melody go package:

Server code

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

Pamutengi (kudivi rekuyerera), iwe unofanirwa kutanga wawana kamera. Izvi zvinoitwa kuburikidza MediaStream API.

Isu tinowana mukana (mvumo) kune kamera / maikorofoni kuburikidza Purogiramu inonzi Media Devices. Iyi API inopa nzira MediaDevices.getUserMedia(), iyo inoratidza popup. hwindo rinokumbira mushandisi mvumo yekuwana kamera uye/kana maikorofoni. Ndinoda kuziva kuti ndakaita zviyedzo zvese muGoogle Chrome, asi ndinofunga zvese zvichashanda zvakafanana muFirefox.

Tevere, getUserMedia () inodzosera Chivimbiso, kwainopfuudza chinhu cheMediaStream - rwizi rwevhidhiyo-odhiyo data. Isu tinopa chinhu ichi kune src pfuma yevhidhiyo element. Kodhi:

Kudivi renhepfenyuro

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

Kuti utepfenyure vhidhiyo inoyerera pamusoro pezvigadziko, iwe unofanirwa kuiisa encode kumwe kunhu, kuibvisa, uye kuifambisa muzvikamu. Vhidhiyo yakapfava haigone kufambiswa kuburikidza nemawebsockets. Apa ndipo panouya kuzotibatsira Purogiramu inonzi MediaRecorder. Iyi API inobvumidza iwe kuvharidzira uye kutyora rukova kuita zvidimbu. Ini ndinoita encoding kudzvanya vhidhiyo rukova kuti nditumire mashoma mabhaiti panetiweki. Wachityora kuita zvidimbu, unogona kutumira chidimbu chimwe nechimwe kune websocket. Kodhi:

Isu tinokodha iyo vhidhiyo rukova, kuipwanya kuita zvikamu

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

Zvino ngatiwedzerei kutapurirana kuburikidza newebhusockets. Zvinoshamisa, zvese zvaunoda pane izvi chinhu WebSockets. Iine nzira mbiri chete kutumira uye kuvhara. Mazita anozvitaurira. Kodhi yakawedzerwa:

Isu tinotumira vhidhiyo kuyerera kune server

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

Rutivi rwenhepfenyuro rwakagadzirira! Zvino ngatiedzei kugamuchira vhidhiyo yerukova toiratidza pane mutengi. Tinodei pane izvi? Kutanga, hongu, iyo socket yekubatanidza. Isu tinonamatira "muteereri" kuchinhu cheWebSocket uye kunyorera kune chiitiko che'message'. Sezvo tagamuchira chidimbu che data yebhinari, sevha yedu inoiparadzira kune vanyoreri, kureva vatengi. Muchiitiko ichi, iyo callback basa rakabatana ne "muteereri" wechiitiko che'message' rinokonzereswa pamutengi; chinhu chacho chinopfuudzwa munharo yebasa - chidimbu chevhidhiyo rwizi rwakanyorwa nevp8.

Isu tinobvuma kuyerera kwevhidhiyo

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

Kwenguva yakareba ndakaedza kunzwisisa kuti nei zvisingabviri kutumira pakarepo zvidimbu zvakagamuchirwa kune vhidhiyo chinhu chekutamba, asi zvakazoitika kuti izvi hazvigone kuitwa, hongu, iwe unofanirwa kutanga waisa chidimbu mune yakakosha buffer yakasungwa. iyo vhidhiyo chinhu, uye chete ipapo ichatanga kutamba vhidhiyo rwizi. Nokuda kweizvi uchada Purogiramu inonzi MediaSource и FileReader API.

MediaSource inoita serudzi rwemurevereri pakati pechinhu chinoridza midhiya uye kunobva iyi media stream. Chinhu cheMediaSource chine pluggable buffer yekwakabva vhidhiyo/audio stream. Imwe ficha ndeyekuti iyo buffer inogona chete kubata Uint8 data, saka iwe unozoda FileReader kugadzira buffer yakadaro. Tarisa iyo kodhi uye inova yakajeka:

Kuridza vhidhiyo kuyerera

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

Iyo prototype yekushambadzira sevhisi yakagadzirira. Chinhu chinonyanya kukanganisa ndechekuti kutamba kwevhidhiyo kunosara kuseri kwedivi rekutapurirana ne100 ms; tinozvigadzika pachedu patinotsemura rwizi rwevhidhiyo tisati taendesa kune server. Uyezve, pandakatarisa palaptop yangu, iyo lag pakati pekutumira uye kugamuchira mativi akaunganidzwa zvishoma nezvishoma, izvi zvainyatsooneka. Ndakatanga kutsvaga nzira dzekukunda dambudziko iri, uye ... ndakasangana Purogiramu inonzi RTCPeerConnection, iyo inokutendera kuti utumire vhidhiyo rukova pasina matipi akadai sekutsemura rukova kuita zvidimbu. Iko kuunganidza lag, ndinofunga, imhaka yekuti bhurawuza inodzokorodza chidimbu chega chega mufomati yewebhu isati yatumirwa. Handina kuchera zvimwe, asi ndakatanga kudzidza WebRTC.Ndinofunga kuti ndichanyora imwe nyaya yakasiyana pamusoro pemigumisiro yetsvakurudzo yangu kana ndikawana inofadza munharaunda.

Source: www.habr.com

(Inenge) isina basa webcam inoyerera kubva kubrowser. Media Stream uye Websockets

Voeg kukanzura mhinduro