Começar a usar streams remotos

Quando um RTCPeerConnection está conectado a um peer remoto, é possível transmitir áudio e vídeo entre eles. Esse é o ponto em que conectamos o stream recebido de getUserMedia() ao RTCPeerConnection. Um fluxo de mídia consiste em pelo menos uma faixa de mídia, e elas são adicionadas individualmente ao RTCPeerConnection quando queremos transmitir a mídia para o peer remoto.

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

As faixas podem ser adicionadas a um RTCPeerConnection antes que ele se conecte a um peer remoto. Portanto, é recomendável realizar essa configuração o mais cedo possível em vez de esperar a conexão ser concluída.

Como adicionar faixas remotas

Para receber as faixas remotas adicionadas pelo outro peer, registramos um listener no RTCPeerConnection local que ouve o evento track. O RTCTrackEvent contém uma matriz de objetos MediaStream que têm os mesmos valores MediaStream.id dos fluxos locais correspondentes do peer. No nosso exemplo, cada faixa está associada apenas a um stream.

Os IDs MediaStream correspondem em ambos os lados da conexão ponto a ponto, mas isso geralmente não acontece com os IDs MediaStreamTrack.

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

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