開始使用遠端串流

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,再連線到遠端對等節點,因此請盡早執行此設定,而非等待連線完成。

新增遠端測試群組

要接收其他人的添加遠程曲目,我們 在本地 RTCPeerConnection 上註入收音器 收聽 track 事件。RTCTrackEvent 包含 MediaStream 物件的陣列,這些陣列的 MediaStream.id 值與對等點的本機串流相同。在我們的範例中,每個音軌都只與一個串流相關聯。

請注意,雖然 MediaStream 編號在對等點的兩端相符,但 MediaStreamTrack ID 通常也是如此。

const remoteVideo = document.querySelector('#remoteVideo');

peerConnection.addEventListener('track', async (event) => {
    const [remoteStream] = event.streams;
    remoteVideo.srcObject = remoteStream;
});