HTML5如何显示具有多个视频轨道的MediaStream

Question

我的浏览器（firefox）中有一个MediaSource对象。以下成功显示了一个视频。

document.getElementById("stream").srcObject = event.stream;

现在，我实际上在此MediaSource对象中有两个视频轨道。如果我打电话

event.stream.getVideoTracks（）

它返回两个视频轨道

(2) […]​
0: VideoStreamTrack { enabled: true, kind: "video", id: "{2ade10ae-cfff-2b4e-a1d2-5317edb2a525}", label: "remote video", … }​
1: VideoStreamTrack { enabled: true, kind: "video", id: "{89863fd0-3165-0848-91e7-14a627af9726}", label: "remote video", … }​

这两个都应具有有效的视频轨道。理想情况下，如果可能的话，我想在单独的视频元素中显示每个视频。但是，我什至根本无法播放第二首曲目（甚至不是第一首）。

我尝试在第一条轨道上将'enabled'属性设置为false。流只是空白。我尝试交换第一个和第二个的数组位置，但是流变为空白。反正我找不到第二个视频流播放。

我这里缺少什么吗？令人惊讶的是，缺乏能够处理多个视频轨道的资源。

Answer 1

最简单的解决方案是基于这些轨道创建 2 个 MediaStream：

const videoTracks = event.stream.getVideoTracks();
const MediaStream1 = new MediaStream([videoTracks[0]]);
const MediaStream2 = new MediaStream([videoTracks[1]]);

document.getElementById('video1').srcObject = MediaStream1;
document.getElementById('video2').srcObject = MediaStream2;