RTCPeerConnection
가 원격 피어에 연결되면 두 피어 간에 오디오와 동영상을 스트리밍할 수 있습니다. 여기에서 getUserMedia()
에서 수신한 스트림을 RTCPeerConnection
에 연결합니다. 미디어 스트림은 하나 이상의 미디어 트랙으로 구성되며, 미디어를 원격 피어에 전송하려는 경우 이러한 트랙이 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
객체 배열이 포함됩니다. 이 예시에서 각 트랙은 단일 스트림과만 연결됩니다.
MediaStream
ID는 피어 연결의 양쪽에서 일치하지만 MediaStreamTrack
ID는 일반적으로 그렇지 않습니다.
const remoteVideo = document.querySelector('#remoteVideo');
peerConnection.addEventListener('track', async (event) => {
const [remoteStream] = event.streams;
remoteVideo.srcObject = remoteStream;
});