🥇 (Hapit) walay pulos nga webcam streaming gikan sa usa ka browser. Media Stream ug Websockets

Sa kini nga artikulo, gusto nako ipaambit ang akong mga pagsulay sa pag-stream sa video pinaagi sa mga websocket nga wala gigamit ang mga plugin sa browser sa ikatulo nga partido sama sa Adobe Flash Player. Unsa ang nahitabo niini, basaha.

Ang Adobe Flash - kanhi Macromedia Flash, usa ka plataporma alang sa paghimo og mga aplikasyon nga nagdagan sa usa ka web browser. Sa wala pa ang pagpaila sa Media Stream API, kini halos ang bugtong plataporma alang sa streaming nga video ug tingog gikan sa usa ka webcam, ingon man alang sa paghimo sa nagkalain-laing matang sa mga komperensya ug mga chat sa browser. Ang protocol alang sa pagbalhin sa impormasyon sa media RTMP (Real Time Messaging Protocol) gisirado sa dugay nga panahon, nga nagpasabot: kung gusto nimo nga ipataas ang imong streaming nga serbisyo, palihug gamita ang software gikan sa Adobe mismo - Adobe Media Server (AMS).

Human sa pipila ka panahon sa 2012, ang Adobe "mihunong ug nangluwa" sa publiko espesipikasyon RTMP protocol, nga adunay mga sayup ug dili kompleto. Nianang panahona, ang mga developers nagsugod sa paghimo sa ilang kaugalingong mga pagpatuman niini nga protocol, mao nga ang Wowza server nagpakita. Sa 2011, ang Adobe nagsang-at og kaso batok sa Wowza tungod sa ilegal nga paggamit sa mga patente nga may kalabutan sa RTMP, human sa 4 ka tuig ang panagbangi nasulbad sa kalibutan.

Ang platform sa Adobe Flash labaw pa sa 20 ka tuig ang edad, niining panahona daghang mga kritikal nga kahuyangan ang nadiskubre, suporta gisaad hunong sa 2020, mao nga wala’y daghang mga alternatibo alang sa serbisyo sa streaming.

Alang sa akong proyekto, nakahukom dayon ko nga hingpit nga biyaan ang paggamit sa Flash sa browser. Gipakita nako ang panguna nga hinungdan sa ibabaw, dili usab suportado ang Flash sa mga mobile platform, ug dili gyud nako gusto nga i-deploy ang Adobe Flash alang sa pag-uswag sa windows (wine emulator). Busa, ako mihimo sa pagsulat sa usa ka kliyente sa JavaScript. Kini usa lamang ka prototype, tungod kay sa ulahi nahibal-an nako nga ang streaming mahimo nga labi ka episyente base sa p2p, para lang nako kini mahimong peer - server - mga kaedad, apan labi pa niana sa laing higayon, tungod kay dili pa kini andam.

Aron makasugod, kinahanglan namo ang aktuwal nga websockets server. Gihimo nako ang pinakasimple base sa melody go-package:

Kodigo sa kilid sa server

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

Sa kliyente (pagpasa sa kilid), kinahanglan una nimo nga ma-access ang camera. Gihimo kini pinaagi sa MediaStream API.

Nakuha namon ang access (pagtugot) sa camera / mikropono pinaagi sa Media Devices API. Kini nga API naghatag usa ka pamaagi MediaDevices.getUserMedia(), nga nagpakita sa pop. usa ka bintana nga mangayo og pagtugot sa user nga maka-access sa camera ug/o mikropono. Gusto nakong timan-an nga gihimo nako ang tanan nga mga eksperimento sa Google Chrome, apan sa akong hunahuna ang tanan molihok sa Firefox sa parehas nga paagi.

Sunod, ang getUserMedia() nagbalik sa usa ka Saad, diin gipasa niini ang usa ka butang nga MediaStream - usa ka stream sa datos sa video-audio. Gi-assign namo kini nga butang sa src property sa elemento sa video. Code:

Broadcasting nga bahin

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

Aron ma-broadcast ang usa ka video stream pinaagi sa mga socket, kinahanglan nga i-encode kini sa usa ka lugar, i-buffer kini, ug ibalhin kini sa mga bahin. Ang hilaw nga video stream dili mapasa pinaagi sa mga websocket. Ania ang among tabang Media Recorder API. Kini nga API nagtugot kanimo sa pag-encode ug pagbahin sa sapa ngadto sa mga piraso. Nag-encode ako aron ma-compress ang video stream aron makamaneho og gamay nga byte sa network. Kung nabuak na, mahimo nimong ipadala ang matag piraso sa usa ka websocket. Code:

Gi-encode namon ang video stream, gibunalan namon kini sa mga bahin

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

Karon atong idugang ang websockets transmission. Katingad-an, ang tanan nga imong gikinahanglan usa ka butang Mga WebSocket. Kini adunay duha ra nga paagi sa pagpadala ug pagsira. Ang mga ngalan nagsulti alang sa ilang kaugalingon. Gidugang nga code:

Pagpadala ug video stream sa 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>

Andam na ang bahin sa sibya! Karon atong sulayan nga makadawat og video stream ug ipakita kini sa kliyente. Unsa ang atong gikinahanglan alang niini? Una, siyempre, ang koneksyon sa socket. Gibitay namo ang usa ka "tigpaminaw" (tigpaminaw) sa WebSocket nga butang, mag-subscribe sa 'mensahe' nga panghitabo. Nakadawat usa ka piraso sa binary data, ang among server nagsibya sa mga subscriber niini, nga mao, mga kliyente. Sa parehas nga oras, ang function sa callback nga may kalabotan sa "tigpaminaw" sa panghitabo nga 'mensahe' na-trigger sa kliyente, ang butang mismo gipasa sa argumento sa function - usa ka piraso sa video stream nga gi-encode sa vp8.

Pagdawat video stream

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

Sulod sa dugay nga panahon gisulayan nako nga masabtan kung nganong imposible nga ipadala dayon ang nadawat nga mga piraso alang sa playback sa elemento sa video, apan kini nahimo nga siyempre dili nimo mahimo kini, kinahanglan nimo nga ibutang una ang piraso sa usa ka espesyal nga buffer nga gilakip. sa elemento sa video, ug unya ang video stream magsugod sa pagdula. Magkinahanglan kini MediaSource API и FileReader API.

Ang MediaSource naglihok isip tigpataliwala tali sa media playback nga butang ug sa tinubdan niini nga media stream. Ang butang nga MediaSource adunay usa ka pluggable buffer alang sa tinubdan sa video/audio stream. Ang usa ka quirk mao nga ang usa ka buffer mahimo ra nga adunay sulud nga datos sa tipo nga Uint8, mao nga kinahanglan ang usa ka FileReader aron makahimo usa ka buffer. Tan-awa ang code ug kini mahimong mas klaro:

Nagdula og video stream

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

Andam na ang prototype sa serbisyo sa streaming. Ang nag-unang disbentaha mao nga ang pag-playback sa video mahilayo sa luyo sa pagpadala nga bahin sa 100 ms, among gibutang kini sa among kaugalingon kung gibahin ang video stream sa wala pa ibalhin kini sa server. Dugang pa, sa dihang gisusi nako ang akong laptop, anam-anam nga natipon ang usa ka lag tali sa mga bahin sa pagpadala ug pagdawat, kini klaro nga makita. Nagsugod ko sa pagpangita og mga paagi sa pagbuntog niini nga kakulian, ug ... nakakita RTCPeerConnection API, nga nagtugot kanimo sa pagbalhin sa usa ka video stream nga walay mga limbong sama sa pagbahin sa sapa ngadto sa mga piraso. Ang cumulative lag, sa akong hunahuna, tungod sa kamatuoran nga ang browser nag-recode sa matag piraso sa webm format sa wala pa ipadala. Wala na ako nagsugod sa pagkalot sa dugang, apan nagsugod sa pagtuon sa WebRTC, naghunahuna ako mahitungod sa mga resulta sa akong panukiduki, magsulat ako og usa ka linain nga artikulo kon akong makita nga kini makapaikag sa komunidad.

Source: www.habr.com

(Hapit) walay pulos nga webcam streaming gikan sa usa ka browser. Media Stream ug Websockets

Idugang sa usa ka comment Отменить ответ