Guida introduttiva agli stream remoti

Una volta che RTCPeerConnection è connesso a un peer remoto, è possibile trasmettere in streaming audio e video tra di loro. È qui che colleghiamo lo streaming che riceviamo da getUserMedia() a RTCPeerConnection. Uno stream multimediale è costituito da almeno una traccia multimediale che viene aggiunta singolarmente all'elemento RTCPeerConnection quando vogliamo trasmettere l'elemento multimediale al peer remoto.

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

È possibile aggiungere tracce a un RTCPeerConnection prima che si connetta a un peer remoto, quindi è consigliabile eseguire questa configurazione il prima possibile invece di dover aspettare il completamento della connessione.

Aggiunta di tracce remote

Per ricevere le tracce remote che sono state aggiunte dall'altro peer, registriamo un ascoltatore sull'evento locale RTCPeerConnection che ascolta l'evento track. RTCTrackEvent contiene un array di oggetti MediaStream che hanno gli stessi valori di MediaStream.id dei flussi di dati locali corrispondenti del peer. Nel nostro esempio, ogni traccia è associata solo a un singolo stream.

Tieni presente che, anche se gli ID MediaStream corrispondono su entrambi i lati della connessione peer, in genere la stessa condizione non è vera per gli ID MediaStreamTrack.

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

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