HTML5 generating video from images

Question

i\'m wondering, since HTML and with javascript are mesmerizing together, if there is a solution in HTML5 to generate a video-file from many images?

For example, you\'r

Answer 1

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)