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

Как только 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;
});