Webcam Eye Tracking System

Parameters & Settings

Eye Width Ratio

0.20

Eye Height Ratio

0.10

Left Eye Darkness Threshold

100

Right Eye Darkness Threshold

100

Biometric Sound Feedback

Mute / Unmute Feedback

Generates a real-time synthesized bio-acoustic sweep when a blink is registered or tracking moves.

Demo Simulation Active

Grant webcam permissions to utilize local pupil analysis, or observe the automated sandbox tracking algorithm.

Eye Tracking Results

Left Eye Metrics

Left Eye Position: (0, 0)

Left Eye Blink: false

Right Eye Metrics

Right Eye Position: (0, 0)

Right Eye Blink: false

Gaze Directional Vector

Gaze Direction: (0, 0)

System Architecture

Core Model: BlazeFace TF.js

Processing Context: Sandbox

FPS / Refresh rate: 0 ms

Overview

The Webcam Eye Tracking System is an open-source, client-side biometric analyzer designed to identify, monitor, and estimate human gaze orientation using basic hardware devices. Powered by the high-performance TensorFlow.js environment, the utility coordinates with lightweight convolutional structures to run complex landmark identification steps inside secure client environments.

By prioritizing privacy and technical simplicity, this system eliminates the need for remote cloud processing engines. Instead, local array pipelines compute exact coordinate offsets in real time, making this an accessible framework for digital accessibility models, cognitive experiments, or hands-free hardware commands.

How to Use

Select Control Mode: Fine-tune the "Eye Width" and "Eye Height" parameters to outline the exact box containing your pupil.
Adjust Darkness Threshold: Calibrate the threshold value. If your background is dark, a lower threshold will make sure you don't detect shadows as pupils.
Initiate Webcam: Click the "Start Live Webcam" button. Confirm the browser permission notice to grant access.
Biometric Analysis: Align your face inside the dynamic wireframe. Real-time updates reflect coordinate streams and blinking anomalies instantly.
Sound Optimization: Check the sound feedback indicator to generate soundscapes during blinking milestones or gaze changes.

Technical Details

This application uses the TensorFlow.js platform alongside the BlazeFace model framework, optimized for rapid execution within browser processes. The primary architectural flow includes:

Landmark Mapping: Extracting exact geometric clusters from bounding boxes corresponding to standard facial assets (eyes, nose, mouth).
Centroid Logic: Slicing sub-arrays from regions specified by EYE_WIDTH_RATIO and EYE_HEIGHT_RATIO. Grayscale thresholds evaluate coordinate values to determine pupil focus centers.
Low Latency Paint Loops: Moving operations into the browser's requestAnimationFrame system prevents UI lag, maintaining responsive interactions.

Future Directions

Upcoming releases aim to incorporate 12-point iris tracking models to improve detection accuracy under poor lighting. In addition, integration with external system outputs will support assistive mouse events for accessibility frameworks.

We are also researching a deep learning gaze model calibration panel to help filter out glasses glare and ambient room reflections.

Raw Resource Directory

TensorFlow.js BlazeFace Repository - Official source code, benchmarks, and architectural documentation for the face landmark detection system.
TensorFlow.js Home - Web-based machine learning documentation, performance guidelines, and guides on WebGL execution contexts.
BioniChaos Hub - Additional biometric, physical simulation, and computer vision resources.