How to Build Real-Time Eye Tracking in the Browser
Blog post from Roboflow
HueVision is a browser-based project that facilitates real-time eye tracking using commodity webcams and modern vision tools like MediaPipe FaceMesh and TensorFlow.js. Aimed at enabling fast and reproducible experiments for UX research, human-computer interaction, and rapid prototyping, HueVision operates entirely on the client side to preserve privacy, as no video data leaves the user's machine. The system detects facial landmarks, extracts eye regions, and predicts gaze points in real-time, visualizing user attention through a heatmap or reticle overlay. By leveraging dense landmark models and simple learning algorithms, HueVision makes it possible to conduct lightweight usability tests, explore gaze-aware UI elements, and experiment with accessibility features directly in the browser, without the need for native applications or specialized hardware. While it is not a replacement for research-grade equipment, it provides a practical and privacy-friendly approach to understanding user attention and prototyping gaze-based interactions.