Motion tracking with Javascript, HTML5 and a webcam

Dion Moult

2013-08-08

Why would you use the web for motion tracking? Simple. HTML5 Canvas is exciting. Javascript is (pretty) cool. Combined with a lazy afternoon, we can create an ultra simple hand motion tracking and colour recognition system.

This isn’t entirely true. It doesn’t track the hand, it tracks a bright blue bottle cap I found on the floor. Even more truthful is to say that it tracks anything bright blue. But enough chat, here’s a demonstration. Just click the small button with the dash in it to get started, grab something blueish and wave it in front of your camera. It won’t be as good as we got it since we adjusted it for specific lighting conditions, but it’s enough as a proof of concept.

We’ve also got pretty pictures to show. Here’s one of the quick n’ dirty strap we used to embed the bottle cap in.

Hand motion tracking
Hand motion tracking

And here is one of it in action.

You can see the (bad, hackish, thrown together) code for it in my playground repository on GitHub.

Comments

If you have any comments, please send them to dion@thinkmoult.com.