🥇(Yuav luag) tsis muaj txiaj ntsig webcam streaming los ntawm browser. Media Stream thiab Websockets

Hauv tsab xov xwm no kuv xav qhia kuv qhov kev sim ua yeeb yaj kiab los ntawm websockets yam tsis siv lwm tus browser plugins xws li Adobe Flash Player. Nyeem rau kom paub seb dab tsi tuaj ntawm nws.

Adobe Flash, yav tas los Macromedia Flash, yog lub platform tsim cov ntawv thov uas khiav hauv lub web browser. Ua ntej qhov kev taw qhia ntawm Media Stream API, nws tau xyaum tib lub platform rau streaming video thiab lub suab los ntawm lub webcam, nrog rau tsim ntau hom kev sib tham thiab sib tham hauv browser. Cov txheej txheem rau kev xa cov ntaub ntawv xov xwm RTMP (Real Time Messaging Protocol) tau raug kaw rau lub sijhawm ntev, uas txhais tau tias: yog tias koj xav txhawb koj cov kev pabcuam streaming, ua siab zoo siv software los ntawm Adobe lawv tus kheej - Adobe Media Server (AMS).

Tom qab qee lub sijhawm hauv 2012, Adobe "tso tawm thiab spat nws" rau pej xeem. specification RTMP raws tu qauv, uas muaj qhov yuam kev thiab tseem ceeb tsis tiav. Thaum lub sijhawm ntawd, cov neeg tsim khoom tau pib ua lawv tus kheej ua raws li txoj cai no, thiab Wowza server tau tshwm sim. Hauv 2011, Adobe tau foob foob Wowza rau kev siv tsis raug cai ntawm RTMP-txog patents; tom qab 4 xyoo, qhov kev tsis sib haum xeeb tau daws zoo.

Lub Adobe Flash platform muaj ntau dua 20 xyoo, thaum lub sijhawm muaj ntau qhov tsis txaus ntseeg tau tshawb pom, txhawb nqa. cog lus kom xaus rau xyoo 2020, tawm ob peb txoj hauv kev rau kev pabcuam streaming.

Rau kuv qhov project, kuv txiav txim siab tam sim ntawd tso tseg kev siv Flash hauv qhov browser. Kuv tau qhia qhov laj thawj tseem ceeb saum toj no; Flash tseem tsis tau txais kev txhawb nqa ntawm txhua lub platforms mobile, thiab kuv yeej tsis xav xa Adobe Flash rau kev txhim kho ntawm Windows (cua emulator). Yog li kuv tau teeb tsa los sau tus neeg siv khoom hauv JavaScript. Qhov no yuav yog tus qauv xwb, txij li tom qab kuv tau kawm tias streaming tuaj yeem ua tau zoo dua li p2p, tsuas yog rau kuv nws yuav yog phooj ywg - neeg rau zaub mov - phooj ywg, tab sis ntxiv rau lwm lub sijhawm, vim nws tseem tsis tau npaj.

Txhawm rau pib, peb xav tau qhov tseeb websockets server. Kuv ua qhov yooj yim tshaj plaws raws li lub suab paj nruag mus pob:

Server code

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

Ntawm cov neeg siv khoom (sab streaming), koj yuav tsum xub nkag mus rau lub koob yees duab. Qhov no yog ua tiav los ntawm MediaStream API.

Peb tau txais kev nkag (kev tso cai) rau lub koob yees duab / microphone los ntawm Media Devices API. Qhov API no muab ib txoj hauv kev MediaDevices.getUserMedia(), uas qhia popup. lub qhov rais nug tus neeg siv rau kev tso cai nkag mus rau lub koob yees duab thiab / lossis microphone. Kuv xav nco ntsoov tias kuv tau ua txhua qhov kev sim hauv Google Chrome, tab sis kuv xav tias txhua yam yuav ua haujlwm zoo ib yam hauv Firefox.

Tom ntej no, getUserMedia() rov qab cog lus, uas nws dhau qhov khoom siv MediaStream - kwj ntawm cov ntaub ntawv video-suab. Peb muab cov khoom no rau src cov cuab yeej ntawm cov khoom video. Code:

Tshaj tawm sab

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

Txhawm rau tshaj tawm cov kwj video hla lub qhov (socket), koj yuav tsum tau encode nws qhov chaw, tsis nws, thiab xa mus rau qhov chaw. Cov kwj yeeb yaj kiab nyoos tsis tuaj yeem kis tau los ntawm websockets. Nov yog qhov uas nws tuaj rau peb pab MediaRecorder API. Qhov API no tso cai rau koj los encode thiab rhuav cov kwj deg rau hauv daim. Kuv ua encoding rau compress cov kwj video thiaj li xa tsawg bytes hla lub network. Tom qab tawg nws ua tej daim, koj tuaj yeem xa txhua daim mus rau ib lub websocket. Code:

Peb encode cov kwj video, rhuav nws mus rau hauv qhov chaw

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

Tam sim no cia peb ntxiv kev sib kis ntawm websockets. Kuj ceeb tias, txhua yam koj xav tau rau qhov no yog ib qho khoom WebSockets. Nws tsuas muaj ob txoj hauv kev xa thiab kaw. Cov npe hais rau lawv tus kheej. Ntxiv code:

Peb xa cov kwj video mus rau lub 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>

Sab tshaj tawm yog npaj txhij! Tam sim no cia peb sim kom tau txais cov kwj video thiab tso tawm rau tus neeg siv khoom. Peb xav tau dab tsi rau qhov no? Firstly, ntawm chav kawm, lub qhov (socket) kev twb kev txuas. Peb xa ib tug "neeg mloog" rau cov khoom WebSocket thiab sau npe mus rau 'cov lus' tshwm sim. Tau txais ib daim ntawm cov ntaub ntawv binary, peb lub server tshaj tawm nws rau cov neeg siv khoom, uas yog, cov neeg siv khoom. Hauv qhov no, kev ua haujlwm hu rov qab cuam tshuam nrog "tus mloog" ntawm 'cov lus' tshwm sim yog tshwm sim ntawm tus neeg siv khoom; cov khoom nws tus kheej tau dhau mus rau qhov kev sib cav - ib daim ntawm cov kwj video encoded los ntawm vp8.

Peb txais cov kwj 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>

Tau ntev kuv tau sim nkag siab tias vim li cas nws tsis tuaj yeem xa cov khoom tau txais tam sim ntawd mus rau cov yeeb yaj kiab rau kev ua yeeb yaj kiab, tab sis nws tau pom tias qhov no tsis tuaj yeem ua tiav, tau kawg, koj yuav tsum xub muab cov khoom tso rau hauv qhov tshwj xeeb tsis txuas rau. lub caij video, thiab tsuas yog tom qab ntawd nws yuav pib ua si cov kwj video. Rau qhov no koj yuav xav tau MediaSource API и FileReader API.

MediaSource ua raws li ib yam ntawm intermediary ntawm cov xov xwm playback khoom thiab lub hauv paus ntawm cov kwj tawm no. Cov khoom siv MediaSource muaj qhov tsis muaj pluggable rau qhov chaw ntawm cov yeeb yaj kiab / suab kwj. Ib qho tshwj xeeb yog tias qhov tsis tuaj yeem tuav Uint8 cov ntaub ntawv nkaus xwb, yog li koj yuav xav tau FileReader los tsim qhov tsis zoo. Saib ntawm qhov chaws thiab nws yuav pom tseeb dua:

Ua si cov kwj 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'),
        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>

Tus qauv ntawm qhov kev pabcuam streaming yog npaj txhij. Qhov tsis zoo tseem ceeb yog qhov kev ua yeeb yaj kiab video yuav lag tom qab kev xa tawm sab nraud los ntawm 100 ms; peb teeb qhov no peb tus kheej thaum faib cov kwj video ua ntej xa mus rau lub server. Ntxiv mus, thaum kuv kuaj xyuas ntawm kuv lub laptop, lub lag luam ntawm cov kis tau tus mob thiab tau txais sab maj mam nce, qhov no tau pom meej meej. Kuv pib nrhiav txoj hauv kev los kov yeej qhov tsis zoo no, thiab ... tuaj hla RTCPeerConnection API, uas tso cai rau koj xa cov kwj video yam tsis muaj kev ua kom yuam kev xws li faib cov kwj mus rau hauv daim. Lub lag luam loj, kuv xav tias, yog vim qhov tseeb tias qhov browser rov encodes txhua daim rau hauv webm hom ua ntej kev sib kis. Kuv tsis tau khawb ib qho ntxiv, tab sis pib kawm WebRTC. Kuv xav tias kuv yuav sau ib tsab xov xwm cais txog cov txiaj ntsig ntawm kuv qhov kev tshawb fawb yog tias kuv pom nws nthuav rau zej zog.

Tau qhov twg los: www.hab.com

(Yuav luag) tsis muaj txiaj ntsig webcam streaming los ntawm browser. Media Stream thiab Websockets

Ntxiv ib saib Отменить ответ