如何在 JS 中录制 div

Question

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

Answer 1

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

该方法如下所示：

• 创建一个画布（/视频/音频）元素，将动画实时绘制到画布上

• 使用该方法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 上传到服务器等。