Creating real-time video filters with HTML 5

One of the coolest features of HTML5 is the ability to embed a video in a webpage without the need for a plugin, and then manipulate that video using the canvas tag to create image filters that take effect in real-time. Most people understand the former, but aren’t quite switched on to the potential of the latter.

As an illustrative demonstration and technical exercise, the Metia Labs team developed some basic image filters to convert a full colour video to black & white, sepia and - my own favourite - a Red/Cyan 3D anaglyph. To get the full 3D effect you’ll need specs and give your eyes a few moments to adjust.

The filters are applied in real-time demonstrating how video effects can be implemented on the browser side in a non-destructive manner (i.e. not affecting the format of the source media). Although we have only just scratched the surface with image filters, it certainly opens up a range of creative possibilities, while requiring only one copy of the source video (ogv, webm and mp4 formats required for browser support).

Embedded below is our technical demonstration for you to view, alternatively you can access the page here