Convert Images to Video with JavaScript

Last updated on July 29, 2015 in Development

Image to Video Converter

How do you make a video programmatically? Sending images to a server side program like FFmpeg is one option but how do you make a video from images in HTML5, all on the client side? In the past, I have converted html5 canvas frames into an animated GIF and now I am looking to do something similar but finish with a video file. You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder. It even comes with a demo which shows how CANVAS frames are encoded into a webm video file. So, today, I am going to create an online video creator that lets you upload some images which get converter into a picture slideshow in video format.

Here is the Online Image Slideshow to Video Converter

We start with upload / drag and drop functionality to let the user select some photos for their slideshow. We also allow some options like controlling the width and height of the video (automatically resizes images) and the video frame rate. I used the FileReader API to load each image and draw it into the CANVAS element. How do you make an image slideshow with CANVAS? There are many ways to do this and I choose to create frames with increasing opacity using context.globalAlpha followed by some frames with full opacity and then decreasing opacity. The images get sent to this CANVAS loop and I clear the CANVAS using context.clearRect after a new image is overlaid on a previous image to create a fading photo slideshow effect. This is a really basic flow of frames but it could be easily improved.

Every CANVAS context is added as a whammy video frame and after the loop is done, we finalize the video and play it in a HTML video element as well as provide a download link for the generated video file. The video is in webM format so it will not work on all browsers but you could upload the video to YouTube or convert it to another video format. You could also do various modifications to the CANVAS loop: add text to video frames, add image effects, slow down or speed up the slideshow opacity, etc. I wish there was a way to add a sound file into Whammy so that you could generate a video with sound.

Here is the HTML5 Video Creator from Images.

Here is a Photo Slideshow that I have just programmatically created and uploaded to Vimeo: