HTML5 generating video from images

Here we go:

• Article: http://techslides.com/convert-images-to-video-with-javascript
• Demo: http://techslides.com/demos/image-video/create.html (select multiple images at once)
• Code: [just view the source]
• You can download .webm video file

@K3N answer mentions building an encoder. Luckily there is one - https://github.com/antimatter15/whammy - snippet from the article:

You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder.

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)