Premiers pas avec les flux distants

Une fois qu'une connexion RTCPeerConnection est connectée à un pair distant, il est possible de diffuser du contenu audio et vidéo entre eux. Il s'agit du point où nous connectons le flux que nous recevons de getUserMedia() à RTCPeerConnection. Un flux multimédia se compose d'au moins une piste multimédia, qui sont ajoutées individuellement au RTCPeerConnection lorsque nous voulons 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);
});

Vous pouvez ajouter des pistes à un RTCPeerConnection avant qu'il ne se connecte à un pair distant. Il est donc préférable de procéder à cette configuration le plus tôt possible au lieu d'attendre la fin de la connexion.

Ajouter des pistes distantes

Pour recevoir les pistes distantes ajoutées par l'autre pair, nous ajoutons un écouteur sur l'écouteur local RTCPeerConnection qui écoute l'événement track. L'élément RTCTrackEvent contient un tableau d'objets MediaStream ayant 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 au pair, la même valeur ne s'applique généralement pas aux ID MediaStreamTrack.

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

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