是否可以将流作为源添加到html canvas元素和html video元素？

Question

根据MDN：

  

HTMLMediaElement界面将属性添加到HTMLElement   支持与媒体相关的基本功能所需的方法和方法，   在音频和视频中很常见。

HTMLMediaElement.captureStream()。它可以与<video>和<canvas>元素一起使用以捕获其流。

相反，您可以将{strong>视频流作为srcObject添加到<video>元素，然后显示它。 <canvas>元素也可以吗？

是否可以将流作为源添加到HTML <canvas>元素？

Answer 1

不，任何Canvas API中都没有能够使用MediaStream的东西。

canvas API仅适用于原始像素，并且不包含任何类型的解码器。您必须使用能够执行此解码的javascript对象（例如ImageBitmap）或HTMLElements。

因此，对于MediaStream，当前唯一能够解码其视频内容的对象将是HTMLVideoElement，您将可以draw on your canvas easily。

Answer 2

@Kaiido是正确的，因为没有任何方法可以直接执行此操作。因此，这是您必须执行的操作：

function onFrame() {
  window.requestAnimationFrame(onFrame);
  canvasContext.drawImage(video, 0, 0);
}
onFrame();

您将遇到几个陷阱：

• 您的源视频可以在流中更改分辨率。这在WebRTC调用中非常常见，在该调用中，由于带宽或CPU限制，源可能会缩放实际的像素分辨率。解决此问题的一种方法是在绘制的每一帧中检查视频的大小，并在画布上进行相应缩放。
• 当选项卡没有焦点时，此帧循环无法快速运行。如果您还依赖此画布上的captureStream，由于政策限制，如果该标签页没有焦点，它将无法正常工作。
• 当选项卡没有焦点时，画布缓冲区不会更新，因此，即使您因音频脚本节点或其他问题而陷入计时器问题，但如果要使用{{1} }。
• 请记住，这里没有“同步锁相”。对于复制到画布上的每一帧，视频中可能会传递任意数量的帧（可能为零！）。这可能与您的情况无关。