Premiers pas avec les flux distants

Une fois qu'un RTCPeerConnection est connecté à un pair distant, il est possible de diffuser des flux audio et vidéo entre eux. C'est à ce moment que nous connectons flux que nous recevons de getUserMedia() vers le RTCPeerConnection. Un média le flux comporte au moins une piste multimédia, qui est ajoutée individuellement. au RTCPeerConnection lorsque nous voulons transmettre le contenu multimédia à la télécommande pairs.

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 parcours à un RTCPeerConnection avant qu'il ne soit connecté à une télécommande Il est donc judicieux d'effectuer cette configuration le plus tôt possible en attente de la finalisation de la connexion.

Ajouter des parcours à distance

Pour recevoir les pistes distantes ajoutées par l'autre pair, nous enregistrons un écouteur sur le RTCPeerConnection local qui écoute l'événement track. La RTCTrackEvent contient un tableau d'objets MediaStream ayant le même MediaStream.id en tant que flux locaux correspondants du pair. Dans notre Par 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, 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;
});