Clever Geek Handbook

Streaming de webcam (quase) inútil do navegador. Parte 2. WebRTC

Uma vez em um dos artigos antigos e já abandonados, eu escrevi sobre como é fácil e sem esforço transmitir vídeo do canvas por meio de websockets. Nesse artigo, falei brevemente sobre como capturar vídeo de uma câmera e som de um microfone usando a API MediaStream , como codificar o fluxo recebido e enviá-lo por meio de websockets para o servidor. No entanto, na realidade, eles não fazem isso, para as transmissões eles usam um software especial que precisa ser instalado e configurado: à primeira vista pode ser Open Broadcast Software , ou eles usam WebRTC, que funciona direto da caixa, ou seja, não requer a instalação de nenhum plug-in como um flash player, que já em dezembro será cortado do navegador Chromium.

Hoje vamos falar sobre WebRTC.

Web Real-Time Communication (WebRTC) não é um protocolo, é uma coleção completa de padrões, protocolos e APIs JavaScript, que juntos fornecem comunicação de áudio e vídeo ponto a ponto em tempo real e também podem ser usados ​​para transferir quaisquer dados binários ... Normalmente os navegadores atuam como pares, mas também podem ser um aplicativo móvel, por exemplo. Para organizar a comunicação p2p entre os clientes, o navegador precisa de suporte para vários tipos de codificação de vídeo e áudio, suporte para diversos protocolos de rede, garantindo a interação do hardware com o navegador (através de camadas de SO): webcams, placas de som. Todo esse amontoado de tecnologias está escondido atrás de uma abstração da API JavaScript para a conveniência do desenvolvedor.

Tudo se resume a três APIs:

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

Figura: 1. Camadas de processamento de áudio e vídeo no navegador
. 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