Premiers pas avec les flux distants

Une fois qu'un RTCPeerConnection est connecté à un pair distant, il est possible de diffuser de l'audio et de la vidéo entre eux. C'est là que nous connectons le flux que nous recevons de getUserMedia() à RTCPeerConnection. Un flux multimédia se compose d'au moins une piste multimédia, qui est ajoutée individuellement à RTCPeerConnection lorsque nous souhaitons transmettre le contenu multimédia au pair distant.

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

Les pistes peuvent être ajoutées à un RTCPeerConnection avant qu'il ne se soit connecté à un pair distant. Il est donc logique d'effectuer cette configuration le plus tôt possible au lieu d'attendre que la connexion soit établie.

Ajouter des canaux distants

Pour recevoir les pistes distantes ajoutées par l'autre paire, nous enregistrons un écouteur sur le RTCPeerConnection local qui écoute l'événement track. RTCTrackEvent contient un tableau d'objets MediaStream qui ont les mêmes valeurs MediaStream.id que les flux locaux correspondants du pair. Dans notre exemple, chaque piste n'est associée qu'à un seul flux.

Notez que si les ID MediaStream correspondent des deux côtés de la connexion peer-to-peer, ce n'est généralement pas le cas pour les ID MediaStreamTrack.

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

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