Once a RTCPeerConnection
is connected to a remote peer, it is possible to
stream audio and video between them. This is the point where we connect the
stream we receive from getUserMedia()
to the RTCPeerConnection
. A media
stream consists of at least one media track, and these are individually added
to the RTCPeerConnection
when we want to transmit the media to the remote
peer.
const localStream = await getUserMedia({vide: true, audio: true});
const peerConnection = new RTCPeerConnection(iceConfig);
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
Tracks can be added to a RTCPeerConnection
before it has connected to a remote
peer, so it makes sense to perform this setup as early as possible instead of
waiting for the connection to be completed.
Adding remote tracks
To receive the remote tracks that were added by the other peer, we register a
listener on the local RTCPeerConnection
listening for the track
event. Since
playback is done on a MediaStream
object, we first create an empty instance
that we then populate with the tracks from the remote peer as we receive them.
const remoteStream = MediaStream();
const remoteVideo = document.querySelector('#remoteVideo');
remoteVideo.srcObject = remoteStream;
peerConnection.addEventListener('track', async (event) => {
remoteStream.addTrack(event.track, remoteStream);
});