Tutorial

Tutorial

Here is a simple tutorial to get you started using webgazer. Although really, this tutorial code may be the only code you ever need for WebGazer!

Download

The first thing to do is make sure that you have downloaded the gazer.js file. Follow [these download instructions] or get the directly from this repo here.

DOM

Add webgazer.js as a script:

<script src="webgazer.js" type="text/js">

Javascript

Once the script is included, the gazer object is introduced into the global namespace. gazer has methods for controlling the operation of WebGazer allowing us to start and stop it, add callbacks, or change out modules.

The two most important methods on gazer are gazer.begin() and gazer.setGazeListener(). gazer.begin() starts the data collection that enables the predictions, so it's important to call this early on. Once gazer.begin() has been called, webgazer is ready to start giving predictions. gazer.setGazeListener() is a convenient way to access these predictions. This method invokes a callback you provide every few milliseconds to provide the current gaze location of a user. If this data stream is too much, you may alternatively call gazer.getCurrentPrediction() which will give you a prediction at the moment when it is called.

gazer.setGazeListener(function(data, elapsedTime) {
    var xprediction = data.x;
    var yprediction = data.y;
}).begin();