Back to projects

Project case study

Real-Time Eye Tracking

Approximate webcam gaze estimation with a session heatmap, in the browser.

My roleDeveloper
Technologies used
  • MediaPipe Tasks Vision
  • Canvas API
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Jest
Open demo
Eye Tracking UX Intelligence dashboard with session metrics, heatmap surface and controls, before the camera starts.
eye-tracking-three.vercel.app / Home page

Problem

Dedicated eye trackers are expensive for small studies.

A webcam estimate has to be clear about its precision limit.

Solution

Architecture at a glance
  • Webcam frames, processed in the browser; up to 5,000 points per session.
Technical decisions
  1. Face Landmarker on the client, with a loop capped at 80 ms per sample.
  2. Gaze from the iris-to-corner ratio, averaged across both eyes with exponential smoothing.
  3. 64×36 heatmap with Gaussian decay and a dominant area on a 3×3 grid.

Result

An exploratory UX tool that is clear about not being a calibrated tracker.

  • In-browser computer vision
  • Canvas visualisation
  • Data export

Learnings and limitations

  • There is no calibration; precision is approximate.
  • The heatmap sits on an abstract surface, not over a real page.
  • Requires a camera, HTTPS and an external CDN.

More about the project

Full case details, collapsed for optional reading.

Full description

Approximate gaze estimation from the webcam, accumulated into a heatmap for UX research sessions, all in the browser.

The MediaPipe Face Landmarker finds the irises and eye corners; their ratio, averaged across both eyes and smoothed, becomes the gaze position.

A 64×36-cell heatmap accumulates points with confidence-weighted Gaussian decay, and the session exports JSON, CSV and PNG.

There is no calibration: the mapping uses fixed constants, and the project itself warns it has no scientific precision.

Next.js and React with MediaPipe Tasks Vision and Canvas 2D, Jest tests; model and WASM from a CDN.

Features and highlights
  • Start, pause, stop and reset the session.
  • Accumulated heatmap on Canvas.
  • Time, point and stability metrics.
  • JSON, CSV and PNG export.
  • Computes gaze from the ratio between irises and eye corners.
  • Accumulates the heatmap with confidence-weighted Gaussian decay.
  • Exports the session as JSON, CSV and PNG.
Technical architecture and data

Technical architecture

How the case was designed as a product

Approximate webcam gaze estimation with a session heatmap, in the browser.

MediaPipe Tasks VisionAICanvas APIWeb platformNext.jsFrameworkReactFrameworkTypeScriptLanguageTailwind CSSFrameworkJestFramework

Data used

  • Webcam frames, processed in the browser; up to 5,000 points per session.

Core components

  • Start, pause, stop and reset the session.
  • Accumulated heatmap on Canvas.
  • Time, point and stability metrics.
  • JSON, CSV and PNG export.

Technical decisions

  • In-browser computer vision
  • Canvas visualisation
  • Data export

Trade-offs

  • There is no calibration; precision is approximate.
  • The heatmap sits on an abstract surface, not over a real page.
  • Requires a camera, HTTPS and an external CDN.
How to run
  1. The repository is private; the steps below apply to anyone with access.
  2. npm install
  3. npm run dev and open http://127.0.0.1:3000
  4. npm run lint, npm run type-check and npm run test
Additional media
Project demonstration video.
Credits

Developed by Matheus Siqueira - https://www.matheusdev.tech

Next projectAd Performance Intelligence

Next.js BI dashboard comparing Google Ads and Meta Ads on simulated data: KPIs, funnel and ROAS.

View full case