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're able to load a video into a canvas and make it appear as greyscaled video, by manipulating the canvas. However, I would like to know, if there is somewhat a method to generate a video-file out of that greyscaled version. Would make sense, if you want to send the video via whatsapp etc.

Thank you

Answer 1

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.

Answer 2

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.