https://github.com/auduno/headtrackr

Javascript library for headtracking via webcam and WebRTC/getUserMedia
https://github.com/auduno/headtrackr

Last synced: about 1 month ago
JSON representation

Javascript library for headtracking via webcam and WebRTC/getUserMedia

• Host: GitHub
• URL: https://github.com/auduno/headtrackr
• Owner: auduno
• Created: 2012-05-21T15:30:45.000Z (about 13 years ago)
• Default Branch: dev
• Last Pushed: 2023-06-15T12:07:55.000Z (about 2 years ago)
• Last Synced: 2025-05-11T18:08:28.378Z (about 1 month ago)
• Language: JavaScript
• Size: 16.8 MB
• Stars: 3,680
• Watchers: 199
• Forks: 502
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-threejs - headtraker

README

        
headtrackr

==========

**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](http://www.webrtc.org/)/[getUserMedia](http://dev.w3.org/2011/webrtc/editor/getusermedia.html) standard.

For a demonstration see [this video](https://vimeo.com/44049736) or try out some of the examples with a laptop that has a camera and a browser that has camera webRTC/getUserMedia support. For an overview of browsers supporting the getUserMedia standard see [http://caniuse.com/stream](http://caniuse.com/stream).

[Reference](http://auduno.github.com/headtrackr/documentation/reference.html) - [Overview](http://auduno.tumblr.com/post/25125149521/head-tracking-with-webrtc)

### Examples ###

[![facetracking](http://auduno.github.com/headtrackr/examples/media/facetracking_thumbnail.png)](http://auduno.github.com/headtrackr/examples/facetracking.html)

[![sprites](http://auduno.github.com/headtrackr/examples/media/sprites_thumbnail.png)](http://auduno.github.com/headtrackr/examples/sprites_canvas.html)

[![facekat](http://auduno.github.com/headtrackr/examples/media/facekat_thumbnail.png)](http://www.shinydemos.com/facekat/)

[![targets](http://auduno.github.com/headtrackr/examples/media/targets_thumbnail.png)](http://auduno.github.com/headtrackr/examples/targets.html)

### Usage ###

Download the minified library [headtrackr.js](https://github.com/auduno/headtrackr/raw/master/headtrackr.js) and include it in your webpage.

```html

```

The following code initiates the headtrackr with a video element which will be used for the mediastream, and a canvas element we will copy the videoframes to.

```html

  var videoInput = document.getElementById('inputVideo');

  var canvasInput = document.getElementById('inputCanvas');

  

  var htracker = new headtrackr.Tracker();

  htracker.init(videoInput, canvasInput);

  htracker.start();

```

When the headtracker is started, this will now regularly generate the events *headtrackingEvent* and *facetrackingEvent* on the document. The event *headtrackingEvent* has the attributes *x*, *y*, *z*, which tells us the estimated position of the users head in relation to the center of the screen, in centimeters. The event *facetrackingEvent* has the attributes *x*, *y*, *width*, *height* and *angle*, which tell us the estimated position and size of the face on the video.

You can now either create an eventlistener to handle these events somehow, or, if you're using [three.js](https://github.com/mrdoob/three.js/), try to use one of the pre-packaged controllers in this library to create pseudo-3D, aka [head-coupled perspective](http://en.wikipedia.org/wiki/Head-coupled_perspective) effects.

To get some more idea about usage look at the source code for the examples above, [this overview](http://auduno.tumblr.com/post/25125149521/head-tracking-with-webrtc), or [the reference](http://auduno.github.com/headtrackr/documentation/reference.html).

### Projects that have used headtrackr ###

[![movembergames](http://auduno.github.com/headtrackr/examples/media/movembergames_thumbnail.png)](http://movembergames.com)

[![street-facing](http://auduno.github.com/headtrackr/examples/media/street-facing_thumbnail.jpg)](https://github.com/alexhancock/street-facing)

[![Real-time responsive typography](http://auduno.github.com/headtrackr/examples/media/responsive_text.png)](http://webdesign.maratz.com/lab/responsivetypography/realtime/)

[![snake](http://nicolas-beauvais.com/Snake/thumbs.png)](http://nicolas-beauvais.com/Snake/)

### Building from source ###

Make sure you have [grunt](http://gruntjs.com/) and [node](http://nodejs.org/download/) installed.

To install the development dependencies run ```npm install``` and to build it run ```grunt``` in the root directory.

### License ###

Headtrackr.js is distributed under the [MIT License](http://www.opensource.org/licenses/MIT), and includes some code bits (courtesy [Liu Liu](https://github.com/liuliu) and Benjamin Jung) that are under the [BSD-3 License](http://www.opensource.org/licenses/BSD-3-Clause) and the [MIT License](http://www.opensource.org/licenses/MIT) respectively.