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;
});