Is it possible to record a video of the contents of an HTML element?

user_7832506 0
Viewed 2750

So I want to use javascript and css to create an animated video of maps. I imagined to do some animations using leaflet etc and use some javascript to record a video of it.

However so far I found that video recording is only possible for the entire screen or a canvas according to MDN (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element) and Google documentation (https://developers.google.com/web/updates/2016/10/capture-stream)

I tried to render leaflet js onto a canvas, but I could not find any way to do so.

So is there a way to create an animated video using javascript? Either by rendering leaflet onto a canvas or by recording the content of a element?

leaflet video-capture html5-canvas html javascript
1 Answers

You can use RecordRTC to record a canvas element.

If you already have a canvas that has animations in it, it is very simple to use RecordRTC to record that canvas element.

If you don't have a canvas element and you need to record an HTML element, you would first need to place a hidden canvas on the screen and draw on it your HTML content using window.requestAnimationFrame(). Then you can use RecordRTC to record that canvas element.

You can use RecordRTC's CanvasRecorder to record just the canvas.

But if you want to do other things like record the user's microphone or browser tab's audio alongside your recording your canvas, you can canvas.captureStream() and use the RecordRTC's MediaStreamRecorder to record.

In both the aforementioned cases, you will get a video file as the result.

A full example demo can be found here -> https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html
The source code for that demo can be found here -> https://github.com/muaz-khan/RecordRTC/blob/master/Canvas-Recording/Canvas-Animation-Recording-Plus-Microphone.html

All credits go to Muaz Khan for maintaining such an awesome project alongside many other equally awesome webRTC projects.

NOTE: Rendering HTML element to canvas can be CPU intensive.

user_55121450
Related