javascript - 如何在JS中录制div的视频

Question

我在 div 元素中发生了一个动画。我想以给定的帧速率和分辨率记录 div 元素并将其导出为文件。在JS中如何实现呢？我已经搜索了很多，但我找到的所有 JS 视频录制示例都是关于 WebRTC 的。但我不想录制 webrtc 流。我只想以 60fps 录制 1280x720 尺寸的 div 元素。

Answer 1

据我所知，没有办法从常规 div 元素录制实时视频。不过，您可以相当轻松地录制媒体元素，例如 canvas、video 和 audio 元素。如果您想录制任意动画，最好的选择可能是将动画绘制到 Canvas 元素并从那里录制。

该方法如下所示:

• 创建一个 Canvas (/视频/音频)元素，将动画实时绘制到 Canvas 上

• 使用方法 HTMLCanvasElement.captureStream(framerate) 启动捕获流并将处理程序获取到流实例(请参阅 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream )

• 使用 MediaStream Recording API 开始在流实例上进行录制(请参阅 https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API )

• 完成录制后，您可以将结果导出到媒体下载链接、将数据 blob 上传到服务器等。