Primeiros passos com streams remotos

Uma vez que um RTCPeerConnection é conectado a um peer remoto, é possível transmitir áudio e vídeo entre eles. Este é o ponto onde conectamos o fluxo que recebemos de getUserMedia() ao RTCPeerConnection . Um fluxo de mídia consiste em pelo menos uma trilha de mídia, e essas são adicionadas individualmente ao RTCPeerConnection quando queremos transmitir a mídia para o par remoto.

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

As trilhas podem ser adicionadas a um RTCPeerConnection antes que ele seja conectado a um par remoto, portanto, faz sentido realizar essa configuração o mais cedo possível, em vez de esperar que a conexão seja concluída.

Adicionando trilhas remotas

Para receber as trilhas remotas que foram adicionadas pelo outro par, registramos um ouvinte no RTCPeerConnection local ouvindo o evento de track . Como a reprodução é feita em um objeto MediaStream , primeiro criamos uma instância vazia que então populamos com as trilhas do par remoto à medida que as recebemos.

const remoteStream = MediaStream();
const remoteVideo = document.querySelector('#remoteVideo');
remoteVideo.srcObject = remoteStream;

peerConnection.addEventListener('track', async (event) => {
    remoteStream.addTrack(event.track, remoteStream);
});