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

Hi I have built it using the code provided by tech-slides. Also I made a template application where you can take list of images and turn them into video format. You have to edit the code according to your own needs. It is only supported in chrome and YouTube though. So basically in whammy.js you turn the images into canvas in a JavaScript file then turn the canvas into video using whammy.js function. You need to set event listener and load the videos into video tag. Whammy.js only produce webp file. To turn it into mp4: Load it in YouTube then download it using YouTube as mp4. Hope it helps.

Answer 2

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)

Answer 3

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.