🥇(প্রায়) একটি ব্রাউজার থেকে অকেজো ওয়েবক্যাম স্ট্রিমিং। মিডিয়া স্ট্রিম এবং ওয়েবসকেট

এই নিবন্ধে আমি অ্যাডোব ফ্ল্যাশ প্লেয়ারের মতো তৃতীয় পক্ষের ব্রাউজার প্লাগইনগুলি ব্যবহার না করে ওয়েবসকেটের মাধ্যমে ভিডিও স্ট্রিম করার আমার প্রচেষ্টাগুলি ভাগ করতে চাই৷ এর থেকে কী এসেছে তা জানতে পড়ুন।

অ্যাডোব ফ্ল্যাশ, পূর্বে ম্যাক্রোমিডিয়া ফ্ল্যাশ, একটি ওয়েব ব্রাউজারে চালিত অ্যাপ্লিকেশন তৈরির একটি প্ল্যাটফর্ম। মিডিয়া স্ট্রিম এপিআই প্রবর্তনের আগে, এটি একটি ওয়েবক্যাম থেকে ভিডিও এবং ভয়েস স্ট্রিম করার পাশাপাশি ব্রাউজারে বিভিন্ন ধরণের সম্মেলন এবং চ্যাট তৈরি করার জন্য কার্যত একমাত্র প্ল্যাটফর্ম ছিল। মিডিয়া তথ্য RTMP (রিয়েল টাইম মেসেজিং প্রোটোকল) প্রেরণের জন্য প্রোটোকলটি আসলে দীর্ঘ সময়ের জন্য বন্ধ ছিল, যার অর্থ ছিল: আপনি যদি আপনার স্ট্রিমিং পরিষেবাকে বুস্ট করতে চান, তাহলে Adobe থেকে সফ্টওয়্যার ব্যবহার করার জন্য যথেষ্ট সদয় হোন - Adobe Media Server (AMS)৷

2012 সালে কিছু সময় পরে, Adobe জনসাধারণের কাছে "ত্যাগ করে এবং থুথু দেয়"। স্পেসিফিকেশন RTMP প্রোটোকল, যাতে ত্রুটি ছিল এবং এটি মূলত অসম্পূর্ণ ছিল। ততক্ষণে, বিকাশকারীরা এই প্রোটোকলের নিজস্ব বাস্তবায়ন করতে শুরু করে এবং Wowza সার্ভার উপস্থিত হয়েছিল। 2011 সালে, Adobe RTMP-সম্পর্কিত পেটেন্টের অবৈধ ব্যবহারের জন্য Wowza এর বিরুদ্ধে একটি মামলা দায়ের করে; 4 বছর পর, বিরোধটি বন্ধুত্বপূর্ণভাবে সমাধান করা হয়েছিল।

অ্যাডোব ফ্ল্যাশ প্ল্যাটফর্মটি 20 বছরেরও বেশি পুরানো, এই সময়ে অনেকগুলি জটিল দুর্বলতা আবিষ্কৃত হয়েছে, সমর্থন প্রতিশ্রুতিবদ্ধ 2020 সালের মধ্যে শেষ হবে, স্ট্রিমিং পরিষেবার জন্য কয়েকটি বিকল্প রেখে।

আমার প্রকল্পের জন্য, আমি অবিলম্বে ব্রাউজারে ফ্ল্যাশ ব্যবহার সম্পূর্ণরূপে পরিত্যাগ করার সিদ্ধান্ত নিয়েছি। আমি উপরে প্রধান কারণ নির্দেশ করেছি; মোবাইল প্ল্যাটফর্মে ফ্ল্যাশও সমর্থিত নয়, এবং আমি সত্যিই উইন্ডোজ (ওয়াইন এমুলেটর) বিকাশের জন্য অ্যাডোব ফ্ল্যাশ স্থাপন করতে চাইনি। তাই আমি জাভাস্ক্রিপ্টে একটি ক্লায়েন্ট লিখতে সেট আউট. এটি শুধুমাত্র একটি প্রোটোটাইপ হবে, যেহেতু পরে আমি শিখেছি যে 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.

মিডিয়াসোর্স মিডিয়া প্লেব্যাক অবজেক্ট এবং এই মিডিয়া স্ট্রিমের উত্সের মধ্যে এক ধরণের মধ্যস্থতাকারী হিসাবে কাজ করে। মিডিয়াসোর্স অবজেক্টটিতে ভিডিও/অডিও স্ট্রিমের উৎসের জন্য একটি প্লাগযোগ্য বাফার রয়েছে। একটি বৈশিষ্ট্য হল বাফারটি শুধুমাত্র 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

(প্রায়) একটি ব্রাউজার থেকে অকেজো ওয়েবক্যাম স্ট্রিমিং। মিডিয়া স্ট্রিম এবং ওয়েবসকেট

একটি মন্তব্য জুড়ুন উত্তর বাতিল