This is how you see your web browser…

…but did you know that this is how your web browser sees YOU

… well, maybe that’s not completely true. But, it is possible for a modern web site to capture images from your computer camera, process those images, add effects, identify objects, and drive user interactions using camera input.

The technology that makes these possible is a combination of new faster Javascript engines and WebRTC support in your browser. WebRTC is a new web standard that allows pages to access your computer’s camera via your web browser. That video can then be relayed back to a central server (for example for a video chat app) or processed locally as it is in the examples below.

Support is coming soon for most browsers, but is spotty at the moment. You’re likely to have the best luck with the Chrome browser when viewing these demos. I’ve supplied a few screenshots so you’ll get the idea, but you really have to click the links and play around to get the full effect. You’ll also have to watch out for the little prompt at the top of your browser asking if you allow access to your web cam, be sure to click “allow” or these won’t work.

Let’s start with a fun and funny face detection example

This is a more basic presentation of the same type of face detection and tracking many consumer digital cameras use……

In other applications, Javascript and your camera can detect features in your environment, like object corners

In this example, you can click a point on an object, then move the object and watch as the camera tracks a point on that object

Cool visual effects like this edge detection are possible too…

The really great thing is that many of these examples have been created with the JSFeat library. This free open source toolkit lets developers incorporate this functionality easily into their web apps.