Clever Geek Handbook

（几乎）无用的网络摄像头从浏览器流式传输。第2部分。WebRTC

在一篇古老而已被废弃的文章中，我写了一篇关于通过websockets从画布上广播视频是多么容易和轻松的事情。在那篇文章中，我简要讨论了如何使用MediaStream API捕获来自摄像机的视频和来自麦克风的声音，如何对接收到的流进行编码并将其通过websocket发送到服务器。但是，实际上，他们不是这样做的，对于广播，他们使用需要安装和配置的特殊软件：可以是Open Broadcast Software，也可以使用WebRTC（即开即用），也就是说，它不需要安装任何插件（例如Flash Player），已经从12月开始从Chromium浏览器中删除。

今天我们将讨论WebRTC。

Web实时通信（WebRTC）并不是一个协议，它是标准，协议和JavaScript API的完整集合，它们共同提供实时的对等视频-音频通信，还可以用于传输任何二进制数据... 通常，浏览器充当对等方，但是例如，它也可以是移动应用程序。为了组织客户端之间的p2p通信，浏览器需要支持各种类型的视频和音频编码，支持许多网络协议，以确保硬件与浏览器的交互（通过OS层）：网络摄像头，声卡。为了开发人员的方便，整个技术杂乱都隐藏在JavaScript API抽象的后面。

归结为三个API：

  • MediaStream API-我们上次对其进行了分析，今天我将详细介绍它。服务接收来自硬件的视频/音频流

  • RTCPeerConnection-提供两个客户端之间的通信（p2p）

  • RTCDataChannel-用于在两个客户端之间传输任意数据

准备音频和视频流以进行传输

"" . , : , , , . , -. , ( , ), . . 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