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

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;
});