Primeiros passos com as transmissões remotas

Quando uma RTCPeerConnection é conectada a um peer remoto, é possível transmitir áudio e vídeo entre eles. Este é o ponto em que conectamos o stream que recebemos de getUserMedia() ao RTCPeerConnection. Um stream de mídia consiste em pelo menos uma faixa de mídia, que é adicionada individualmente ao RTCPeerConnection quando queremos transmitir a mídia para o peering remoto.

const localStream = await getUserMedia({vide: 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 de se conectar a um peering remoto. Portanto, faz sentido configurar essa configuração o mais cedo possível em vez de esperar que a conexão seja concluída.

Adicionar faixas remotas

Para receber as faixas remotas adicionadas pelo outro par, registramos um listener na RTCPeerConnection local que detecta o evento track. O RTCTrackEvent contém uma matriz de objetos MediaStream que têm os mesmos valores de MediaStream.id que os streams locais correspondentes dos apps semelhantes. No nosso exemplo, cada faixa está associada apenas a um único stream.

Embora os IDs MediaStream correspondam nos dois lados da conexão de peering, o mesmo geralmente não acontece com IDs MediaStreamTrack.

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

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