Erste Schritte mit Remote-Streams

Sobald eine RTCPeerConnection-Verbindung mit einem Remote-Peer verbunden ist, können sie Audio und Video zwischen ihnen streamen. An diesem Punkt verbinden wir den Stream, den wir von getUserMedia() erhalten, mit dem RTCPeerConnection. Ein Medienstream besteht aus mindestens einem Medientrack. Diese werden einzeln zum RTCPeerConnection hinzugefügt, wenn wir die Medien an den Remote-Peer übertragen möchten.

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 sie mit einem Remote-Peer verbunden sind. Daher ist es sinnvoll, diese Einrichtung so früh wie möglich auszuführen, anstatt auf den Abschluss der Verbindung zu warten.

Remote-Tracks hinzufügen

Wenn wir die Remote-Tracks empfangen möchten, die vom anderen Peer hinzugefügt wurden, registrieren wir einen Listener für die lokale RTCPeerConnection, die das track-Ereignis überwacht. RTCTrackEvent enthält ein Array von MediaStream-Objekten, die dieselben MediaStream.id-Werte wie die entsprechenden lokalen Streams der Peers haben. In unserem Beispiel ist jeder Track nur mit einem einzelnen Stream verknüpft.

Beachten Sie, dass die MediaStream-IDs zwar auf beiden Seiten der Peer-Verbindung übereinstimmen, aber im Allgemeinen nicht bei MediaStreamTrack-IDs.

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

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