远程视频流使用入门

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 ID 在对等连接两端都匹配, 通常不适用于 MediaStreamTrack ID。

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

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