https://github.com/alyssaq/face-find-fun

Browser head-tracking and draws a party hat! - uses webrtc getUserMedia API, headtrackr and canvas
https://github.com/alyssaq/face-find-fun

getusermedia headtrackr webrtc

Last synced: 4 months ago
JSON representation

Browser head-tracking and draws a party hat! - uses webrtc getUserMedia API, headtrackr and canvas

• Host: GitHub
• URL: https://github.com/alyssaq/face-find-fun
• Owner: alyssaq
• Created: 2013-10-06T18:18:20.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2017-02-18T07:50:18.000Z (almost 8 years ago)
• Last Synced: 2024-04-13T22:18:57.471Z (10 months ago)
• Topics: getusermedia, headtrackr, webrtc
• Language: HTML
• Homepage:
• Size: 60.5 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#Face Find Fun

Access webcam through the browser with [navigator.getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia)   

Face detection and tracking with [headtrackr](https://github.com/auduno/headtrackr)  

Drawing with [HTML5 canvas](http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/)

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##

##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()**

       

4) To run the web server, in the project folder:

    > node app.js

5) View the party hat on top of your head at: 

6) Have fun! Draw more shapes!