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

【问题标题】：HTML5 how to display MediaStream with multiple video tracksHTML5 如何显示具有多个视频轨道的 MediaStream
【发布时间】：2018-10-05 05:04:28
【问题描述】：

我的浏览器 (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", … }

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

我尝试在第一条轨道上将“启用”属性设置为 false。流只是空白。我尝试交换第一个和第二个的数组位置，但流变为空白。无论如何我都找不到要播放的第二个流。

这里有什么我遗漏的吗？处理多个视频轨道的资源严重不足。

【问题讨论】：

嗨，你能搞定这个吗？

标签： html html5-video media-source

【解决方案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;

【讨论】：