🥇(Pafupifupi) makamera opanda pake akusakatula kuchokera pa msakatuli. Media Stream ndi Websockets

M'nkhaniyi ndikufuna kugawana zomwe ndikuyesera kuti ndizitha kuyendetsa kanema kudzera pa websockets popanda kugwiritsa ntchito mapulagini amtundu wachitatu monga Adobe Flash Player. Werengani kuti mudziwe zomwe zidachokera.

Adobe Flash, yomwe kale inali Macromedia Flash, ndi nsanja yopangira mapulogalamu omwe amayenda pa msakatuli. Asanakhazikitsidwe Media Stream API, inali njira yokhayo yosinthira makanema ndi mawu kuchokera pawebusayiti, komanso kupanga misonkhano yamitundu yosiyanasiyana ndi macheza pasakatuli. Protocol yotumizira uthenga wapa media RTMP (Real Time Messaging Protocol) idatsekedwa kwa nthawi yayitali, zomwe zikutanthauza: ngati mukufuna kulimbikitsa ntchito yanu yotsatsira, khalani okoma mtima kugwiritsa ntchito mapulogalamu ochokera ku Adobe okha - Adobe Media Server (AMS).

Patapita nthawi mu 2012, Adobe "adasiya ndikulavula" kwa anthu. kufotokoza RTMP protocol, yomwe inali ndi zolakwika ndipo inali yosakwanira. Pofika nthawi imeneyo, okonza anayamba kupanga zawo zogwiritsira ntchito ndondomekoyi, ndipo seva ya Wowza inawonekera. Mu 2011, Adobe adasuma mlandu wotsutsana ndi Wowza chifukwa chogwiritsa ntchito ma patent okhudzana ndi RTMP mosaloledwa; patatha zaka 4, mkanganowo unathetsedwa mwamtendere.

Pulatifomu ya Adobe Flash ili ndi zaka zopitilira 20, panthawi yomwe zovuta zambiri zapezeka, chithandizo. analonjeza kutha pofika 2020, ndikusiya njira zingapo zosinthira.

Pantchito yanga, nthawi yomweyo ndinaganiza zosiya kugwiritsa ntchito Flash mu msakatuli. Ndawonetsa chifukwa chachikulu pamwambapa; Kung'anima sikuthandizidwanso konse pamapulatifomu am'manja, ndipo sindinkafuna kuyika Adobe Flash kuti ipangidwe pa Windows (emulator wavinyo). Chifukwa chake ndidayamba kulemba kasitomala mu JavaScript. Ichi chidzakhala chitsanzo chabe, popeza pambuyo pake ndinaphunzira kuti kusuntha kungathe kuchitidwa bwino kwambiri kutengera p2p, kwa ine kokha kudzakhala anzanga - seva - anzanga, koma zambiri panthawi ina, chifukwa sichinakonzekere.

Kuti tiyambe, timafunikira seva yeniyeni ya websockets. Ndinapanga yosavuta kwambiri kutengera phukusi la melody go:

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

Pa kasitomala (mbali yakukhamukira), choyamba muyenera kupeza kamera. Izi zachitika MediaStream API.

Timapeza mwayi (chilolezo) ku kamera/maikolofoni kudzera Media Devices API. API iyi imapereka njira MediaDevices.getUserMedia(), zomwe zikuwonetsa popup. zenera lopempha wogwiritsa ntchito chilolezo chofikira kamera ndi/kapena maikolofoni. Ndikufuna kudziwa kuti ndidachita zoyeserera zonse mu Google Chrome, koma ndikuganiza kuti zonse zikhala chimodzimodzi mu Firefox.

Kenako, getUserMedia () imabweretsanso Lonjezo, komwe imadutsa chinthu cha MediaStream - mtsinje wa data-audio. Timagawira chinthu ichi ku src katundu wa kanema. Kodi:

Mbali yowulutsa

<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 muulutse vidiyo pamasoketi, muyenera kuyiyika kwinakwake, kuisunga, ndikuyitumiza m'magawo angapo. Kanema wosasinthika sangathe kufalitsidwa kudzera pa ma websockets. Apa ndi pamene zimatithandizira MediaRecorder API. API iyi imakulolani kuti mutseke ndikuphwanya mtsinjewo kukhala zidutswa. Ndimapanga encoding kuti ndikanikize mavidiyo kuti nditumize ma byte ochepa pa netiweki. Mukachiphwanya mzidutswa, mutha kutumiza chidutswa chilichonse ku websocket. Kodi:

Timayika mtsinje wa kanema, kuwagawa m'magawo

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

Tsopano tiyeni tiwonjezere kufala kudzera pa ma websockets. Chodabwitsa n'chakuti zonse zomwe mukufunikira pa izi ndi chinthu WebSockets. Ili ndi njira ziwiri zokha kutumiza ndi kutseka. Mayina amadzinenera okha. Kodi anawonjezera:

Timatumiza mavidiyowo ku 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>

Mbali yowulutsa yakonzeka! Tsopano tiyeni tiyese kulandira kanema mtsinje ndi kusonyeza pa kasitomala. Tikufuna chiyani pa izi? Choyamba, ndithudi, kugwirizana socket. Timalumikiza "womvera" ku chinthu cha WebSocket ndikulembetsa ku chochitika cha 'uthenga'. Titalandira chidutswa cha data ya binary, seva yathu imawulutsa kwa olembetsa, ndiko kuti, makasitomala. Pamenepa, ntchito ya callback yolumikizidwa ndi "womvera" wa chochitika cha 'message' imayambika kwa kasitomala; chinthucho chimaperekedwa pamkangano wantchito - kachigawo kakanema kamene kamasungidwa ndi vp8.

Timavomereza mavidiyo

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

Kwa nthawi yayitali ndimayesetsa kumvetsetsa chifukwa chake sikutheka kutumiza zidutswa zomwe zalandilidwa nthawi yomweyo kuvidiyo kuti ziseweredwe, koma zidapezeka kuti izi sizingachitike, inde, muyenera choyamba kuyika chidutswacho muchitetezo chapadera chomangika. chigawo cha kanema, ndipo pokhapokha chidzayamba kusewera mavidiyo. Kwa ichi mudzafunika MediaSource API и FileReader API.

MediaSource imagwira ntchito ngati mkhalapakati pakati pa zinthu zomwe zimaseweredwa ndi magwero a media awa. Chinthu cha MediaSource chili ndi chotchinga chomwe chimatha pluggable kwa magwero a kanema/mawu. Chinthu chimodzi ndi chakuti buffer imatha kusunga deta ya Uint8, kotero mudzafunika FileReader kuti mupange buffer yotere. Yang'anani pa code ndipo zidzamveka bwino:

Kusewera kanema mtsinje

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

The prototype wa utumiki akukhamukira wokonzeka. Choyipa chachikulu ndichakuti kusewerera makanema kumatsalira kumbuyo kwa 100 ms; timadziyika tokha tikamagawa vidiyoyi tisanayitumize ku seva. Komanso, nditayang'ana pa laputopu yanga, kusanja pakati pa mbali zotumizira ndi kulandira kunasonkhanitsidwa pang'onopang'ono, izi zidawoneka bwino. Ndinayamba kufunafuna njira zothetsera vutoli, ndipo ... ndinapeza RTCPeerConnection API, zomwe zimakulolani kuti mutumize mtsinje wa kanema popanda zidule monga kugawa mtsinjewo kukhala zidutswa. Kuchulukana, ndikuganiza, ndi chifukwa chakuti msakatuli amalowetsanso chidutswa chilichonse mumtundu wa webm asanatumize. Sindinayambenso kukumba, koma ndinayamba kuphunzira WebRTC.Ndikuganiza kuti ndilemba nkhani ina yokhudzana ndi zotsatira za kafukufuku wanga ngati ndikuwona kuti ndizosangalatsa kwa anthu ammudzi.

Source: www.habr.com

(Pafupifupi) kusakatula kopanda phindu kuchokera pa msakatuli. Media Stream ndi Websockets

Kuwonjezera ndemanga kuletsa reply