🥇 (Речиси) бескорисна веб-камера што стримува од прелистувач. Медиумски тек и веб-сокети

Во оваа статија сакам да ги споделам моите обиди за пренос на видео преку веб-сокети без користење на приклучоци за прелистувачи од трети страни, како што е Adobe Flash Player. Прочитајте за да дознаете што излезе од тоа.

Adobe Flash, порано Macromedia Flash, е платформа за креирање апликации кои работат во веб-прелистувач. Пред воведувањето на Media Stream API, тој беше практично единствената платформа за проследување видео и глас од веб-камера, како и за создавање различни видови конференции и разговори во прелистувачот. Протоколот за пренос на медиумски информации RTMP (Real Time Messaging Protocol) всушност беше затворен долго време, што значеше: ако сакате да ја зајакнете вашата услуга за стриминг, бидете доволно љубезни да користите софтвер од самите Adobe - Adobe Media Server (AMS).

По некое време во 2012 година, Adobe „се откажа и го исплука“ на јавноста. спецификација RTMP протокол, кој содржеше грешки и во суштина беше нецелосен. Во тоа време, програмерите почнаа да прават свои имплементации на овој протокол и се појави серверот Wowza. Во 2011 година, Adobe поднесе тужба против Wowza за нелегална употреба на патенти поврзани со RTMP; по 4 години, конфликтот беше решен спогодбено.

Платформата Adobe Flash е стара повеќе од 20 години, за тоа време се откриени многу критични пропусти, поддршка вети да заврши до 2020 година, оставајќи неколку алтернативи за услугата за стриминг.

За мојот проект, веднаш решив целосно да ја напуштам употребата на Flash во прелистувачот. Ја наведов главната причина погоре; Flash исто така воопшто не е поддржан на мобилните платформи и навистина не сакав да го распоредам Adobe Flash за развој на Windows (емулатор за вино). Така, тргнав да напишам клиент во JavaScript. Ова ќе биде само прототип, бидејќи подоцна дознав дека стриминг може да се направи многу поефикасно врз основа на p2p, само за мене ќе биде peer - server - peers, но повеќе за тоа друг пат, бидејќи сè уште не е готов.

За да започнеме, ни треба вистинскиот веб-сокет сервер. Јас го направив наједноставниот врз основа на пакетот melody go:

Серверски код

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

На клиентот (страната на стриминг), прво треба да пристапите до камерата. Ова се прави преку MediaStream API.

Добиваме пристап (дозвола) до камерата/микрофонот преку API за медиумски уреди. Овој API обезбедува метод MediaDevices.getUserMedia(), кој покажува скокачки прозорец. прозорец кој бара од корисникот дозвола за пристап до камерата и/или микрофонот. Би сакал да забележам дека ги извршив сите експерименти во Google Chrome, но мислам дека сè ќе функционира исто во Firefox.

Следно, getUserMedia() враќа Promise, на кое му предава објект MediaStream - поток од видео-аудио податоци. Овој објект го доделуваме на својството src на видео елементот. Код:

Радиодифузна страна

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

За да емитувате видео стрим преку приклучоците, треба да го шифрирате некаде, да го тампонирате и да го пренесете на делови. Необработениот видео поток не може да се пренесе преку веб-сокети. Тука ни доаѓа на помош MediaRecorder API. Овој API ви овозможува да го шифрирате и разделите потокот на парчиња. Правам кодирање за да го компресирам видео потокот со цел да испратам помалку бајти преку мрежата. Откако ќе го скршите на парчиња, можете да го испратите секое парче до веб-сокет. Код:

Ние го кодираме видео-стримот, го распаѓаме на парчиња

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

Сега да додадеме пренос преку веб-сокети. Изненадувачки, се што ви треба за ова е објект Веб-приклучок. Има само два методи за испраќање и затворање. Имињата зборуваат сами за себе. Додаден код:

Ние го пренесуваме видео потокот на серверот

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

Страната на емитување е подготвена! Сега да се обидеме да примиме видео поток и да го прикажеме на клиентот. Што ни треба за ова? Прво, се разбира, приклучокот за штекер. Прикачуваме „слушател“ на објектот WebSocket и се претплатиме на настанот „порака“. Откако добивме дел од бинарни податоци, нашиот сервер ги емитува на претплатници, односно клиенти. Во овој случај, функцијата за повратен повик поврзана со „слушателот“ на настанот „порака“ се активира на клиентот; самиот објект се пренесува во аргументот на функцијата - дел од видео-стримот кодиран од vp8.

Ние прифаќаме видео пренос

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

Долго време се обидував да разберам зошто е невозможно веднаш да се испратат примените парчиња на видео елементот за репродукција, но се покажа дека тоа не може да се направи, се разбира, прво мора да го ставите парчето во посебен тампон врзан за видео елементот и дури тогаш ќе почне да го репродуцира видео-стримот. За ова ќе ви треба MediaSource API и FileReader API.

MediaSource делува како еден вид посредник помеѓу објектот за репродукција на медиумите и изворот на овој медиумски поток. Објектот MediaSource содржи приклучен бафер за изворот на видео/аудио потокот. Една карактеристика е дека баферот може да содржи само податоци Uint8, така што ќе ви треба FileReader за да креирате таков бафер. Погледнете го кодот и ќе ви стане појасно:

Се репродуцира видео потокот

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

Прототипот на услугата за стриминг е подготвен. Главниот недостаток е што репродукцијата на видеото ќе заостанува зад страната што ја пренесува за 100 ms; ние самите го поставуваме ова кога го делиме видео-стримот пред да го пренесеме на серверот. Покрај тоа, кога го проверив мојот лаптоп, постепено се акумулираше заостанувањето помеѓу страните за пренос и примање, ова беше јасно видливо. Почнав да барам начини да го надминам овој недостаток и... наидов RTCPeerConnection API, кој ви овозможува да пренесувате видео стрим без трикови како што се делење на преносот на парчиња. Акумулирачкото задоцнување, мислам, се должи на фактот што прелистувачот повторно го кодира секое парче во формат веб-м пред преносот. Не копав повеќе, туку почнав да го проучувам WebRTC. Мислам дека ќе напишам посебна статија за резултатите од моето истражување доколку сметам дека е интересно за заедницата.

Извор: www.habr.com

(Речиси) бескорисна веб-камера која стримува од прелистувач. Медиумски тек и веб-сокети

Додадете коментар Откажи одговор