원격 스트림 시작하기

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