The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
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 an overview of browsers supporting the getUserMedia standard see http://caniuse.com/stream.
Download the minified library headtrackr.js and include it in your webpage.
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.
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.
npm installand to build it run
gruntin the root directory.