Clever Geek Handbook

(Presque) webcam inutile en streaming depuis le navigateur. Partie 2. WebRTC

Une fois dans l' un des articles anciens et déjà abandonnés, j'ai écrit à quel point il est facile et sans effort de diffuser des vidéos à partir de canevas via des websockets. Dans cet article, j'ai superficiellement expliqué comment capturer la vidéo d'une caméra et le son d'un microphone à l'aide de l' API MediaStream , comment encoder le flux reçu et l'envoyer via des Websockets au serveur. Cependant, en réalité, ils ne le font pas, pour les diffusions, ils utilisent soit un logiciel spécial qui doit être installé et configuré: il peut s'agir de Open Broadcast Software , soit ils utilisent WebRTC, qui fonctionne dès la sortie de la boîte, c'est-à-dire qu'il ne nécessite pas l'installation de plugins comme un lecteur flash, qui déjà en décembre sera coupé du navigateur Chromium.

Aujourd'hui, nous allons parler de WebRTC.

La communication Web en temps réel (WebRTC) n'est pas un protocole, c'est toute une collection de normes, de protocoles et d'API JavaScript qui, ensemble, fournissent une communication vidéo-audio peer-to-peer en temps réel, et peuvent également être utilisées pour transférer des données binaires. ... Habituellement, les navigateurs sont des pairs, mais il peut s'agir d'une application mobile, par exemple. Afin d'organiser la communication p2p entre les clients, le navigateur doit prendre en charge différents types d'encodage vidéo et audio, prendre en charge de nombreux protocoles réseau, assurer l'interaction du matériel avec le navigateur (à travers les couches du système d'exploitation): webcams, cartes son. Tout ce fouillis de technologies est caché derrière une abstraction d'API JavaScript pour la commodité du développeur.

Tout se résume à trois API:

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

Figure: 1. Couches de traitement audio et vidéo dans le navigateur
. 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