Pierwsze kroki ze zdalnymi transmisjami

Gdy RTCPeerConnection połączy się z urządzeniem zdalnym, będzie można przesyłać strumieniowo dźwięk i obraz między nimi. W tym miejscu łączymy strumień danych, który otrzymujemy z getUserMedia(), z RTCPeerConnection. Strumień multimediów składa się z co najmniej jednej ścieżki multimedialnej, które są dodawane do RTCPeerConnection pojedynczo, gdy chcemy przesłać multimedia do odległego peera.

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

Ścieżki można dodawać do RTCPeerConnection, zanim połączy się on z odległym peerem, więc warto przeprowadzić tę konfigurację jak najwcześniej, zamiast czekać na zakończenie procesu łączenia.

Dodawanie ścieżek zdalnych

Aby odbierać ścieżki zdalne dodane przez innego peera, rejestrujemy lokalnego słuchacza RTCPeerConnection, który będzie nasłuchiwać zdarzenia track. Obiekt RTCTrackEvent zawiera tablicę obiektów MediaStream, które mają te same wartości MediaStream.id co odpowiadające im strumienie lokalne. W naszym przykładzie każda ścieżka jest powiązana tylko z jednym strumieniem.

Pamiętaj, że identyfikatory MediaStream są takie same po obu stronach połączenia typu peer-to-peer, ale nie dotyczy to identyfikatorów MediaStreamTrack.

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

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