Clever Geek Handbook

(Fast) nutzloses Webcam-Streaming vom Browser. Teil 2. WebRTC

Einmal in einem der alten und bereits verlassenen Artikel schrieb ich darüber, wie einfach und natürlich Sie Videos von der Leinwand über Websockets senden können. In diesem Artikel habe ich kurz darüber gesprochen, wie man mit der MediaStream-API Video von einer Kamera und Ton von einem Mikrofon aufnimmt , wie man den empfangenen Stream codiert und über Websockets an den Server sendet. In der Realität tun sie dies jedoch nicht. Für Broadcasts verwenden sie entweder spezielle Software, die installiert und konfiguriert werden muss: Nebenbei kann es sich um Open Broadcast-Software handeln , oder sie verwenden WebRTC, das sofort einsatzbereit ist, dh es müssen keine Plugins wie ein Flash-Player installiert werden bereits im Dezember wird aus dem Chromium-Browser geschnitten.

Heute werden wir über WebRTC sprechen.

Web Real-Time Communication (WebRTC) ist kein einziges Protokoll, sondern eine ganze Sammlung von Standards, Protokollen und JavaScript-APIs, die zusammen Peer-to-Peer-Video-Audio-Kommunikation in Echtzeit ermöglichen und auch zur Übertragung beliebiger Binärdaten verwendet werden können ... Normalerweise fungieren Browser als Peers, es kann sich jedoch auch um eine mobile Anwendung handeln. Um die P2P-Kommunikation zwischen Clients zu organisieren, benötigt der Browser Unterstützung für verschiedene Arten der Video- und Audiokodierung sowie Unterstützung für viele Netzwerkprotokolle, um die Interaktion der Hardware mit dem Browser (über die Betriebssystemebenen) sicherzustellen: Webcams, Soundkarten. Dieses ganze Durcheinander von Technologien ist für den Entwickler hinter einer JavaScript-API-Abstraktion verborgen.

Es kommt alles auf drei APIs an:

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

Zahl: 1. Ebenen der Audio- und Videoverarbeitung im 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