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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
.gitignore
README.md
app.js
index.html
package.json
webcam.html

README.md

#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

##Demo## https://alyssaq.github.io/face-find-fun

##Usage

  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!