Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

PhotoBooth Style Live Video Effects in JavaScript and WebGL

January 25th 2012

Ever spent hours in PhotoBooth just playing around with the cool live video filters and effects?  Now you can do that in your browser as well thanks to Paul Neave’s cool HTML5 video effects demo!  While you can’t yet use an actual webcam and perform the effects on your own image (although those APIs are coming - Chrome just released WebRTC and getUserMedia support a few days ago!), you can watch as the effects are applied to a prerecorded video using JavaScript and WebGL.  Each filter appears to be a WebGL shader applied to a canvas element that gets its contents from an HTML5 video element.  You can even take a snapshot, and just like in PhotoBooth there is a countdown, the screen flashes and you have your picture that you can download and share on various social networks.  Pretty cool!

Perhaps the coolest part is that if you run the demo in the latest Chrome Canary build with the --enable-media-stream flag, WebRTC and getUserMedia support (added just a few days ago) are enabled and you can actually use your own webcam to take pictures of yourself and see the effects applied in real time.  It is an impressive demo of the performance that WebGL gives us (I get over 100fps!) and the fact that soon we will be able to access the webcam in JavaScript without the use of any plugins like Flash!

Although the code does not appear to be open source, it is still a cool demo of what web technology is becoming capable of and I highly recommend you check it out (Chrome or Firefox are best)!