Начало работы с удаленными потоками

Как только RTCPeerConnection подключен к удаленному узлу, между ними можно передавать потоковое аудио и видео. Это момент, когда мы подключаем поток, полученный от getUserMedia() к RTCPeerConnection . Медиапоток состоит как минимум из одной медиадорожки, и они индивидуально добавляются в RTCPeerConnection , когда мы хотим передать мультимедиа удаленному узлу.

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

Треки можно добавлять в RTCPeerConnection до того, как оно подключится к удаленному узлу, поэтому имеет смысл выполнить эту настройку как можно раньше, а не ждать завершения соединения.

Добавление удаленных треков

Чтобы получать удаленные треки, добавленные другим узлом, мы регистрируем прослушиватель в локальном RTCPeerConnection прослушивающий событие track . RTCTrackEvent содержит массив объектов MediaStream , которые имеют те же значения MediaStream.id что и соответствующие локальные потоки однорангового узла. В нашем примере каждая дорожка связана только с одним потоком.

Обратите внимание: хотя идентификаторы MediaStream совпадают на обеих сторонах однорангового соединения, это обычно не относится к идентификаторам MediaStreamTrack .

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

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

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

Треки можно добавить в RTCPeerConnection до того, как оно подключится к удаленному узлу, поэтому имеет смысл выполнить эту настройку как можно раньше, вместо того, чтобы ждать завершения соединения.

Добавление удаленных треков

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

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