PUBLIC MARKS from sbrothier with tags html5 & tracking

Develop apps for the web, mobile and desktop using Actionscript or HTML5/Javascript. The trial SDK ships with examples to get you started in no time.

move your head

Recently, I have seen a couple different JavaScript face detection demos based on the HTML5 getUserMedia API. I even made my own face detection demo based on the HTML5 video tag. Beyond human faces, we also have face detection for cats in JavaScript, nudity detection, and much more with js-objectdetect, a JavaScript library for real-time object detection.

While recently watching a talk about the new WebRTC features I was reminded of Paul Rouget’s great green screen demo and thought that this would be a cool thing to have for live video as well. Let us build a live green screen!

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.

headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard. For a demonstration see this video or try out some of the examples with a laptop that has a camera and a browser that has camera webRTC/getUserMedia support (for instance Opera 12). For an overview of browsers supporting the getUserMedia standard see http://caniuse.com/stream.

This post is about head tracking and how to use it in 3D. It is surprisingly easy to do with the suitable libraries. We will experiment with headtrackr.js and three.js. headtrackr.js is a nice library from auduno to do head tracking in the browser. You will learn how to do head tracking in webgl in only 20lines of javascript. I love the web and how easy it is :)