🥇(લગભગ) બ્રાઉઝરમાંથી નકામું વેબકૅમ સ્ટ્રીમિંગ. મીડિયા સ્ટ્રીમ અને વેબસોકેટ્સ

આ લેખમાં હું Adobe Flash Player જેવા તૃતીય-પક્ષ બ્રાઉઝર પ્લગિન્સનો ઉપયોગ કર્યા વિના વેબસોકેટ્સ દ્વારા વિડિઓ સ્ટ્રીમ કરવાના મારા પ્રયાસોને શેર કરવા માંગુ છું. તેમાંથી શું આવ્યું તે જાણવા માટે આગળ વાંચો.

Adobe Flash, અગાઉ Macromedia Flash, વેબ બ્રાઉઝરમાં ચાલતી એપ્લિકેશન્સ બનાવવા માટેનું પ્લેટફોર્મ છે. મીડિયા સ્ટ્રીમ API ની રજૂઆત પહેલાં, તે વેબકેમથી વિડિયો અને વૉઇસ સ્ટ્રીમ કરવા તેમજ બ્રાઉઝરમાં વિવિધ પ્રકારની કોન્ફરન્સ અને ચેટ્સ બનાવવા માટે વ્યવહારીક રીતે એકમાત્ર પ્લેટફોર્મ હતું. મીડિયા માહિતી ટ્રાન્સમિટ કરવા માટેનો પ્રોટોકોલ RTMP (રીઅલ ટાઈમ મેસેજિંગ પ્રોટોકોલ) વાસ્તવમાં લાંબા સમયથી બંધ હતો, જેનો અર્થ હતો: જો તમે તમારી સ્ટ્રીમિંગ સેવાને બુસ્ટ કરવા માંગતા હો, તો Adobe-Adobe Media Server (AMS) ના સોફ્ટવેરનો ઉપયોગ કરવા માટે પૂરતા દયાળુ બનો.

2012 માં થોડા સમય પછી, Adobe જાહેર જનતા માટે "ત્યાગ કર્યો અને તેને બહાર કાઢ્યો". સ્પષ્ટીકરણ RTMP પ્રોટોકોલ, જેમાં ભૂલો હતી અને અનિવાર્યપણે અપૂર્ણ હતી. તે સમય સુધીમાં, વિકાસકર્તાઓએ આ પ્રોટોકોલનું પોતાનું અમલીકરણ કરવાનું શરૂ કર્યું, અને Wowza સર્વર દેખાયું. 2011 માં, Adobeએ RTMP-સંબંધિત પેટન્ટના ગેરકાયદેસર ઉપયોગ માટે Wowza સામે દાવો દાખલ કર્યો હતો; 4 વર્ષ પછી, સંઘર્ષનો સૌહાર્દપૂર્વક ઉકેલ લાવવામાં આવ્યો હતો.

Adobe Flash પ્લેટફોર્મ 20 વર્ષથી વધુ જૂનું છે, તે સમય દરમિયાન ઘણી નિર્ણાયક નબળાઈઓ મળી આવી છે, સપોર્ટ વચન આપ્યું હતું સ્ટ્રીમિંગ સેવા માટે થોડા વિકલ્પો છોડીને, 2020 સુધીમાં સમાપ્ત થશે.

મારા પ્રોજેક્ટ માટે, મેં તરત જ બ્રાઉઝરમાં ફ્લેશનો ઉપયોગ સંપૂર્ણપણે છોડી દેવાનું નક્કી કર્યું. મેં ઉપરનું મુખ્ય કારણ સૂચવ્યું છે; ફ્લેશ પણ મોબાઇલ પ્લેટફોર્મ પર બિલકુલ સપોર્ટેડ નથી, અને હું ખરેખર Windows (વાઇન ઇમ્યુલેટર) પર વિકાસ માટે Adobe Flash ને જમાવવા માંગતો ન હતો. તેથી મેં JavaScript માં ક્લાયંટ લખવાનું નક્કી કર્યું. આ માત્ર એક પ્રોટોટાઇપ હશે, કારણ કે પછીથી મને ખબર પડી કે p2p પર આધારિત સ્ટ્રીમિંગ વધુ કાર્યક્ષમ રીતે કરી શકાય છે, ફક્ત મારા માટે તે પીઅર - સર્વર - પીઅર હશે, પરંતુ બીજી વખત તેના પર વધુ, કારણ કે તે હજી તૈયાર નથી.

પ્રારંભ કરવા માટે, અમને વાસ્તવિક વેબસોકેટ સર્વરની જરૂર છે. મેં મેલોડી ગો પેકેજના આધારે સૌથી સરળ બનાવ્યું:

સર્વર કોડ

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

ક્લાયંટ (સ્ટ્રીમિંગ બાજુ) પર, તમારે પહેલા કૅમેરાને ઍક્સેસ કરવાની જરૂર છે. દ્વારા કરવામાં આવે છે મીડિયાસ્ટ્રીમ API.

અમે કેમેરા/માઈક્રોફોન દ્વારા ઍક્સેસ (પરવાનગી) મેળવીએ છીએ મીડિયા ઉપકરણો API. આ API એક પદ્ધતિ પ્રદાન કરે છે MediaDevices.getUserMedia(), જે પોપઅપ બતાવે છે. કૅમેરા અને/અથવા માઇક્રોફોનને ઍક્સેસ કરવાની પરવાનગી માટે વપરાશકર્તાને પૂછતી વિંડો. હું એ નોંધવા માંગુ છું કે મેં ગૂગલ ક્રોમમાં તમામ પ્રયોગો કર્યા છે, પરંતુ મને લાગે છે કે ફાયરફોક્સમાં બધું જ કામ કરશે.

આગળ, getUserMedia() એક વચન આપે છે, જેમાં તે મીડિયાસ્ટ્રીમ ઑબ્જેક્ટ પસાર કરે છે - વિડિઓ-ઑડિઓ ડેટાનો સ્ટ્રીમ. અમે આ ઑબ્જેક્ટને વિડિયો એલિમેન્ટની 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>

લાંબા સમય સુધી મેં એ સમજવાનો પ્રયાસ કર્યો કે પ્રાપ્ત થયેલા ટુકડાઓને પ્લેબેક માટે વિડિયો એલિમેન્ટ પર તરત જ મોકલવાનું કેમ અશક્ય છે, પરંતુ તે બહાર આવ્યું કે આ કરી શકાતું નથી, અલબત્ત, તમારે પહેલા ભાગને બંધાયેલા વિશિષ્ટ બફરમાં મૂકવો આવશ્યક છે. વિડીયો તત્વ, અને તે પછી જ તે વિડીયો સ્ટ્રીમ ચલાવવાનું શરૂ કરશે. આ માટે તમારે જરૂર પડશે મીડિયાસોર્સ API и ફાઇલરીડર API.

મીડિયાસોર્સ મીડિયા પ્લેબેક ઑબ્જેક્ટ અને આ મીડિયા સ્ટ્રીમના સ્ત્રોત વચ્ચે એક પ્રકારના મધ્યસ્થી તરીકે કાર્ય કરે છે. મીડિયાસોર્સ ઑબ્જેક્ટમાં વિડિઓ/ઑડિઓ સ્ટ્રીમના સ્ત્રોત માટે પ્લગ કરી શકાય તેવું બફર છે. એક વિશેષતા એ છે કે બફર ફક્ત Uint8 ડેટાને પકડી શકે છે, તેથી તમારે આવા બફર બનાવવા માટે ફાઇલરીડરની જરૂર પડશે. કોડ જુઓ અને તે વધુ સ્પષ્ટ થઈ જશે:

વિડિઓ સ્ટ્રીમ ચલાવી રહ્યાં છીએ

<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

બ્રાઉઝરમાંથી (લગભગ) નકામું વેબકૅમ સ્ટ્રીમિંગ. મીડિયા સ્ટ્રીમ અને વેબસોકેટ્સ

એક ટિપ્પણી ઉમેરો જવાબ રદ