Clever Geek Handbook

(Casi) transmisión de cámara web inútil desde el navegador. Parte 2. WebRTC

Una vez en uno de los artículos antiguos y ya abandonados, escribí sobre lo fácil y sin esfuerzo que es transmitir video desde un lienzo a través de websockets. En ese artículo, hablé brevemente sobre cómo capturar video de una cámara y sonido de un micrófono usando la API MediaStream , cómo codificar la transmisión recibida y enviarla a través de websockets al servidor. Sin embargo, en realidad, no lo hacen, para las transmisiones usan un software especial que necesita ser instalado y configurado: de improviso puede ser Open Broadcast Software , o usan WebRTC, que funciona de inmediato, es decir, no requiere la instalación de ningún complemento como un reproductor flash, que ya en diciembre se eliminará del navegador Chromium.

Hoy hablaremos de WebRTC.

La comunicación web en tiempo real (WebRTC) no es un protocolo, es una colección completa de estándares, protocolos y API de JavaScript que, en conjunto, brindan comunicación de audio y video de igual a igual en tiempo real, y también se pueden usar para transferir cualquier dato binario. ... Por lo general, los navegadores actúan como pares, pero también puede ser una aplicación móvil, por ejemplo. Para organizar la comunicación p2p entre clientes, el navegador necesita soporte para varios tipos de codificación de video y audio, soporte para muchos protocolos de red, asegurando la interacción del hardware con el navegador (a través de capas de sistema operativo): cámaras web, tarjetas de sonido. Todo este revoltijo de tecnologías está oculto detrás de una abstracción API de JavaScript para la conveniencia del desarrollador.

Todo se reduce a tres API:

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

Figura: 1. Capas de procesamiento de audio y video en el 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