Browser head-tracking and draws a party hat! - uses webrtc getUserMedia API, headtrackr and canvas
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

#Face Find Fun

Access webcam through the browser with navigator.getUserMedia

Face detection and tracking with headtrackr

Drawing with HTML5 canvas

Current version tracks your face via webcam and places a party hat on top of your head. Moving your head to the right corner changes the visual CSS webkit-filter



  1. Install nodejs. The only node module dependency is express.

  2. To grab node dependencies, run:

    npm install

  3. Enable getUserMedia() in chrome.
    In the URL, type: chrome://flags and search and enable:

Enable screen capture support in getUserMedia()

  1. To run the web server, in the project folder:

    node app.js

  2. View the party hat on top of your head at: http://localhost:8080/

  3. Have fun! Draw more shapes!