如何在一个HTMLMediaElement中显示来自两个不同流的视频流轨道（来自相机和WebGL流）

Question

我需要在单个html元素（可能是<canvas>或<video> ，显示来自用户相机的视频和使用WebGL创建的虚拟对象在网页上。

我可以从导航器的媒体设备成功获取用户视频，它是一个流，并显示在<video>元素中。

通过使用此处的其他示例代码（来自MDN），我可以使用WebGL成功创建虚拟视觉对象并将其显示在<canvas>元素中。

我需要将它们混合在单个html元素上。 我该如何实现。

我的进一步研究向我展示了HTMLMediaElement接口的captureStream()方法。 <video>和canvas都具有此方法。 我可以从此类元素中捕获流，并将其用于其他用途，例如附加到另一个html元素 （但可能不附加到canvas元素）或WebRTC对等连接作为源，进行记录。 但这会覆盖之前的流。

然后我发现一个名为MediaStream的流在其中具有轨道，例如视频轨道 ， 音频轨道甚至文本轨道 。 可以通过MediaStream的addTrack方法添加更多内容，并可以通过getTracks方法getTracks它们。 我已经将<canvas>元素流中的视频轨道添加到了<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>

完整要点

Answer 1

一个视频元素一次只能播放一个视频轨道。

在MediaCapture规范中可以找到对此的支持：

由于未定义MediaStream 轨道集中的顺序，因此对AudioTrackList和VideoTrackList的排序方式没有要求

在HTML中：

选择零个或一个视频轨道； 在选择上一个曲目的同时选择一个新曲目将取消选择上一个曲目。

听起来好像您希望图形覆盖视频，例如黑色透明。

目前，网络平台上没有好的视频合成工具。 唯一的选择是将视频元素中的帧重复绘制到画布中，并使用canvas.captureStream ，但是这会canvas.captureStream大量资源且速度很慢。

如果您只是为了回放而执行此操作（而不是记录或传输结果），则可以通过使用CSS将具有透明性的画布放置在视频元素的顶部，从而更加廉价地实现此效果。 这种方法还避免了跨域限制。

如何在一个HTMLMediaElement中显示来自两个不同流的视频流轨道（来自相机和WebGL流）

问题描述

1 个解决方案

解决方案1
0 2019-05-12 01:29:49

如何在一个HTMLMediaElement中显示来自两个不同流的视频流轨道（来自相机和WebGL流）

问题描述

1 个解决方案

解决方案1 0 2019-05-12 01:29:49

解决方案1
0 2019-05-12 01:29:49