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

Question

所以我想使用javascript和css来创建地图的动画视频。我设想用leaflet等制作一些动画，并使用一些javascript录制一段视频。

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

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

那么有没有一种方法可以用javascript创建动画视频呢？是通过在画布上呈现单张还是通过记录元素的内容？

Answer 1

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

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

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

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

但是如果你想在录制画布的同时录制用户的麦克风或浏览器选项卡上的音频，你可以使用canvas.captureStream()的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资源。