Clever Geek Handbook

(Hampir) streaming webcam tidak berguna dari browser. Bagian 2. WebRTC

Sekali di salah satu artikel lama dan sudah ditinggalkan, saya menulis tentang betapa mudah dan alami Anda dapat menyiarkan video dari kanvas melalui websockets. Dalam artikel itu, saya secara dangkal berbicara tentang cara menangkap video dari kamera dan suara dari mikrofon menggunakan MediaStream API , cara menyandikan aliran yang diterima dan mengirimkannya melalui soket web ke server. Namun, pada kenyataannya, mereka tidak melakukan ini, untuk siaran mereka menggunakan perangkat lunak khusus yang perlu diinstal dan dikonfigurasi: sekilas dapat berupa Perangkat Lunak Siaran Terbuka , atau mereka menggunakan WebRTC, yang berfungsi langsung di luar kotak, yaitu, tidak memerlukan pemasangan plugin apa pun seperti pemutar flash, yang sudah pada bulan Desember akan dipotong dari browser Chromium.

Hari ini kita akan membicarakan tentang WebRTC.

Web Real-Time Communication (WebRTC) bukanlah satu protokol, ini adalah kumpulan keseluruhan dari standar, protokol, dan JavaScript API yang bersama-sama menyediakan komunikasi video-audio peer-to-peer secara real time, dan juga dapat digunakan untuk mentransfer data biner apa pun. ... Biasanya browser bertindak sebagai rekan, tetapi bisa juga menjadi aplikasi seluler, misalnya. Untuk mengatur komunikasi p2p antar klien, browser membutuhkan dukungan untuk berbagai jenis encoding video dan audio, dukungan untuk banyak protokol jaringan, memastikan interaksi perangkat keras dengan browser (melalui lapisan OS): webcam, kartu suara. Seluruh teknologi yang campur aduk ini tersembunyi di balik abstraksi JavaScript API untuk kenyamanan pengembang.

Semuanya bermuara pada tiga API:

"" . , : , , , . , -. , ( , ), . . 1:

Angka: 1. Lapisan pemrosesan audio dan video di browser
. 1.

, . . 2020 . , MediaStream API, . IE .

: , , , "" Media Stream <video> html. canvas , WebGL CSS3, , canvas , ( bigo live, twitch ). , , :

https://jeeliz.com/ - realtime CV Javascript. js- canvas: , , (, ) . , .

Canvas captureStream API - API canvas. Chrome, Opera Firefox

RTCPeerConnection

, ? RTCPeerConnection. , RTCPeerConnection:

const peerConnection = new RTCPeerConnection({
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
});

iceServers - , , NAT'. : ip , NAT ? ICE , , ICE WebRTC, .

Usermedia :

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
  // Usermedia-,      
  const tracks = stream.getTracks();

   for (const track of tracks) {
     //     peerConnection
     peerConnection.addTrack(track);
   }
}).catch(console.error);

peerConnection onnegotiationneeded, offer ( SDP - Session Description Protocol) peerConnection setLocalDescription. SDP - offer answer - .

LocalDescription peerConnection, "" ice-, NAT. onicegatheringstatechange. onicegatheringstatechange webrtc-signaling- stream Session Description :

peerConnection.oniceconnectionstatechange = (event) => {
      console.log('Connection state: ', peerConnection.iceConnectionState);

      if (peerConnection.iceConnectionState === 'connected') {
        //    Start broadcast
        setBroadcasting(true);
        setBroadcastingBtnActive(true);
      }
    };

//   ,      peerConnection
peerConnection.onnegotiationneeded = (event) => {
      //    SDP offer
      peerConnection.createOffer().
        then((offer) => peerConnection.setLocalDescription(offer)).
        catch(console.error);
    };

//    ,   ICE 
peerConnection.onicegatheringstatechange = (ev) => {
      let connection = ev.target;

      // Now we can activate broadcast button
      if (connection.iceGatheringState === 'complete') {
        let delay = 50;
        let tries = 0;
        let maxTries = 3;

        let timerId = setTimeout(function allowStreaming() {
          if (isOnline) {
            setBroadcastingBtnActive(true);
            return;
          }

          if (tries < maxTries) {
            tries += 1;
            delay *= 2;
            timerId = setTimeout(allowStreaming, delay);
          } else {
            // TODO: show user notification
            console.error("Can't connect to server");

            alert("Can't connect to server");
          }
        }, delay);
      }
    };

webrtc-signaling- - , session description , websocket xhr- . : session description .

Session descriptions , , ontrack peerConnection, , <video> . .

:

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection - RTCPeerConnection

https://github.com/pion/webrtc - WebRTC go

https://webrtcforthecurious.com/ - pion

https://hpbn.co/ - High Perfomance Browser Networking. web-. WebRTC. (2013), .

pion, HLS ffmpeg .

: react pion twitch ( ).



More articles:


All Articles