我有一个关于将画布上的绘图过程叠加到视频上并将其录制为视频的问题。这可以使用 WebCodecs 实现吗？

Question

我想把画在Canvas(input)上的过程内容一起合成记录成一个电影覆盖在Video Stream上

WebCodecs API 有办法做到这一点吗？

我目前的方法是使用 createImageBitmap() 为 Video(input) 和 Canvas(input) 分别捕获一张图片，并将其传递给 WebWorker

在 WebWorker 中，Video 和 Canvas 被绘制到另一个 Canvas（输出）。画好之后又把图片传入，如此循环下去

然后在 Canvas 上执行 captureStream()（输出）

最后，对这个 Canvas(Output) Stream 进行编码并写入 FileWritable

但是我发现这很可能导致我的程序拥塞，即使我使用createImageBitmap生成ImageBitmap传递给WebWorker的transferable object

不知道有没有更好的方法可以把canvas的内容叠加在视频上面输出电影

抱歉英语不是我的母语

Answer 1

是的，webcodecs 可以从你的画布动画中输出一个新的视频。这些的基本步骤如下：

1. 创建和配置视频编码器实例。查看文档以了解如何 (https://developer.mozilla.org/en-US/docs/Web/API/VideoEncoder)
2. 创建和配置一个多路复用器。有许多不同的多路复用器可用作库。我正在使用这个来制作 webm 文件，因为它使用起来很简单：https://github.com/Vanilagy/webm-muxer.
3. 使用画布作为参数创建视频帧，只需添加相应的视频时间戳：new VideoFrame(canvas, { timestamp });
4. 将 videoFrame 提供给编码器，编码器将输出一个编码的 VideoFrame
5. 将编码后的视频帧提供给混合器。

本示例使用网络摄像头流，您可以在那里获取代码，只需将视频帧的源更改为画布即可：

https://vanilagy.github.io/webm-muxer/demo-streaming/