我需要在单个html元素（可能是<canvas>或<video>中，将来自用户相机的视频和使用WebGL创建的虚拟对象显示在单个html元素中。
我可以从导航器的媒体设备成功获取用户视频流，并将其显示为<video>元素。
通过使用此处的其他示例代码（来自MDN），我可以使用WebGL成功创建虚拟视觉对象并将其显示在<canvas>元素中。
我需要将它们混合在单个html元素上。我该怎么做到。
我的进一步研究表明，存在captureStream()接口的HTMLMediaElement方法。 <video>和canvas都具有此方法。我可以捕获来自此类元素的流并将其用于其他用途，例如附加到另一个 html元素（但可能不附加到canvas元素）或 WebRTC对等连接来源，记录下来。但这会覆盖之前的流。
然后，我发现名为MediaStream的流中具有音轨，例如视频音轨，< em>音频轨道甚至是文本轨道。可以通过addTrack的{{1}}方法添加更多内容，并且可以通过MediaStream方法获得它们。我已将getTracks元素流中的视频轨道添加到<canvas>元素流中，但是，我只能从以下位置查看原始的视频轨道： <video>元素中的用户媒体。
要实现这一目标，我缺少什么？
<video>答案 0 :(得分：0)
一个视频元素一次只能播放一个视频轨道。
对此的支持可在MediaCapture spec中找到：
由于MediaStream的track set中的顺序未定义，因此对AudioTrackList和VideoTrackList的排序方式没有要求
在HTML中：
选择零个或一个视频轨道；在选择上一个曲目的同时选择一个新曲目将取消选择上一个曲目。
听起来像您希望图形覆盖视频，例如黑色透明。
当前，网络平台上没有好的视频合成工具。唯一的选择是将视频元素中的帧重复绘制到画布中，并使用canvas.captureStream，但这是资源密集且速度慢的问题。
如果仅是为了播放而进行此操作（而不是记录或传输结果），则可以通过使用CSS将具有透明性的画布放置在视频元素的顶部，从而更廉价地实现此效果。这种方法还避免了跨域限制。