Gaze Tracker sample project
Gaze Tracker sample uses the VisageSDK API to implement a simple application which demonstrates screen space gaze tracking.
Installing and running the project
The project must be installed on a web server in order to run (it can not run from a local disk). For a quick trial from Visage Technologies web server, click
here and choose Gaze Tracker.
To install the application on your own web server, upload folders lib and Samples to your web server. To run the application access the Samples/GazeTracker/gazeTracker.html page via a web browser.
Application must be licensed in order to function. Licensing is based on License Key Files. To obtain the License Key File:
- Contact your Visage Technologies contact person in order to obtain a license key.
- Copy the obtained license key file into your application folder (e.g. Samples/GazeTracker).
- Edit GazeTracker/GazeTracker.html. Uncomment the line VisageModule.initializeLicenseManager("...") and replace the "xxx...xxx.vlc" with the name of your license key file.
- NOTE: License Key File must be preloaded before registration calling VisageModule.FS_createPreloadedFile() function.
An example of how this is done in the sample:
VisageModule.FS_createPreloadedFile('/', licenseName, licenseURL, true, false, function(){ }, function(){ alert("Loading License Failed!") });
For further information please read licensing section of the documentation.
Using the sample application
- Running the sample requires a recent browser.
- The SDK needs to download its data files before using the application.
- Allow the application to access your camera by choosing "Allow" in the browser's pop-up bar.
- Look straight at the camera. Tracking will start.
- Once the tracker has initialized you can start calibration phase of screen space gaze estimation.
- In the calibration phase, application displays a calibration point as the red dot. By clicking on the dot, position of the dot will change.
- After all calibration points are clicked, the gaze tracking system is calibrated and the estimation phase starts. Calibration continues optionaly, so that the results can be improved upon.
- In the estimation phase, the application draws the estimated gaze location as a blue dot on screen.
Implementation overview
Gaze Tracker is implemented in HTML and JavaScript using the VisageSDK API for face tracking and screen space gaze estimation, getUserMedia API to access camera and native canvas methods for rendering.
Face tracking results are updated using requestAnimationFrame API.
Browser compatibility
Gaze Tracker sample is tested on the recent browsers on Windows, Mac, Android and Iphone platforms.
Results are represent in the following table (NOTE: Application is not adapted to mobile devices.).
|
|
|
|
|
|
|
78 |
71 |
65 |
44 |
12 |
|
78 |
68 |
55 |
42 |
-- |
|
-- |
-- |
-- |
-- |
12.1 |