Best Way to Create Video from Html5 Animation

best way to create video from html5 animation

So far the best thing I've found so far that won't require me to write c code is using Titanium for desktop. It features a takeScreenshot function available from javascript code. The takeScreenshot function gets a screenshot of the entire desktop, but it should be easy to automate cropping that down. With a plethora of javascript animation libraries out there, I should be able to hack in ways of getting a screenshot at every frame, even if it can't happen in real-time.

While I won't be able to use CSS animations, this is probably the most flexible solution anyway, given that anything I can do with CSS animations I can do with javascript, and I'll have more control over frame rate, etc.

Additionally, this should allow me to use all things the browser is capable of, combining html/css/js/svg/canvas.

How to record an HTML animation and save it as a video, in an automated manner in the backend

Late answer from someone looking for similar options due to the convenience of some browser SVG APIs:

My first recommendation, as someone who has written a fair amount of my own audio visualization software, is to use a graphics library and language that don't require a browser or GPU, like Gd or Anti-grain Geometry or Cairo with any server-side language. You might also check out Processing.org (which I haven't used), not sure if there's a headless version.

If that's not possible, I've found these so far but haven't tried them:

• https://github.com/tungs/timecut

• https://github.com/myplanet/headless-render

• https://wave.video/blog/how-we-render-animated-content-from-html5-canvas/

html - Create a video using HTML, CSS & CSS animations?

This may be what you are looking for: https://www.remotion.dev

Essentially, it is a ReactJS framework that uses SVG and WebGL to create complex motion graphics, which can include videos and images.

(I have no relation to the framework or its developers)

Convert HTML5 Canvas Sequence to a Video File

There exist the whammy library which claims to produce webm videos from stills using JavaScript:

http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/

Note that there are limitations (as to be expected). This encoder bases itself on the webp image format which is currently only supported in Chrome (perhaps the new Opera too but I haven't checked). This means you can't encode in other browsers unless you find a way to encode the image you want to use as a webp image first (see this link for possible solution for that).

Beyond that there is no way to create a video file from images using JavaScript and canvas using native browser APIs.

HTML5 generating video from images

There are currently no built-in API to do video encoding in HTML5. There are work in progress though, to allow basic video and audio recording - but it's not available at this time (audio recording is available in FireFox - it is also limited to streams).

If you are OK with gif animation you can encode the frames as a gif using one of the encoders out there (see below).

For video - there has been attempts, more or less successful, (the project I had in mind does not seem to be available anymore) but there has been issues from one browser to another.

There is the option of building an encoder yourself low-level style, following video encoding and file format specifications. It's doable but it's not a small project.

In any case, encoding video is a pretty performance hungry task even for native compiled applications. Running such a task in the browser will be a even more slow process and probably not practical for many users (and mobile devices will suck on those batteries).

The better approach IMO (at the moment at least, until the aforementioned API becomes available), is to send images to server and have a server in the back handling encoding jobs, then send the result to client. This way you can use multi-threading, offload the client, use native compiled encoders such as ffmpeg, and the resulting video can be streamed back.

Some resources

• MediaStream Recording API
• Gif encoder 1
• Gif encoder 2 (NodeJS)
• HTML5 Video recording information and status
• Realtime video encoder (NodeJS/ffmpeg)
• libvpx (requires emscripten/asm.js)

How was this HTML5 screencast animation created?

Jon Skinner, the creator of Sublime Text wrote about the process on his website

He also published the encoder he wrote on GitHub

---

Related Topics