Guida introduttiva agli stream remoti

Una volta che un RTCPeerConnection è connesso a un peer remoto, è possibile riprodurre in streaming audio e video tra di loro. È qui che colleghiamo stream che riceviamo da getUserMedia() a RTCPeerConnection. Un elemento multimediale lo stream è composto da almeno una traccia multimediale, che vengono aggiunti singolarmente a RTCPeerConnection quando vogliamo trasmettere i contenuti multimediali al telecomando peer.

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 RTCPeerConnection prima che si connetta a un telecomando di configurare il peer, quindi è opportuno eseguire questa configurazione il prima possibile anziché in attesa del completamento della connessione.

Aggiunta di tracce remote

Per ricevere i percorsi remoti aggiunti dall'altro peer, registriamo un listener sull'istanza locale RTCPeerConnection in ascolto dell'evento track. La RTCTrackEvent contiene un array di MediaStream oggetti che hanno gli stessi MediaStream.id come stream locali corrispondenti del peer. Nel nostro Ad esempio, ogni traccia è associata a un solo stream.

Tieni presente che, anche se gli ID MediaStream corrispondono su entrambi i lati della connessione peer, Lo stesso non vale in genere per gli ID MediaStreamTrack.

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

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