🥇(Hampir) penstriman webcam yang tidak berguna daripada penyemak imbas. Strim Media dan Soket Web

Dalam artikel ini saya ingin berkongsi percubaan saya untuk menstrim video melalui soket web tanpa menggunakan pemalam penyemak imbas pihak ketiga seperti Adobe Flash Player. Baca terus untuk mengetahui apa yang datang daripadanya.

Adobe Flash, dahulunya Macromedia Flash, ialah platform untuk mencipta aplikasi yang dijalankan dalam pelayar web. Sebelum pengenalan API Media Stream, ia boleh dikatakan satu-satunya platform untuk menstrim video dan suara daripada kamera web, serta untuk mencipta pelbagai jenis persidangan dan sembang dalam penyemak imbas. Protokol untuk menghantar maklumat media RTMP (Protokol Mesej Masa Nyata) sebenarnya telah ditutup untuk masa yang lama, yang bermaksud: jika anda ingin meningkatkan perkhidmatan penstriman anda, berbaik hati menggunakan perisian daripada Adobe sendiri - Adobe Media Server (AMS).

Selepas beberapa lama pada tahun 2012, Adobe "berputus asa dan meludahkannya" kepada orang ramai. spesifikasi Protokol RTMP, yang mengandungi ralat dan pada dasarnya tidak lengkap. Pada masa itu, pembangun mula membuat pelaksanaan protokol ini sendiri, dan pelayan Wowza muncul. Pada tahun 2011, Adobe memfailkan tuntutan mahkamah terhadap Wowza kerana penggunaan haram paten berkaitan RTMP; selepas 4 tahun, konflik itu diselesaikan secara baik.

Platform Adobe Flash berusia lebih daripada 20 tahun, pada masa itu banyak kelemahan kritikal telah ditemui, sokongan dijanjikan berakhir menjelang 2020, meninggalkan beberapa alternatif untuk perkhidmatan penstriman.

Untuk projek saya, saya segera memutuskan untuk meninggalkan sepenuhnya penggunaan Flash dalam penyemak imbas. Saya menyatakan sebab utama di atas; Flash juga tidak disokong sama sekali pada platform mudah alih, dan saya benar-benar tidak mahu menggunakan Adobe Flash untuk pembangunan pada Windows (emulator wain). Jadi saya mula menulis klien dalam JavaScript. Ini hanyalah prototaip, memandangkan kemudian saya mengetahui bahawa penstriman boleh dilakukan dengan lebih cekap berdasarkan p2p, hanya bagi saya ia akan menjadi peer - server - peer, tetapi lebih banyak mengenai itu pada lain masa, kerana ia belum siap lagi.

Untuk bermula, kami memerlukan pelayan websockets sebenar. Saya membuat yang paling mudah berdasarkan pakej melodi go:

Kod pelayan

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

Pada klien (sebelah penstriman), anda perlu mengakses kamera terlebih dahulu. Ini dilakukan melalui API MediaStream.

Kami mendapat akses (kebenaran) kepada kamera/mikrofon melalui API Peranti Media. API ini menyediakan kaedah MediaDevices.getUserMedia(), yang menunjukkan pop timbul. tetingkap yang meminta kebenaran pengguna untuk mengakses kamera dan/atau mikrofon. Saya ingin ambil perhatian bahawa saya telah menjalankan semua eksperimen dalam Google Chrome, tetapi saya fikir semuanya akan berfungsi dalam Firefox.

Seterusnya, getUserMedia() mengembalikan Promise, yang mana ia menghantar objek MediaStream - aliran data audio-video. Kami menetapkan objek ini kepada sifat src elemen video. Kod:

Bahagian 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 strim video melalui soket, anda perlu mengekodnya di suatu tempat, menampannya dan menghantarnya dalam bahagian. Strim video mentah tidak boleh dihantar melalui soket web. Di sinilah ia datang untuk membantu kami API MediaRecorder. API ini membolehkan anda mengekod dan memecahkan strim menjadi kepingan. Saya melakukan pengekodan untuk memampatkan strim video untuk menghantar lebih sedikit bait melalui rangkaian. Setelah memecahkannya menjadi kepingan, anda boleh menghantar setiap bahagian ke soket web. Kod:

Kami mengekod aliran video, memecahkannya menjadi kepingan

<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 tambah penghantaran melalui soket web. Yang menghairankan, semua yang anda perlukan untuk ini adalah objek WebSocket. Ia hanya mempunyai dua kaedah hantar dan tutup. Nama-nama bercakap untuk diri mereka sendiri. Kod ditambah:

Kami menghantar aliran video ke pelayan

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

Bahagian penyiaran sudah sedia! Sekarang mari cuba menerima aliran video dan memaparkannya pada klien. Apa yang kita perlukan untuk ini? Pertama, sudah tentu, sambungan soket. Kami melampirkan "pendengar" pada objek WebSocket dan melanggan acara 'mesej'. Setelah menerima sekeping data binari, pelayan kami menyiarkannya kepada pelanggan, iaitu pelanggan. Dalam kes ini, fungsi panggil balik yang dikaitkan dengan "pendengar" acara 'mesej' dicetuskan pada klien; objek itu sendiri dihantar ke argumen fungsi - sekeping strim video yang dikodkan oleh vp8.

Kami menerima 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'), 
         arrayOfBlobs = [];

         socket.addEventListener('message', function (event) {
                // "кладем" полученный кусочек в массив 
                arrayOfBlobs.push(event.data);
                // здесь будем читать кусочки
                readChunk();
            });
</script>

Untuk masa yang lama saya cuba memahami mengapa mustahil untuk segera menghantar kepingan yang diterima ke elemen video untuk main semula, tetapi ternyata ini tidak boleh dilakukan, sudah tentu, anda mesti meletakkan bahagian itu dalam penimbal khas yang terikat pada elemen video, dan hanya selepas itu ia akan mula memainkan strim video. Untuk ini anda perlukan API MediaSource и API FileReader.

MediaSource bertindak sebagai sejenis perantara antara objek main balik media dan sumber aliran media ini. Objek MediaSource mengandungi penimbal boleh pasang untuk sumber strim video/audio. Satu ciri ialah penimbal hanya boleh menyimpan data Uint8, jadi anda memerlukan FileReader untuk mencipta penimbal sedemikian. Lihat kod dan ia akan menjadi lebih jelas:

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

Prototaip perkhidmatan penstriman sudah sedia. Kelemahan utama ialah main balik video akan ketinggalan di belakang bahagian pemancar sebanyak 100 ms; kami menetapkan ini sendiri apabila membelah aliran video sebelum menghantarnya ke pelayan. Lebih-lebih lagi, apabila saya menyemak pada komputer riba saya, selang antara sisi pemancar dan penerima secara beransur-ansur terkumpul, ini jelas kelihatan. Saya mula mencari cara untuk mengatasi kelemahan ini, dan... terjumpa API RTCPeerConnection, yang membolehkan anda menghantar strim video tanpa helah seperti membelah strim menjadi kepingan. Kelewatan terkumpul, saya fikir, adalah disebabkan oleh fakta bahawa penyemak imbas mengekod semula setiap bahagian ke dalam format webm sebelum penghantaran. Saya tidak menggali lebih lanjut, tetapi mula mempelajari WebRTC. Saya fikir saya akan menulis artikel berasingan tentang hasil penyelidikan saya jika saya mendapati ia menarik kepada masyarakat.

Sumber: www.habr.com

(Hampir) streaming webcam yang tidak berguna dari penyemak imbas. Aliran Media dan Soket Web

Tambah komen Batal reply