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