"WebGazer.js" review that can implement "viewpoint tracking function" on website with free & one script
When creating a website, it is useful to have information about what kind of "viewpoint" the viewer is doing to decide the layout of contents such as characters, links, and images. By using the free open source software "WebGazer.js", you can implement the tracking function of viewpoint movement on your own website with a single script.
WebGazer.js: Democratizing Webcam Eye Tracking on the Browser
You can see how you are using WebGazer.js by watching the following movie.
For the description in the script tag of the body part, the code exemplified on the official website was used as it is.
The actual HTML file looks something like this. This time, I prepared an HTML file that does not display anything other than WebGazer.js.
webgazer.params.showGazeDot = true;
Then publish the HTML file on a web server such as Apache or Nginx. This time I used Docker's Nginx container as the web server.
When you access the web server from the browser, you are asked for permission to use the camera, so click "Allow".
After a while, a dot projected for face analysis and a red dot indicating where the viewpoint is are displayed in the upper left.
The dot is actually displayed on the face.
The red dot moves as you move your viewpoint. However, since the calibration function etc. are not implemented this time, the accuracy is low. However, we were able to implement a viewpoint tracking feature on our website by adding a simple script and a simple description to the HTML.
Calibration function is implemented in WebGazer.jsDemo siteOr…
Move the viewpoint and hit the ballDemo siteYou can check the operation with.
The browsers that WebGazer.js supports are Google Chrome, Microsoft Edge, Opera, Firefox, and Safari, and the source code is published on GitHub.
GitHub-brownhci/WebGazer: WebGazer.js: Scalable Webcam EyeTracking Using User Interactions