I have an animation happening in a div element. I want to record the div element in a given frame rate and resolution and export it as a file. How can do it in JS. I already searched quite a bit but all JS video recording samples I found are about WebRTC. But I do not want to record a webrtc stream. I just want to record a div element in 1280x720 sizes with 60fps.

I have an animation happening in a div element. I want to record the div element in a given frame rate and resolution and export it as a file. How can do it in JS. I already searched quite a bit but all JS video recording samples I found are about WebRTC. But I do not want to record a webrtc stream. I just want to record a div element in 1280x720 sizes with 60fps.

• javascript
• video

Share Improve this question Follow asked Oct 19, 2019 at 20:50 chickenschickens 22.4k77 gold badges6161 silver badges5757 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

AFAIK there are no ways of recording real time video from regular div elements. You can however fairly easily record media elements, such as canvas, video and audio elements. If you want to record an arbitrary animation, your best bet is probably to draw the animation to a canvas element and record it from there.

The approach looks like this:

• Create a canvas(/video/audio)-element, draw your animations in realtime to the canvas

• Use the method HTMLCanvasElement.captureStream(framerate) to initiate capturing the stream and getting the handler to the stream instance (see https://developer.mozilla/en-US/docs/Web/API/HTMLCanvasElement/captureStream)

• Use the MediaStream Recording API to start recording on the stream instance (see https://developer.mozilla/en-US/docs/Web/API/MediaStream_Recording_API)

• When finished recording, you can export the result to a media-download link, upload the data blob to a server, etc.

You can use timecut JS lib to record. It uses puppeteer to take high quality screenshots and create a video of it. It can also record a specific div element and very high frame rate.

https://github./tungs/timecut