Skip to content

Javascript library for headtracking via webcam and WebRTC/getUserMedia

Notifications You must be signed in to change notification settings

wellflat/headtrackr

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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/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.

Reference - Overview

Examples

facetracking sprites facekat targets

Usage

Download the minified library headtrackr.js and include it in your webpage.

<script src="js/headtrackr.js"></script>

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.

<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
<video id="inputVideo" autoplay loop></video>
<script type="text/javascript">
  var videoInput = document.getElementById('inputVideo');
  var canvasInput = document.getElementById('inputCanvas');
  
  var htracker = new headtrackr.Tracker();
  htracker.init(videoInput, canvasInput);
  htracker.start();
</script>

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, try to use one of the pre-packaged controllers in this library to create pseudo-3D, aka head-coupled perspective effects.

To get some more idea about usage look at the source code for the examples above, this overview, or the reference.

Projects that have used headtrackr

movembergames street-facing Real-time responsive typography

Building from source

Make sure you have grunt installed and build in src folder with the command grunt

License

Headtrackr.js is distributed under the MIT License, and includes some code bits (courtesy Liu Liu and Benjamin Jung) that are under the BSD-3 License and the MIT License respectively.

About

Javascript library for headtracking via webcam and WebRTC/getUserMedia

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published