Cómo comenzar a usar las transmisiones remotas

Una vez que un RTCPeerConnection se conecta a un par remoto, es posible transmitir audio y video entre ellos. Este es el punto en el que conectamos la transmisión que recibimos de getUserMedia() a RTCPeerConnection. Una transmisión de contenido multimedia consiste en al menos una pista multimedia, y estas se agregan de forma individual a RTCPeerConnection cuando queremos transmitir el contenido multimedia al par remoto.

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

Se pueden agregar segmentos a un RTCPeerConnection antes de que se conecte a un par remoto, por lo que tiene sentido realizar esta configuración lo antes posible en lugar de esperar a que se complete la conexión.

Cómo agregar segmentos remotos

Para recibir las pistas remotas que agregó el otro par, registramos un objeto de escucha en el RTCPeerConnection local que escucha el evento track. RTCTrackEvent contiene un array de objetos MediaStream que tienen los mismos valores MediaStream.id que las transmisiones locales correspondientes del par. En nuestro ejemplo, cada pista solo se asocia con una sola transmisión.

Ten en cuenta que, si bien los IDs de MediaStream coinciden en ambos lados de la conexión entre pares, por lo general, no ocurre lo mismo con los IDs de MediaStreamTrack.

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

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