One of the more interesting features on the bleeding edge of HTML5 is getUserMedia. This API covers basic access to the user's audio and video devices. I first blogged about this a few weeks ago with my face detection example. Since that time I've been curious what other uses would be possible with this support. As I said in the previous blog entry, chat and quick picture taking is kind of obvious. I'm more interested in the not so obvious (and possibly not very practical ;) examples.

In the excellent HTML5 Rocks tutorial on getUserMedia, they discuss how live video passed to a canvas object can be modified using CSS filters in real time. This allows for interesting effects. For example, Hulk Ray:

When I saw this demo, I was curious if something fun could be done with it. Along with basic color changes you can also blur the video. I thought it might be cool to create a user registration form that creates a crystal-clear image of you as you fill it out. I know many of you can't use this feature yet in your browser, so here are a few screen shots to demonstrate what I mean. Upon hitting the form, here is how things look.

And then I fill in a field...

And another...

And so on...

And finally...

How does it work? I'm going to assume you read my earlier post (or the excellent HTML5 Rocks article I already linked to). The basic gist is - once you've gotten access to the web cam and have directed the output to the canvas, you simply apply different CSS filters based on how correct the form is.

Want to test this yourself or see all of the code? Head over to the demo below.