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