我需要在单个html元素中的网页上显示用户摄像机和虚拟对象的视频，可能是 <canvas>或 <video>。
我可以成功获取用户视频，这是从导航器的媒体设备中显示的流，并在<video>元素中显示。
我可以通过在此处使用他人的示例代码(来自MDN(，成功地使用WebGL创建虚拟可视化对象，并在<canvas>元素中显示它们。
我需要将它们混合在单个HTML元素上。我该如何实现。
我的进一步研究表明我有一种captureStream() HTMLMediaElement接口的方法。<video>和画布都有此方法。我可以从此类元素中捕获流并将其用于其他事物，例如将其附加到另一个 html元素(但可能不会纳入帆布元素(或a webrtc对等连接 as来源，记录它。但这覆盖了先前的流。
然后，我发现流称为 MediaStream， track> tracks ，例如 video track s，音轨偶数文本跟踪。可以通过MediaStream的addTrack方法添加更多内容，并且可以通过getTracks方法获得。我已将视频跟踪从我的<canvas> Element的流中添加到<video>元素流中，但是，我只能从用户媒体<video>元素中。
我缺少什么来实现这一目标？
<html>
<body>
getting video stream from camera into screen
<video autoplay></video>
getting virtual objects into screen
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>
// webgl codes that draws a rotating colored cube on html canvas webgl context
<script src="gl-matrix.js"></script>
<script src="webgl-demo.js"></script>
<script>
// getting video stream from camera into screen
const video = document.querySelector("video");
navigator.mediaDevices.getUserMedia({video: true})
.then(stream => {
let canv = document.querySelector("#glcanvas");
let canvstrm = canv.captureStream();
// get track from the canvas stream and add to the user media stream
let canvstrmtrack = canvstrm.getTracks()[0]
stream.addTrack(canvstrmtrack);
video.srcObject = stream;
})
</script>
</html>
完成GIST
视频元素一次只能播放一个视频轨道。
在MediaCapture Spec中找到了对此的支持：
由于Mediastream轨道集中的订单是不确定的，因此对audiotracklist和videotracklist的订购方式没有任何要求
和html：
选择了零或一个视频轨道；选择一个新曲目时选择一个新曲目将取消选择上一个。
听起来您期望图形会覆盖视频，例如黑色为透明。
目前Web平台中没有良好的视频组成工具。唯一的选择是重复将视频元素从画布中绘制帧，并使用canvas.captureStream，但它是资源密集型和缓慢的。
如果您只是为了进行播放(而不是录制或传输结果(，那么您可以通过使用CSS在视频元素的顶部将画布定位在视频元素之上，从而更便宜地实现此效果。这种方法还避免了交叉原始限制。