🥇(Meh) streaming webcam sing ora ana guna saka browser. Media Stream lan Websockets

Ing artikel iki aku pengin nuduhake upaya kanggo stream video liwat websockets tanpa nggunakake plugin browser pihak katelu kayata Adobe Flash Player. Waca ing kanggo mangerteni apa teka saka iku.

Adobe Flash, sadurunge Macromedia Flash, minangka platform kanggo nggawe aplikasi sing mlaku ing browser web. Sadurunge ngenalake Media Stream API, iku mung siji-sijine platform kanggo streaming video lan swara saka webcam, uga kanggo nggawe macem-macem konferensi lan obrolan ing browser. Protokol kanggo ngirim informasi media RTMP (Real Time Messaging Protocol) sejatine ditutup nganti suwe, tegese: yen sampeyan pengin ngedongkrak layanan streaming, gunakake piranti lunak saka Adobe dhewe - Adobe Media Server (AMS).

Sawise sawetara wektu ing 2012, Adobe "nyerah lan muntahake" menyang publik. spesifikasi Protokol RTMP, sing ngemot kesalahan lan sejatine ora lengkap. Ing wektu iku, pangembang wiwit nggawe implementasine dhewe saka protokol iki, lan server Wowza muncul. Ing 2011, Adobe ngajokake tuntutan hukum marang Wowza amarga nggunakake ilegal paten sing gegandhengan karo RTMP; sawise 4 taun, konflik kasebut dirampungake kanthi rukun.

Platform Adobe Flash umure luwih saka 20 taun, sajrone wektu kasebut akeh kerentanan kritis ditemokake, ndhukung janji kanggo mungkasi ing 2020, ninggalake sawetara alternatif kanggo layanan streaming.

Kanggo proyekku, aku langsung mutusake kanggo nglirwakake panggunaan Flash ing browser. Aku nuduhake alesan utama ing ndhuwur; Lampu kilat uga ora didhukung ing kabeh platform seluler, lan aku pancene ora pengin masang Adobe Flash kanggo pangembangan ing Windows (emulator anggur). Dadi aku miwiti nulis klien ing JavaScript. Iki mung minangka prototipe, amarga mengko aku ngerti manawa streaming bisa ditindakake kanthi luwih efisien adhedhasar p2p, mung kanggo aku bakal dadi peer - server - peer, nanging luwih akeh babagan liyane, amarga durung siap.

Kanggo miwiti, kita butuh server websockets sing nyata. Aku nggawe sing paling gampang adhedhasar paket melodi go:

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

Ing klien (sisih streaming), sampeyan kudu ngakses kamera dhisik. Iki rampung liwat MediaStream API.

Kita entuk akses (ijin) menyang kamera / mikropon liwat API Piranti Media. API iki menehi cara MediaDevices.getUserMedia(), sing nuduhake popup. jendhela takon pangguna kanggo ijin kanggo ngakses kamera lan/utawa mikropon. Aku pengin dicathet yen aku nindakake kabeh eksperimen ing Google Chrome, nanging aku mikir kabeh bakal bisa digunakake ing Firefox.

Sabanjure, getUserMedia () ngasilake Janji, sing ngliwati obyek MediaStream - aliran data video-audio. We nemtokake obyek iki kanggo properti src saka unsur video. Kode:

Sisih siaran

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

Kanggo nyebarake stream video liwat soket, sampeyan kudu encode ing endi wae, buffer, lan ngirim ing bagean. Stream video mentah ora bisa ditularake liwat soket web. Iki ngendi kanggo bantuan kita MediaRecorder API. API iki ngijini sampeyan kanggo encode lan break stream menyang bêsik. Aku nggawe enkoding kanggo ngompres stream video supaya bisa ngirim luwih sithik bita liwat jaringan. Sawise pecah dadi potongan, sampeyan bisa ngirim saben potongan menyang soket web. Kode:

We encode stream video, break menyang bagean

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

Saiki ayo nambah transmisi liwat websockets. Kaget, kabeh sing sampeyan butuhake yaiku obyek WebSockets. Wis mung rong cara ngirim lan nutup. Jeneng-jeneng kasebut kanggo awake dhewe. Kode sing ditambahake:

Kita ngirim stream video menyang 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>

Sisih siaran wis siyap! Saiki ayo nyoba nampa stream video lan nampilake ing klien. Apa sing kita butuhake kanggo iki? Kaping pisanan, mesthi, sambungan soket. Kita masang "pendengar" menyang obyek WebSocket lan langganan acara 'pesen'. Sawise nampa potongan data binar, server kita nyebarake menyang pelanggan, yaiku klien. Ing kasus iki, fungsi callback sing digandhengake karo "pendengar" acara 'pesen' dipicu ing klien; obyek kasebut dhewe diterusake menyang argumen fungsi - bagean saka stream video sing dikode dening vp8.

Kita nampa stream video

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

Suwe-suwe aku nyoba ngerti kenapa ora bisa langsung ngirim potongan sing ditampa menyang unsur video kanggo muter maneh, nanging ternyata iki ora bisa ditindakake, mesthine sampeyan kudu nyelehake potongan kasebut ing buffer khusus sing diikat menyang unsur video, lan mung banjur bakal miwiti muter stream video. Kanggo iki sampeyan kudu MediaSource API и FileReader API.

MediaSource tumindak minangka perantara antarane obyek puter maneh media lan sumber aliran media iki. Objek MediaSource ngemot buffer pluggable kanggo sumber video / stream audio. Salah sawijining fitur yaiku buffer mung bisa nahan data Uint8, mula sampeyan butuh FileReader kanggo nggawe buffer kasebut. Deleng kode kasebut lan bakal luwih jelas:

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

Prototipe layanan streaming wis siyap. Kerugian utama yaiku puter maneh video bakal ketinggalan ing sisih transmisi kanthi 100 ms; kita nyetel iki dhewe nalika pamisah stream video sadurunge ngirim menyang server. Menapa malih, nalika mriksa ing laptop, lag antarane sisih ngirim lan nampa mboko sithik nambah, iki cetha katon. Aku miwiti nggoleki cara kanggo ngatasi kerugian iki, lan ... ketemu RTCPeerConnection API, sing ngijini sampeyan ngirim stream video tanpa trik kayata pamisah stream menyang bêsik. Akumulasi lag, aku mikir, amarga browser ngodhe maneh saben potongan menyang format webm sadurunge transmisi. Aku ora ndudhuk maneh, nanging miwiti sinau WebRTC. Aku bakal nulis artikel kapisah babagan asil riset yen aku nemokake iku menarik kanggo masyarakat.

Source: www.habr.com

(Meh) tanpa guna webcam streaming saka browser. Media Stream lan Websockets