远程视频流使用入门

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，因此最好尽早执行此设置，而不是等待连接完成。

添加远程轨道

为了接收其他对等方添加的远程轨道，我们在本地 RTCPeerConnection 上注册一个监听器，以监听 track 事件。RTCTrackEvent 包含一个 MediaStream 对象数组，这些对象的 MediaStream.id 值与对等方的相应本地串流相同。在我们的示例中，每个轨道只与单个串流相关联。

请注意，虽然对等连接的两端的 MediaStream ID 是匹配的，但 MediaStreamTrack ID 通常不匹配。

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

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