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?
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.
The State of HTML5 Video