A naukri.com initiative
Dev
3w
35
Image Credit: Dev
Building a realtime eye tracking experience with Supabase and WebGazer.js
- An experimental project, called Gaze into the Abyss, was created during the Supabase Launch Week Hackathon using Supabase, React, WebGazer.js, Motion One, anime.js, and Stable Audio
- Realtime capabilities from Supabase were used to create a simple visual implementation that validates it is possible to use just the realtime features without any database tables
- The project visualized Nietzsche's quote about the abyss by staring into a dark screen and having something stare back at you
- WebGazer.js, a project that works surprisingly well, was used to create the eye tracking capabilities in one function within a useEffect hook
- The eye-tracking capabilities were enhanced with blink detection, which took some trial and error to accomplish, as there are no given blink detection capabilities
- An SVG implementation for the eye was created and linked up with eye tracking capabilities to achieve a stylized appearance
- Some finishing touches, such as nice intro screen, background music, dark, blurred circle, and animation SVG filter stuff were added to the project
- The project is available to check out, and issues may occur if a lot of people are using it, as it requires multiple devices and webcams to test it properly
Read Full Article
2 Likes
For uninterrupted reading, download the app