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