是否可以录制HTML元素内容的视频？

Question

所以我想使用JavaScript和CSS创建地图的动画视频。我想使用传单等制作一些动画，并使用一些JavaScript来录制它的视频。

到目前为止，我发现根据MDN（https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element）和Google文档（https://developers.google.com/web/updates/2016/10/capture-stream），只能在整个屏幕或画布上进行视频录制

我试图将传单js渲染到画布上，但找不到任何方法。

有没有办法使用javascript创建动画视频？是通过将传单呈现到画布上还是通过记录元素的内容？

Answer 1

您可以使用RecordRTC来记录画布元素。

如果您已经有一个包含动画的画布，那么使用RecordRTC记录该画布元素非常简单。

如果没有canvas元素，并且需要记录HTML元素，则首先需要在屏幕上放置一个隐藏的canvas，然后使用window.requestAnimationFrame()在其上绘制HTML内容。然后，您可以使用RecordRTC来记录该画布元素。

您可以使用RecordRTC的CanvasRecorder仅记录画布。

但是，如果您想做其他事情，例如在录制画布的同时录制用户的麦克风或浏览器选项卡的音频，则可以canvas.captureStream()并使用RecordRTC的MediaStreamRecorder进行录制。

在上述两种情况下，您都会获得一个视频文件。

可以在此处找到完整的示例演示-> https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html
该演示的源代码可以在这里找到-> https://github.com/muaz-khan/RecordRTC/blob/master/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html

所有功劳归功于Muaz Khan，以与其他许多同样出色的webRTC项目一起维护如此出色的项目。

注意：将HTML元素渲染到画布可能会占用大量CPU。