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