Peer-Verbindungen

Die RTCPeerConnection ist die zentrale Schnittstelle in der WebRTC API. Sie stellt die Verbindung zwischen dem lokalen und dem Remote-Peer dar und bietet alle Funktionen und Ereignisse, die zum Herstellen der Verbindung erforderlich sind.

Peer-Verbindung herstellen

Anwendungen, die WebRTC-Funktionen implementieren, sind in der Regel stark von der RTCPeerConnection-Schnittstelle abhängig. Auf der Seite des Anrufers (d. h. des Peers, der eine Verbindung initiiert) läuft das Herstellen einer Verbindung in der Regel so ab:

  1. Erstellen Sie eine neue RTCPeerConnection-Instanz mit der entsprechenden ICE-Konfiguration.
  2. Erstellen Sie mit RTCPeerConnection.createOffer() eine lokale SDP-Beschreibung.
  3. Legen Sie die lokale SDP-Beschreibung mit RTCPeerConnection.setLocalDescription() fest.
  4. Übertragen Sie die lokale SDP-Beschreibung (über einen Signalisierungsdienst) an den Remote-Peer.
  5. Registriert einen Listener für icecandidate-Ereignisse auf dem RTCPeerConnection.
  6. Übertragen Sie jedes icecandidate-Ereignis (über einen Signalisierungsdienst) an den Remote-Peer.
  7. Warten Sie auf eine eingehende Remote-SDP-Beschreibung vom Signalisierungsdienst und legen Sie sie mit RTCPeerConnection.setRemoteDescription() fest.
  8. Warten Sie auf eingehende Remote-ICE-Kandidaten vom Signalisierungsdienst und fügen Sie sie mit RTCPeerConnection.addIceCandidate() hinzu.

Auf der Seite des Angerufenen ist der Vorgang etwas anders.

  1. Erstellen Sie eine neue RTCPeerConnection-Instanz mit der entsprechenden ICE-Konfiguration.
  2. Warten Sie auf eine eingehende Remote-SDP-Beschreibung vom Signalisierungsdienst und legen Sie sie mit RTCPeerConnection.setRemoteDescription() fest.
  3. Erstellen Sie eine Antwort für die Remote-SDP-Beschreibung, indem Sie RTCPeerConnection.createAnswer() aufrufen.
  4. Übertrage die Antwort mithilfe eines Signalisierungsdienstes an den Remote-Peer.
  5. Registriert einen Listener für icecandidate-Ereignisse auf dem RTCPeerConnection.
  6. Übertragen Sie jedes icecandidate-Ereignis (über einen Signalisierungsdienst) an den Remote-Peer.
  7. Warten Sie auf eingehende Remote-ICE-Kandidaten vom Signalisierungsdienst und fügen Sie sie mit RTCPeerConnection.addIceCandidate() hinzu.

Die Herausforderung bei dieser API besteht darin, dass die meisten dieser Vorgänge asynchron sind, was die tatsächliche Implementierung einer WebRTC-Anwendung oft kompliziert macht. Viele der Funktionen geben ein Promise zurück, das aufgelöst werden muss, bevor der nächste Schritt im Prozess fortgesetzt werden kann.

Bei der Implementierung einer Anwendung mit dieser API wird empfohlen, dass der Entwickler async und await verwendet, anstatt Listener zu registrieren (mit Promise.then()), da dies den Code übersichtlicher macht. Dazu ein Beispiel:

function createAndSendOffer(peerConnection, signallingService) {
    peerConnection.createOffer()
                  .then(offer => {
                      signallingService.send({
                          type: 'offer',
                          data: offer
                      });
                  });
}

Wenn wir den oben genannten Code mit async und await schreiben, erhalten wir Folgendes:

async function createAndSendOffer(peerConnection, signallingService) {
    const offer = await peerConnection.createOffer();
    signallingService.send({
        type: 'offer',
        data: offer
    });
}