リモート ストリームのスタートガイド

RTCPeerConnection をリモートピアに接続すると、それらの間でオーディオとビデオをストリーミングできます。これが、getUserMedia() から受信したストリームを RTCPeerConnection に接続するポイントです。メディア ストリームは、少なくとも 1 つのメディア トラックで構成され、メディアをリモートピアに送信するときに、個別に RTCPeerConnection に追加されます。

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

リモートピアに接続する前に RTCPeerConnection にトラックを追加できるため、接続の完了を待つのではなく、できるだけ早くこの設定を行うのが合理的です。

リモート トラックの追加

もう一方のピアによって追加されたリモート トラックを受信するには、track イベントをリッスンするリスナーをローカルの RTCPeerConnection に登録します。RTCTrackEvent には、ピアの対応するローカル ストリームと同じ MediaStream.id 値を持つ MediaStream オブジェクトの配列が含まれます。この例では、各トラックが 1 つのストリームにのみ関連付けられています。

通常、MediaStream の ID はピア接続の両側で一致しますが、MediaStreamTrack ID でも同様です。

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

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