Die RTCPeerConnection
ist die zentrale Schnittstelle in der WebRTC API. Sie stellt die Verbindung zwischen dem lokalen und dem Remote-Peer dar und gibt alle Funktionen und Ereignisse weiter, die zum Herstellen der Verbindung erforderlich sind.
Peer-Verbindung herstellen
Anwendungen, die WebRTC-Funktionen implementieren, benötigen in der Regel stark die RTCPeerConnection
-Schnittstelle. Auf der Anruferseite, d. h. der Peer, der eine Verbindung initiiert, beginnt der Prozess zum Herstellen einer Verbindung in der Regel so:
- Erstellen Sie eine neue
RTCPeerConnection
-Instanz mit der entsprechenden ICE-Konfiguration. - Erstellen Sie mit
RTCPeerConnection.createOffer()
eine lokale SDP-Beschreibung. - Legen Sie die Beschreibung der lokalen SDP mit
RTCPeerConnection.setLocalDescription()
fest. - Übertragen Sie die lokale SDP-Beschreibung (über einen Signalisierungsdienst) an den Remote-Peer.
- Registriere einen Listener für
icecandidate
-Ereignisse inRTCPeerConnection
. - Übertragen Sie die Ereignisse mithilfe von Signalsignalen bei allen
icecandidate
-Ereignissen an den Remote-Peer. - Warten Sie auf eine eingehende Remote-SDP-Beschreibung aus dem Signaling-Dienst und legen Sie sie mit
RTCPeerConnection.setRemoteDescription()
fest. - Warten Sie auf eingehende Remote-ICE-Kandidaten aus dem Signalisierungsdienst und fügen Sie sie mit
RTCPeerConnection.addIceCandidate()
hinzu
Aufseiten des Aufrufers ist der Ablauf etwas anders.
- Erstellen Sie eine neue
RTCPeerConnection
-Instanz mit der entsprechenden ICE-Konfiguration. - Warten Sie auf eine eingehende Remote-SDP-Beschreibung aus dem Signaling-Dienst und legen Sie sie mit
RTCPeerConnection.setRemoteDescription()
fest. - Erstelle eine Antwort für die Remote-SDP-Beschreibung, indem du
RTCPeerConnection.createAnswer()
aufrufst. - Überlassen Sie die Antwort mit einem Signalisierungsdienst an den Remote-Peer.
- Registriere einen Listener für
icecandidate
-Ereignisse inRTCPeerConnection
. - Übertragen Sie die Ereignisse mithilfe von Signalsignalen bei allen
icecandidate
-Ereignissen an den Remote-Peer. - Warten Sie auf eingehende Remote-ICE-Kandidaten aus dem Signalisierungsdienst und fügen Sie sie mit
RTCPeerConnection.addIceCandidate()
hinzu
Die Verwendung einer API besteht darin, dass die meisten dieser Vorgänge asynchron sind. Das macht die eigentliche Implementierung einer WebRTC-Anwendung häufig kompliziert.
Viele der Funktionen geben eine Promise
zurück, die vor dem nächsten Schritt im Prozess aufgelöst werden muss.
Bei der Implementierung einer App über diese API sollte der Entwickler async
und await
verwenden, statt Listener (mit Promise.then()
) zu registrieren. Das vereinfacht deinen Code. Hier ein Beispiel:
function createAndSendOffer(peerConnection, signallingService) {
peerConnection.createOffer()
.then(offer => {
signallingService.send({
type: 'offer',
data: offer
});
});
}
Wenn Sie den Code oben mit async
und await
schreiben, erhalten wir Folgendes:
async function createAndSendOffer(peerConnection, signallingService) {
const offer = await peerConnection.createOffer();
signallingService.send({
type: 'offer',
data: offer
});
}