Webgazer.js An In-Browser Eye Tracking Library
Written by Mike James   
Wednesday, 01 June 2016

The idea of Webgazer.js is simple enough - an open source eye tracker written in JavaScript that can run on any web browser and use a standard web cam to track the user's eyes. The concept is simple but the possibilities are huge.

Eye tracking, working out where a user is looking, is a difficult task that usually involved high quality cameras and calibration procedures. This makes it expensive and time consuming. Webgazer.js is quite the reverse - it is almost too easy. Using a standard web cam, usually a built-in one, you can follow what the user is looking at without explicit calibration.  

All you have to do is load the library and use the webgazer object to track the user's eyes. The interaction is asynchronous, you supply a callback and this is supplied with data about where the user is looking every few milliseconds. The data returned is the predicted x,y coordinate of the point on the screen the user it looking at. 

How can this work without calibration?

The answer is that calibration is performed but in an interactive fashion. The idea is that you get the user to click on the screen while looking at the cursor. The click location then gives the point on the screen that the user is looking at and this is used to train a regression model. You can imagine many different ways of getting the user to do this without making it seem like a calibration procedure.

You can swap in different eye and face detection models and change the regression modules.  

The accuracy is around 100 pixels, which is enough in most cases to work out what the user is looking in the web page. It is even good enough to play a game where the eye gaze controls a ball. 

You can see it in action in the following video:

 

it works with any browser that supports getUserMedia in the WebRTC API and in practice this means any modern browser.

Notice that the WebRTC API has some security and privacy safeguards and the browser will ask the user if the web page can use the camera. However, it is easy to think of ways of getting the user to allow access by telling them that it was for something different - to play a game say -while you tracked eye movement between games to see what ads they were viewing.  

WebRTC is a controversial technology and not everyone is happy to have it in the browser. Many will find this development confirms that it is a bad idea. However it also opens up lots of possibilities many of which are positive and of benefit to the user and the programmer. 

As already mentioned, the code is open source under the GPLv3 licence and is the result of research by a small group at Brown University. You can read the paper to find out more about how it works. 

 

eyetracker

More Information

Democratizing Webcam Eye Tracking on the Browser

WebGazer: Scalable Webcam Eye Tracking Using User Interactions (pdf) 

Alexandra Papoutsaki Brown University,Nediyana Daskalova Brown University, Patsorn Sangkloy Georgia Institute of Technology,Jeff Huang Brown University, James Laskey Brown University, James Hays Georgia Institute of Tech

Related Articles

Wire The Programmer To Prevent Buggy Code 

Does Syntax Coloring Work? 

Tracking.js Computer Vision In The Browser 

$99 Eye Tracker With SDK 

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, FacebookGoogle+ or Linkedin

 

Banner


PHP 8.4 Adds Property Hooks
26/11/2024

PHP 8.4 is available with improvements including property hooks, asymmetric visibility, and an updated DOM API.



Hour Of Code 2024 Is About To Kick Off
04/12/2024

This year the event that aims to provide a coding experience for all school students and anyone else who wants to join in runs between December 9th and 15th and includes new activities. Let's find out [ ... ]


More News

 

espbook

 

Comments




or email your comment to: comments@i-programmer.info

 

Last Updated ( Wednesday, 01 June 2016 )