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:
New York City SlideShow from TechSlides on Vimeo.
Record Video and Audio in HTML with Whammy.js and Recorder.js
Capture Canvas and WebGL output as video using websockets
RecordRTC: WebRTC audio/video recording
CANVAS screen recording
Convert a Chrome Timeline data to a GIF