🥇 (Bron) gwe-gamera diwerth yn ffrydio o borwr. Ffrwd Cyfryngau a Websocedi

Yn yr erthygl hon rwyf am rannu fy ymdrechion i ffrydio fideo trwy socedi gwe heb ddefnyddio ategion porwr trydydd parti fel Adobe Flash Player. Darllenwch ymlaen i ddarganfod beth ddaeth ohono.

Mae Adobe Flash, Macromedia Flash gynt, yn llwyfan ar gyfer creu cymwysiadau sy'n rhedeg mewn porwr gwe. Cyn cyflwyno'r Media Stream API, hwn oedd yr unig blatfform i ffrydio fideo a llais o we-gamera, yn ogystal ag ar gyfer creu gwahanol fathau o gynadleddau a sgyrsiau yn y porwr. Roedd y protocol ar gyfer trosglwyddo gwybodaeth cyfryngau RTMP (Protocol Negeseuon Amser Real) wedi'i gau am amser hir mewn gwirionedd, a oedd yn golygu: os ydych chi am roi hwb i'ch gwasanaeth ffrydio, byddwch yn ddigon caredig i ddefnyddio meddalwedd gan Adobe eu hunain - Adobe Media Server (AMS).

Ar ôl peth amser yn 2012, rhoddodd Adobe y gorau iddi a'i phoeri i'r cyhoedd. manyleb Protocol RTMP, a oedd yn cynnwys gwallau ac a oedd i bob pwrpas yn anghyflawn. Erbyn hynny, dechreuodd datblygwyr wneud eu gweithrediadau eu hunain o'r protocol hwn, ac ymddangosodd gweinydd Wowza. Yn 2011, fe wnaeth Adobe ffeilio achos cyfreithiol yn erbyn Wowza am ddefnydd anghyfreithlon o batentau cysylltiedig â RTMP; ar ôl 4 blynedd, cafodd y gwrthdaro ei ddatrys yn gyfeillgar.

Mae platfform Adobe Flash yn fwy nag 20 mlwydd oed, ac yn ystod y cyfnod hwnnw mae llawer o wendidau hanfodol wedi'u darganfod, cefnogaeth addawodd i ddod i ben erbyn 2020, gan adael ychydig o ddewisiadau amgen ar gyfer y gwasanaeth ffrydio.

Ar gyfer fy mhrosiect, penderfynais ar unwaith roi'r gorau i ddefnyddio Flash yn y porwr yn llwyr. Nodais y prif reswm uchod; Nid yw Flash hefyd yn cael ei gefnogi o gwbl ar lwyfannau symudol, ac nid oeddwn wir eisiau defnyddio Adobe Flash i'w ddatblygu ar Windows (efelychydd gwin). Felly es ati i ysgrifennu cleient yn JavaScript. Prototeip yn unig fydd hwn, oherwydd yn ddiweddarach dysgais y gellir gwneud ffrydio yn llawer mwy effeithlon yn seiliedig ar p2p, dim ond i mi y bydd yn gyfoedion - gweinydd - cyfoedion, ond yn fwy ar hynny dro arall, oherwydd nid yw'n barod eto.

I ddechrau, mae angen y gweinydd gwe-socedi go iawn. Fe wnes i'r un symlaf yn seiliedig ar y pecyn melody go:

Cod gweinydd

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

Ar y cleient (ochr ffrydio), yn gyntaf mae angen i chi gael mynediad i'r camera. Gwneir hyn drwodd MediaStream API.

Rydym yn cael mynediad (caniatâd) i'r camera/meicroffon drwodd Media Devices API. Mae'r API hwn yn darparu dull MediaDevices.getUserMedia(), sy'n dangos popup. ffenestr yn gofyn i'r defnyddiwr am ganiatâd i fynd at y camera a/neu'r meicroffon. Hoffwn nodi fy mod wedi cynnal yr holl arbrofion yn Google Chrome, ond rwy'n credu y bydd popeth yn gweithio tua'r un peth yn Firefox.

Nesaf, mae getUserMedia() yn dychwelyd Addewid, y mae'n pasio gwrthrych MediaStream iddo - ffrwd o ddata sain fideo. Rydym yn aseinio'r gwrthrych hwn i briodwedd src yr elfen fideo. Côd:

Ochr darlledu

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

I ddarlledu ffrwd fideo dros socedi, mae angen i chi ei amgodio yn rhywle, ei glustogi, a'i drosglwyddo mewn rhannau. Ni ellir trosglwyddo'r ffrwd fideo amrwd trwy socedi gwe. Dyma lle mae'n dod at ein cymorth MediaRecorder API. Mae'r API hwn yn caniatáu ichi amgodio a thorri'r ffrwd yn ddarnau. Rwy'n amgodio i gywasgu'r ffrwd fideo er mwyn anfon llai o beit dros y rhwydwaith. Ar ôl ei dorri'n ddarnau, gallwch anfon pob darn i soced gwe. Côd:

Rydyn ni'n amgodio'r ffrwd fideo, yn ei dorri'n rhannau

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

Nawr, gadewch i ni ychwanegu trosglwyddiad trwy websocedi. Yn syndod, y cyfan sydd ei angen arnoch chi ar gyfer hyn yw gwrthrych WebSoced. Dim ond dau ddull anfon a chau sydd ganddo. Mae'r enwau yn siarad drostynt eu hunain. Cod wedi'i ychwanegu:

Rydym yn trosglwyddo'r ffrwd fideo i'r gweinydd

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

Mae'r ochr darlledu yn barod! Nawr, gadewch i ni geisio derbyn ffrwd fideo a'i arddangos ar y cleient. Beth sydd ei angen arnom ar gyfer hyn? Yn gyntaf, wrth gwrs, y cysylltiad soced. Rydym yn atodi “gwrandäwr” i'r gwrthrych WebSocket ac yn tanysgrifio i'r digwyddiad 'neges'. Ar ôl derbyn darn o ddata deuaidd, mae ein gweinydd yn ei ddarlledu i danysgrifwyr, hynny yw, cleientiaid. Yn yr achos hwn, mae'r swyddogaeth galw'n ôl sy'n gysylltiedig â "gwrandäwr" y digwyddiad 'neges' yn cael ei sbarduno ar y cleient; mae'r gwrthrych ei hun yn cael ei drosglwyddo i'r ddadl swyddogaeth - darn o'r ffrwd fideo wedi'i amgodio gan vp8.

Rydym yn derbyn ffrwd fideo

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

Am amser hir ceisiais ddeall pam ei bod yn amhosibl anfon y darnau a dderbyniwyd ar unwaith i'r elfen fideo i'w chwarae, ond daeth i'r amlwg na ellir gwneud hyn, wrth gwrs, yn gyntaf rhaid i chi roi'r darn mewn byffer arbennig wedi'i rwymo i yr elfen fideo, a dim ond wedyn y bydd yn dechrau chwarae'r ffrwd fideo. Ar gyfer hyn bydd angen MediaSource API и FileReader API.

Mae MediaSource yn gweithredu fel math o gyfryngwr rhwng y gwrthrych chwarae cyfryngau a ffynhonnell y ffrwd cyfryngau hon. Mae gwrthrych MediaSource yn cynnwys byffer y gellir ei blygio ar gyfer ffynhonnell y ffrwd fideo/sain. Un nodwedd yw y gall y byffer ddal data Uint8 yn unig, felly bydd angen FileReader arnoch i greu byffer o'r fath. Edrychwch ar y cod a bydd yn dod yn gliriach:

Chwarae'r ffrwd fideo

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

Mae prototeip y gwasanaeth ffrydio yn barod. Y brif anfantais yw y bydd chwarae fideo yn llusgo 100 ms y tu ôl i'r ochr drosglwyddo; rydym yn gosod hyn ein hunain wrth hollti'r ffrwd fideo cyn ei drosglwyddo i'r gweinydd. Ar ben hynny, pan wnes i wirio ar fy ngliniadur, roedd yr oedi rhwng yr ochrau trosglwyddo a derbyn yn cronni'n raddol, roedd hyn i'w weld yn glir. Dechreuais chwilio am ffyrdd o oresgyn yr anfantais hon, a ... deuthum ar draws RTCPeerConnection API, sy'n eich galluogi i drosglwyddo ffrwd fideo heb driciau fel hollti'r ffrwd yn ddarnau. Mae'r oedi cynyddol, rwy'n meddwl, yn deillio o'r ffaith bod y porwr yn ail-amgodio pob darn i fformat webm cyn ei drosglwyddo. Wnes i ddim cloddio dim pellach, ond dechreuais astudio WebRTC.Rwy'n meddwl y byddaf yn ysgrifennu erthygl ar wahân am ganlyniadau fy ymchwil os byddaf yn ei chael yn ddiddorol i'r gymuned.

Ffynhonnell: hab.com

(Bron) gwe-gamera diwerth yn ffrydio o borwr. Ffrwd Cyfryngau a Websocedi

Ychwanegu sylw Diddymu ateb