Erste Schritte mit Remote-Streams

Sobald ein RTCPeerConnection mit einem Remote-Peer verbunden ist, kann Audio und Video zwischen ihnen streamen. An dieser Stelle verbinden wir Stream, den wir von getUserMedia() an RTCPeerConnection empfangen. Ein Medium Der Stream besteht aus mindestens einem Media-Track. Diese werden einzeln hinzugefügt an RTCPeerConnection, wenn die Medien an die Fernbedienung übertragen werden sollen Peer.

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

Tracks können zu einem RTCPeerConnection hinzugefügt werden, bevor es mit einer Fernbedienung verbunden ist Daher ist es sinnvoll, diese Einrichtung so früh wie möglich durchzuführen, Warten auf den Verbindungsaufbau.

Remote-Tracks hinzufügen

Um die Remote-Tracks zu empfangen, die von dem anderen Peer hinzugefügt wurden, registrieren wir ein Listener auf dem lokalen RTCPeerConnection, der auf das track-Ereignis wartet. Die RTCTrackEvent enthält ein Array mit MediaStream-Objekten, die denselben MediaStream.id-Werte als entsprechende lokale Streams des Peers. In unserem Beispiel: Jeder Titel ist nur mit einem einzigen Stream verknüpft.

Auch wenn MediaStream-IDs auf beiden Seiten der Peer-Verbindung übereinstimmen, gilt dies im Allgemeinen nicht für MediaStreamTrack-IDs.

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

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