Erste Schritte mit Remote-Streams

Sobald ein RTCPeerConnection mit einem Remote-Peer verbunden ist, können Audio- und Videoinhalte zwischen ihnen gestreamt werden. An dieser Stelle verbinden wir den von getUserMedia() empfangenen Stream mit dem RTCPeerConnection. Ein Medienstream besteht aus mindestens einem Medientrack. Diese werden der RTCPeerConnection einzeln hinzugefügt, wenn die Medien an den Remote-Peer übertragen werden sollen.

const localStream = await getUserMedia({video: true, audio: true});
const peerConnection = new RTCPeerConnection(iceConfig);
localStream.getTracks().forEach(track => {
    peerConnection.addTrack(track, localStream);
});

Tracks können einem RTCPeerConnection hinzugefügt werden, bevor eine Verbindung zu einem Remote-Peer hergestellt wurde. Daher ist es sinnvoll, diese Einrichtung so früh wie möglich vorzunehmen, anstatt auf die Fertigstellung der Verbindung zu warten.

Remote-Tracks hinzufügen

Um die Remote-Tracks zu empfangen, die vom anderen Peer hinzugefügt wurden, registrieren wir einen Listener auf dem lokalen RTCPeerConnection, der auf das track-Ereignis wartet. RTCTrackEvent enthält ein Array von MediaStream-Objekten mit denselben MediaStream.id-Werten wie die entsprechenden lokalen Streams des Peers. In unserem Beispiel ist jeder Track nur einem einzelnen Stream zugeordnet.

Beachten Sie, dass MediaStream-IDs zwar auf beiden Seiten der Peer-Verbindung übereinstimmen, dies jedoch in der Regel nicht für MediaStreamTrack-IDs gilt.

const remoteVideo = document.querySelector('#remoteVideo');

peerConnection.addEventListener('track', async (event) => {
    const [remoteStream] = event.streams;
    remoteVideo.srcObject = remoteStream;
});