🥇(Deyarli) brauzer orqali befoyda veb-kamera. Media Stream va Websockets

Ushbu maqolada men Adobe Flash Player kabi uchinchi tomon brauzer plaginlaridan foydalanmasdan videoni veb-rozetkalar orqali uzatishga urinishlarimni baham ko'rmoqchiman. Undan nima kelganini bilish uchun o'qing.

Adobe Flash, avval Macromedia Flash, veb-brauzerda ishlaydigan ilovalar yaratish uchun platformadir. Media Stream API joriy etilishidan oldin u veb-kameradan video va ovozni uzatish, shuningdek, brauzerda har xil turdagi konferentsiyalar va chatlarni yaratish uchun amalda yagona platforma edi. Media ma'lumotlarini uzatish protokoli RTMP (Real Time Messaging Protocol) aslida uzoq vaqt davomida yopiq edi, bu shuni anglatadiki: agar siz oqim xizmatini kuchaytirmoqchi bo'lsangiz, Adobe-ning o'zlari - Adobe Media Server (AMS) dasturiy ta'minotidan foydalanishga mehribon bo'ling.

2012-yilda bir muncha vaqt o'tgach, Adobe jamoatchilikka "taslim bo'ldi va tupurdi". spetsifikatsiya Xatolarni o'z ichiga olgan va umuman to'liq bo'lmagan RTMP protokoli. O'sha vaqtga kelib, ishlab chiquvchilar ushbu protokolni o'zlari amalga oshirishni boshladilar va Wowza serveri paydo bo'ldi. 2011-yilda Adobe Wowza-ga RTMP bilan bog'liq patentlardan noqonuniy foydalanganlik uchun sudga da'vo berdi; 4 yildan so'ng mojaro tinch yo'l bilan hal qilindi.

Adobe Flash platformasi 20 yoshdan oshgan, shu vaqt ichida ko'plab muhim zaifliklar aniqlangan, qo'llab-quvvatlash va'da berdi 2020 yilga borib, oqim xizmati uchun bir nechta muqobillarni qoldirib, yakunlanadi.

Loyiham uchun men darhol brauzerda Flash-dan foydalanishdan butunlay voz kechishga qaror qildim. Men yuqorida asosiy sababni ko'rsatdim; Flash ham mobil platformalarda umuman qo'llab-quvvatlanmaydi va men Adobe Flash-ni Windows-da (sharob emulyatori) ishlab chiqish uchun o'rnatishni xohlamadim. Shunday qilib, men JavaScript-da mijoz yozishni boshladim. Bu shunchaki prototip bo'ladi, chunki keyinchalik men p2p asosida translatsiyani ancha samaraliroq qilish mumkinligini bilib oldim, faqat men uchun bu tengdosh - server - tengdoshlar bo'ladi, lekin boshqa safar ko'proq, chunki u hali tayyor emas.

Boshlash uchun bizga haqiqiy websockets serveri kerak. Men melody go paketi asosida eng oddiyini qildim:

Server kodi

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

Mijozda (oqim tomoni) avval kameraga kirishingiz kerak. Bu orqali amalga oshiriladi MediaStream API.

Biz orqali kamera/mikrofonga kirish (ruxsat) olamiz Media Devices API. Ushbu API usulni taqdim etadi MediaDevices.getUserMedia(), bu qalqib chiquvchi oynani ko'rsatadi. foydalanuvchidan kamera va/yoki mikrofonga kirishga ruxsat so'ragan oyna. Shuni ta'kidlashni istardimki, men barcha tajribalarni Google Chrome-da o'tkazdim, ammo Firefox-da hamma narsa xuddi shunday ishlaydi deb o'ylayman.

Keyinchalik, getUserMedia() MediaStream ob'ektini - video-audio ma'lumotlar oqimini uzatadigan va'dani qaytaradi. Bu obyektni video elementning src xususiyatiga belgilaymiz. Kod:

Eshittirish tomoni

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

Video oqimini rozetkalar orqali translyatsiya qilish uchun siz uni biron bir joyda kodlashingiz, buferlashingiz va qismlarga bo'lishingiz kerak. Xom video oqimini veb-rozetkalar orqali uzatib bo'lmaydi. Bu bizning yordamimizga keladi MediaRecorder API. Ushbu API sizga oqimni kodlash va qismlarga ajratish imkonini beradi. Men tarmoq orqali kamroq bayt yuborish uchun video oqimini siqish uchun kodlashni qilaman. Uni bo'laklarga bo'lib, har bir bo'lakni veb-rozetkaga yuborishingiz mumkin. Kod:

Biz video oqimini kodlaymiz, uni qismlarga ajratamiz

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

Endi veb-rozetkalar orqali uzatishni qo'shamiz. Ajablanarlisi shundaki, buning uchun sizga faqat ob'ekt kerak bo'ladi WebSockets. Unda faqat ikkita yuborish va yopish usuli mavjud. Ismlar o'zlari uchun gapiradi. Qo'shilgan kod:

Biz video oqimini serverga uzatamiz

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

Efir tomoni tayyor! Keling, video oqimini qabul qilishga va uni mijozga ko'rsatishga harakat qilaylik. Buning uchun bizga nima kerak? Birinchidan, albatta, rozetkaga ulanish. Biz WebSocket ob'ektiga "tinglovchi" biriktiramiz va "xabar" hodisasiga obuna bo'lamiz. Ikkilik ma'lumotlarning bir qismini olgandan so'ng, bizning serverimiz uni abonentlarga, ya'ni mijozlarga uzatadi. Bunday holda, mijozda "xabar" hodisasining "tinglovchisi" bilan bog'liq qayta qo'ng'iroq funktsiyasi ishga tushadi; ob'ektning o'zi funksiya argumentiga o'tkaziladi - vp8 tomonidan kodlangan video oqimining bir qismi.

Biz video oqimini qabul qilamiz

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

Men uzoq vaqt davomida nima uchun olingan qismlarni darhol ijro etish uchun video elementga yuborishning iloji yo'qligini tushunishga harakat qildim, ammo buni amalga oshirish mumkin emasligi ma'lum bo'ldi, albatta, siz avval parchani bog'langan maxsus buferga qo'yishingiz kerak. video elementi va shundan keyingina u video oqimini o'ynata boshlaydi. Buning uchun sizga kerak bo'ladi MediaSource API и FileReader API.

MediaSource media tinglash ob'ekti va ushbu media oqimining manbai o'rtasida vositachi sifatida ishlaydi. MediaSource ob'ekti video/audio oqimining manbai uchun ulanadigan buferni o'z ichiga oladi. Xususiyatlardan biri shundaki, bufer faqat Uint8 ma'lumotlarini saqlashi mumkin, shuning uchun bunday buferni yaratish uchun sizga FileReader kerak bo'ladi. Kodga qarang va u aniqroq bo'ladi:

Video oqimi ijro etilmoqda

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

Striming xizmatining prototipi tayyor. Asosiy kamchilik shundaki, videoni ijro etish uzatuvchi tomondan 100 milodiy ortda qoladi; biz buni serverga uzatishdan oldin video oqimini bo'lishda o'zimiz belgilaymiz. Bundan tashqari, men noutbukimni tekshirganimda, uzatuvchi va qabul qiluvchi tomonlar o'rtasidagi kechikish asta-sekin to'planib bordi, bu aniq ko'rindi. Men bu kamchilikni bartaraf etish yo'llarini qidira boshladim va ... duch keldim RTCPeerConnection API, bu oqimni qismlarga bo'lish kabi hiyla-nayranglarsiz video oqimini uzatish imkonini beradi. To'plangan kechikish, menimcha, brauzer uzatishdan oldin har bir qismni webm formatiga qayta kodlashi bilan bog'liq. Men boshqa qazimadim, lekin WebRTC ni o‘rganishni boshladim. O‘ylaymanki, tadqiqotim natijalari haqida hamjamiyat uchun qiziqarli bo‘lsa, alohida maqola yozaman.

Manba: www.habr.com

Brauzerdan (deyarli) foydasiz veb-kamera oqimi. Media Stream va Websockets

a Izoh qo'shish Bu savolga javob bekor