所以我想使用 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 创建动画视频？通过将传单渲染到画布上还是通过记录元素的内容？
【问题讨论】：
标签： javascript html html5-canvas leaflet video-capture
您可以使用RecordRTC 记录画布元素。
如果您已经有一个包含动画的画布，则使用 RecordRTC 记录该画布元素非常简单。
如果您没有画布元素并且需要录制 HTML 元素，则首先需要在屏幕上放置一个隐藏的画布并使用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 项目一起维护了如此出色的项目。
【讨论】：