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