HTML5 Video into Canvas with Filters
I have seen a lot of cool HTML5 demos lately and wanted to go over a simple example of leveraging the HTML5 Canvas tag to add filters to a video file. In other words, load a video into a video tag, draw each frame into a CANVAS element, loop through some pixel manipulation that changes each frame, and thus make video filters like shifting colors, tinting, or making the video grayscale.
If you are just starting with HTML5, the following links do a great job describing the basics of CANVAS and an overview of HTML5. You could also check out my recent demo of pulling YouTube videos into CANVAS in order to make video screenshots. This time around, I want to do something much more basic, work with a local video file, and do some simple pixel manipulation. So, how do we use the <video> and <canvas> elements together?
First, we need to start with an actual video file that we load locally using the HTML5 video tag. Let’s also drop in an empty CANVAS tag on the page and we can always hide the video element since we will be displaying the video in CANVAS using JavaScript to play or pause the video. I added a jQuery script to make the JavaScript code a bit smaller but it’s really not necessary. One variable grabs the video element and another one grabs the CANVAS element. We define the widths and heights and attach an event handler to the video element so that anytime the video is played, we can call a draw function that will draw a video frame into the CANVAS element.
If the video is stopped or paused, the draw function will return false. We also pass a filter variable into that function, which is by default, undefined. Otherwise, if the filter variable is set, we grab all the pixel data from the video frame and pass it to a filterdata function that will do the image manipulation. Since we are actually drawing video frames into CANVAS, any kind of pixel manipulation is essentially going to create a video filter effect.
HTML5rocks has a great article on making Image Filters with CANVAS but to keep things simple, we will just focus on making 3 filters: grayscale, color, and tint. I will also add a “pause/play” and “disable all filters” functions. Here is the demo and you can see all the code by viewing the source. Feel free to use the code and create more video filters, perhaps an anaglyph filter that turns normal videos into 3D videos.
