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;
});