Augment Your Browser's Reality

Augmented Reality (AR) is one of those “just over the horizon” technologies that gets a little closer every year. First we had Sixth Sense from MIT (2009). Then Microsoft introduced the Kinect (2010). Later, GoldRun & Word Lens brought AR to mobile (2011). And now, Google has given us Glass (2012). There’s still miles to go, but we’ve made a lot of progress.

But you know what? I’m done waiting. I found some code that I can use right now, in my browser, to create basic AR interactions. Eduardo Lundgren’s JavaScript tracking.js library provides an API for color & ‘human’ feature tracking with your webcam.

You can track the 3D position of a color marker (cyan, magenta, and yellow) or facial feature (eyes, face, mouth, and upper body) and use it to trigger actions.

In my demo, (Desktop & Chrome only), introducing a magenta or cyan object into the camera’s view will trigger color inversion / report marker position.

html <script src="tracking.min.js"></script> <script src="color.min.js"></script> <script> // start video tracking var videoCamera = new tracking.VideoCamera().render(); // setup magenta color tracker & log object position videoCamera.track({ type: 'color', color: 'magenta', onFound: function(track) { console.log(track.x + ", " + track.y + ", " + track.z); } }); </script>

Join the discussion

2017 Neal Shyam