Guida introduttiva agli stream remoti

Una volta che un RTCPeerConnection è connesso a un peer remoto, è possibile trasmettere in streaming audio e video tra i due. È a questo punto che colleghiamo lo stream che riceviamo da getUserMedia() a RTCPeerConnection. Uno stream media è costituito da almeno una traccia media e queste vengono aggiunte singolarmente al RTCPeerConnection quando vogliamo trasmettere i contenuti multimediali al peer remoto.

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

I canali possono essere aggiunti a un RTCPeerConnection prima che si connetta a un peer remoto, quindi è consigliabile eseguire questa configurazione il prima possibile anziché attendere il completamento della connessione.

Aggiunta di tracce remote

Per ricevere le tracce remote aggiunte dall'altro peer, registriamo un listener su RTCPeerConnection locale in ascolto per l'evento track. RTCTrackEvent contiene un array di oggetti MediaStream che hanno gli stessi valori MediaStream.id degli stream locali corrispondenti del peer. Nel nostro esempio, ogni traccia è associata a un solo stream.

Tieni presente che, sebbene gli ID MediaStream corrispondano su entrambi i lati della connessione peer, in genere non è così per gli ID MediaStreamTrack.

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

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