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