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 to make sure that you have downloaded the webgazer.js file. Follow these download instructions or download it directly from this repo here.

DOM

Add webgazer.js as a script:

<script src="webgazer.js" async>

Javascript

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

The most important method on webgazer is webgazer.begin(). webgazer.begin() starts the data collection that enables the predictions, so it's important to call this early on. Once webgazer.begin() has been called, webgazer is ready to start giving predictions.

webgazer.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 webgazer.getCurrentPrediction() which will give you a prediction at the moment when it is called.

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