WebGazer.js

To use WebGazer.js you need to add the webgazer.js file as a script in your website:

 /* WebGazer.js library */
<script src="webgazer.js" type="text/javascript" >

Be aware that when you do local development and you might need to run locally a simple http server that supports the https protocol.

Once the script is included, the webgazer object is introduced into the global namespace. webgazer has methods for controlling the operation of WebGazer.js allowing us to start and stop it, add callbacks, or change out modules. The two most important methods on webgazer are webgazer.begin() and webgazer.setGazeListener(). 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.js 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 you don't need constant access to this data stream, you may alternatively call webgazer.getCurrentPrediction() which will give you a prediction at the moment when it is called.

webgazer.setGazeListener(function(data, elapsedTime) {
	if (data == null) {
		return;
	}
	var xprediction = data.x; //these x coordinates are relative to the viewport
	var yprediction = data.y; //these y coordinates are relative to the viewport
	console.log(elapsedTime); //elapsed time is based on time since begin was called
}).begin();
					

Here is the alternate method of getting predictions where you can request a gaze prediction as needed.

var prediction = webgazer.getCurrentPrediction();
if (prediction) {
	var x = prediction.x;
	var y = prediction.y;
}
					

Saving Data Between Sessions

WebGazer.js can save and restore the training data between browser sessions by storing data to the browser using localforage, which uses IndexedDB. This occurs automatically with every click in the window. If you want each user session to be independent make sure that you set window.saveDataAcrossSessions in main.js to false.

Pause and Resume

It may be necessary to pause the data collection and predictions of WebGazer.js for performance reasons.

webgazer.pause(); //WebGazer.js is now paused, no data will be collected and the gaze callback will not be executed
webgazer.resume(); //data collection resumes, gaze callback will be called again
					

Util and Params

We provide some useful functions and objects in webgazer.util. The webgazer.params object also contains some useful parameters to tweak to control video fidelity (trades off speed and accuracy) and sample rate for mouse movements.

webgazer.util.bound(prediction);
prediction.x; //now always in the bounds of the viewport
prediction.y; //now always in the bounds of the viewport
					

Download

Download WebGazer.js

Dataset

A webcam video dataset comprising 51 participants for training and evaluating eye tracking models. Please see the documentation and download link.

Build from source

The GitHub repository contains the source code and version history.

# Ensure NodeJS is downloaded: https://nodejs.org/en/download/
git clone https://github.com/brownhci/WebGazer.git
cd WebGazer
#install the dependencies
npm install
#build the project
npm run build

Calibration on Empty Page

See how easy it is to integrate WebGazer.js on any webpage. With just a few clicks you will get real-time predictions. Follow the popup instructions to click through 9 calibration points on the screen whilst looking at the cursor.

Try Live Demo

Ball Collision Game

Move the orange ball with your eyes and create collisions with the blue balls. Train WebGazer.js by clicking in various locations within the screen, while looking at your cursor.

Try Live Demo

WebGazer on Search Engines (legacy)

We have created SearchGazer.js, a library that incorporates WebGazer in Search Engines such as Bing and Google. Note that this uses an older version of WebGazer, so is here just as a legacy demo.

Try SearchGazer.js

If you use WebGazer.js please cite:

@inproceedings{papoutsaki2016webgazer,
  author = {Alexandra Papoutsaki and Patsorn Sangkloy and James Laskey and Nediyana Daskalova and Jeff Huang and James Hays},
  title = {WebGazer: Scalable Webcam Eye Tracking Using User Interactions},
  booktitle = {Proceedings of the 25th International Joint Conference on Artificial Intelligence (IJCAI)},
  pages = {3839--3845},
  year = {2016},
  organization={AAAI}
}

If you use SearchGazer.js please cite the following paper:

@inproceedings{papoutsaki2017searchgazer,
  author = {Alexandra Papoutsaki and James Laskey and Jeff Huang},
  title = {SearchGazer: Webcam Eye Tracking for Remote Studies of Web Search},
  booktitle = {Proceedings of the ACM SIGIR Conference on Human Information Interaction \& Retrieval (CHIIR)},
  year = {2017},
  organization={ACM}
}

For the WebGazer webcam dataset and findings about gaze behavior during typing:

@inproceedings{papoutsaki2018eye,
  title={The eye of the typer: a benchmark and analysis of gaze behavior during typing},
  author={Papoutsaki, Alexandra and Gokaslan, Aaron and Tompkin, James and He, Yuze and Huang, Jeff},
  booktitle={Proceedings of the 2018 ACM Symposium on Eye Tracking Research \& Applications},
  pages={16},
  year={2018},
  organization={ACM}
}