🥇(თითქმის) უსარგებლო ვებკამერა ბრაუზერიდან. მედია ნაკადი და ვებსოკეტები

ამ სტატიაში მსურს გაგიზიაროთ ჩემი მცდელობები ვიდეოს სტრიმინგი ვებსოკეტების საშუალებით მესამე მხარის ბრაუზერის დანამატების გამოყენების გარეშე, როგორიცაა 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, მაგრამ უფრო ამის შესახებ სხვა დროს, რადგან ის ჯერ არ არის მზად.

დასაწყებად, ჩვენ გვჭირდება რეალური websockets სერვერი. მე შევქმენი უმარტივესი მელოდია 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, რომელიც საშუალებას გაძლევთ გადაიტანოთ ვიდეო ნაკადი ისეთი ხრიკების გარეშე, როგორიცაა ნაკადის ნაწილებად დაყოფა. დაგროვილი ჩამორჩენა, ვფიქრობ, განპირობებულია იმით, რომ ბრაუზერი გადაცემამდე ხელახლა აკოპირებს თითოეულ ნაწილს webm ფორმატში. მე აღარ გავთხარე, მაგრამ დავიწყე WebRTC-ის შესწავლა. ვფიქრობ, ცალკე სტატიას დავწერ ჩემი კვლევის შედეგების შესახებ, თუ ის საზოგადოებისთვის საინტერესო იქნება.

წყარო: www.habr.com

(თითქმის) უსარგებლო ვებკამერის ნაკადი ბრაუზერიდან. მედია ნაკადი და ვებსოკეტები

ახალი კომენტარის დამატება

(თითქმის) უსარგებლო ვებკამერის ნაკადი ბრაუზერიდან. მედია ნაკადი და ვებსოკეტები

ახალი კომენტარის დამატება პასუხის გასაუქმებლად

ახალი კომენტარის დამატება