🥇(Hampir) streaming webcam tidak berguna dari browser. Aliran Media dan Websocket

Pada artikel ini saya ingin berbagi upaya saya untuk melakukan streaming video melalui websockets tanpa menggunakan plugin browser pihak ketiga seperti Adobe Flash Player. Baca terus untuk mengetahui apa hasilnya.

Adobe Flash, sebelumnya Macromedia Flash, adalah platform untuk membuat aplikasi yang dijalankan di browser web. Sebelum diperkenalkannya Media Stream API, ini merupakan satu-satunya platform untuk streaming video dan suara dari webcam, serta untuk membuat berbagai jenis konferensi dan obrolan di browser. Protokol transmisi informasi media RTMP (Real Time Messaging Protocol) sebenarnya sudah lama ditutup, artinya: jika Anda ingin meningkatkan layanan streaming Anda, berbaik hati menggunakan perangkat lunak dari Adobe sendiri - Adobe Media Server (AMS).

Setelah beberapa waktu di tahun 2012, Adobe “menyerah dan meludahkannya” ke publik. spesifikasi Protokol RTMP, yang mengandung kesalahan dan pada dasarnya tidak lengkap. Pada saat itu, pengembang mulai membuat implementasi protokol ini sendiri, dan server Wowza muncul. Pada tahun 2011, Adobe mengajukan gugatan terhadap Wowza atas penggunaan ilegal paten terkait RTMP; setelah 4 tahun, konflik tersebut diselesaikan secara damai.

Platform Adobe Flash berusia lebih dari 20 tahun, di mana banyak kerentanan kritis telah ditemukan, dukung berjanji akan berakhir pada tahun 2020, menyisakan sedikit alternatif untuk layanan streaming.

Untuk proyek saya, saya segera memutuskan untuk sepenuhnya meninggalkan penggunaan Flash di browser. Saya menunjukkan alasan utama di atas; Flash juga tidak didukung sama sekali pada platform seluler, dan saya benar-benar tidak ingin menggunakan Adobe Flash untuk pengembangan pada Windows (emulator anggur). Jadi saya mulai menulis klien dalam JavaScript. Ini hanya prototipe saja, karena nanti saya tahu kalau streaming bisa dilakukan jauh lebih efisien berdasarkan p2p, hanya saja bagi saya itu akan menjadi peer - server - peer, tetapi lebih dari itu lain kali, karena belum siap.

Untuk memulai, kita memerlukan server websockets yang sebenarnya. Saya membuat yang paling sederhana berdasarkan paket melodi go:

Kode server

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

Di klien (sisi streaming), Anda harus mengakses kamera terlebih dahulu. Ini dilakukan melalui API Aliran Media.

Kami mendapatkan akses (izin) ke kamera/mikrofon melalui API Perangkat Media. API ini menyediakan metode Perangkat Media.getUserMedia(), yang menampilkan popup. jendela yang meminta izin pengguna untuk mengakses kamera dan/atau mikrofon. Saya ingin mencatat bahwa saya melakukan semua eksperimen di Google Chrome, tetapi menurut saya semuanya akan bekerja dengan cara yang sama di Firefox.

Selanjutnya, getUserMedia() mengembalikan Promise, yang meneruskan objek MediaStream - aliran data video-audio. Kami menetapkan objek ini ke properti src dari elemen video. Kode:

Sisi penyiaran

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

Untuk menyiarkan aliran video melalui soket, Anda perlu menyandikannya di suatu tempat, melakukan buffering, dan mengirimkannya dalam beberapa bagian. Aliran video mentah tidak dapat ditransmisikan melalui soket web. Di sinilah bantuan kami API Perekam Media. API ini memungkinkan Anda menyandikan dan memecah aliran menjadi beberapa bagian. Saya melakukan pengkodean untuk mengompresi aliran video untuk mengirim lebih sedikit byte melalui jaringan. Setelah memecahnya menjadi beberapa bagian, Anda dapat mengirim setiap bagian ke soket web. Kode:

Kami menyandikan aliran video, memecahnya menjadi beberapa bagian

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

Sekarang mari tambahkan transmisi melalui websockets. Anehnya, yang Anda butuhkan untuk ini hanyalah sebuah objek WebSocket. Ia hanya memiliki dua metode kirim dan tutup. Nama-nama itu berbicara sendiri. Kode yang ditambahkan:

Kami mengirimkan aliran video ke 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>

Sisi siaran sudah siap! Sekarang mari kita coba menerima aliran video dan menampilkannya di klien. Apa yang kita butuhkan untuk ini? Pertama, tentu saja sambungan soket. Kami melampirkan "pendengar" ke objek WebSocket dan berlangganan acara 'pesan'. Setelah menerima sepotong data biner, server kami menyiarkannya ke pelanggan, yaitu klien. Dalam hal ini, fungsi panggilan balik yang terkait dengan "pendengar" peristiwa 'pesan' dipicu pada klien; objek itu sendiri diteruskan ke argumen fungsi - bagian dari aliran video yang dikodekan oleh vp8.

Kami menerima streaming 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>

Sudah lama saya mencoba memahami mengapa tidak mungkin untuk segera mengirim potongan yang diterima ke elemen video untuk diputar, tetapi ternyata hal ini tidak dapat dilakukan, tentu saja, Anda harus terlebih dahulu meletakkan potongan tersebut ke dalam buffer khusus yang terikat ke elemen video, dan baru setelah itu aliran video akan mulai diputar. Untuk ini, Anda perlu API Sumber Media и API Pembaca File.

MediaSource bertindak sebagai semacam perantara antara objek pemutaran media dan sumber aliran media ini. Objek MediaSource berisi buffer yang dapat dicolokkan untuk sumber aliran video/audio. Salah satu fiturnya adalah buffer hanya dapat menampung data Uint8, jadi Anda memerlukan FileReader untuk membuat buffer tersebut. Lihatlah kodenya dan itu akan menjadi lebih jelas:

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

Prototipe layanan streaming sudah siap. Kerugian utama adalah pemutaran video akan tertinggal 100 ms dari sisi transmisi; kami mengaturnya sendiri saat membagi aliran video sebelum mengirimkannya ke server. Apalagi saat saya cek di laptop saya, lag antara sisi pengirim dan penerima berangsur-angsur menumpuk, hal ini terlihat jelas. Saya mulai mencari cara untuk mengatasi kelemahan ini, dan... menemukan API RTCPeerConnection, yang memungkinkan Anda mengirimkan aliran video tanpa trik seperti membagi aliran menjadi beberapa bagian. Kelambatan yang terakumulasi, menurut saya, disebabkan oleh fakta bahwa browser mengkodekan ulang setiap bagian ke dalam format webm sebelum transmisi. Saya tidak menggali lebih jauh, tetapi mulai mempelajari WebRTC, saya rasa saya akan menulis artikel tersendiri tentang hasil penelitian saya jika menurut saya menarik bagi masyarakat.

Sumber: www.habr.com

(Hampir) streaming webcam yang tidak berguna dari browser. Aliran Media dan Websockets

Tambah komentar Membatalkan balasan