如何在JS中录制div

Question

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

Answer 1

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

这种方法看起来像这样：

视频创建一个canvas(/

• /audio)-element，将您的动画实时绘制到canvas

• 使用HTMLCanvasElement.captureStream(framerate)方法开始捕获流并获取流实例的处理程序(请参见https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)

• When
• -element以在流实例上开始录制(请参见
  • -element，您可以将结果导出到媒体下载链接，将数据blob上传到服务器等。

Answer 2

您可以使用timecut JS lib进行录制。它使用puppeteer拍摄高质量的屏幕截图并创建视频。它还可以记录特定的div元素和非常高的帧速率。

https://github.com/tungs/timecut