Clever Geek Handbook

（ほとんど）ブラウザからの役に立たないウェブサイトストリーミング。パート2。WebRTC

古くてすでに放棄された記事の1つに一度、Webソケットを介してキャンバスからビデオを簡単かつ自然にブロードキャストできることについて書きました。その記事では、MediaStream APIを使用してカメラからビデオをキャプチャし、マイクからサウンドをキャプチャする方法、受信したストリームをエンコードしてWebソケット経由でサーバーに送信する方法について簡単に説明しました。ただし、実際には、これは行いません。ブロードキャストの場合、インストールと構成が必要な特別なソフトウェアを使用します。一目でOpen Broadcast Softwareにするか、そのまま使用できるWebRTCを使用します。つまり、フラッシュプレーヤーなどのプラグインをインストールする必要はありません。すでに12月にChromiumブラウザからカットされます。

今日はWebRTCについてお話します。

Web Real-Time Communication（WebRTC）は、1つのプロトコルではなく、標準、プロトコル、およびJavaScript APIのコレクション全体であり、ピアツーピアのビデオオーディオ通信をリアルタイムで提供し、バイナリデータの転送にも使用できます。 ..。通常、ブラウザはピアとして機能しますが、たとえばモバイルアプリケーションの場合もあります。クライアント間のp2p通信を整理するために、ブラウザーには、さまざまなタイプのビデオおよびオーディオエンコーディングのサポート、多くのネットワークプロトコルのサポート、ハードウェアとブラウザーの相互作用（OSレイヤーを介した）（Webサイト、サウンドカード）が必要です。この雑然としたテクノロジーは、開発者の便宜のためにJavaScriptAPI抽象化の背後に隠されています。

それはすべて3つのAPIに帰着します：

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

図： 1.ブラウザでのオーディオおよびビデオ処理のレイヤー
. 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