Webgazer.tsEye tracking for the web

Quick Start ​

npm install @webgazer-ts/core
# or with React
npm install @webgazer-ts/react

pnpm add @webgazer-ts/core
# or with React
pnpm add @webgazer-ts/react

yarn add @webgazer-ts/core
# or with React
yarn add @webgazer-ts/react

Basic Usage ​

import webgazer from '@webgazer-ts/core';

// Start eye tracking
await webgazer
  .setTracker('TFFacemesh')
  .setRegression('ridge')
  .begin();

// Show video preview
webgazer.showVideoPreview(true);

// Listen to gaze predictions
webgazer.setGazeListener((data, timestamp) => {
  console.log(`Gaze at (${data.x}, ${data.y})`);
});

import { useWebgazer } from '@webgazer-ts/react';

function App() {
  const { gazeData, start, isRunning } = useWebgazer({
    autoStart: true,
    showVideoPreview: true
  });

  return (
    <div>
      <h1>Gaze Tracker</h1>
      {gazeData && (
        <p>Looking at: ({gazeData.x}, {gazeData.y})</p>
      )}
      <button onClick={start}>
        {isRunning ? 'Running' : 'Start'}
      </button>
    </div>
  );
}

Why Webgazer.ts? ​

🔄 Backward Compatible ​

Complete API compatibility with Webgazer.js. All your existing code works without changes:

// This is valid Webgazer.js code that works in Webgazer.ts
webgazer.setRegression('ridge')
  .setTracker('TFFacemesh')
  .setGazeListener((data) => {
    console.log(data);
  })
  .begin();

⚡ Modern Development Experience ​

Built with modern tools and best practices:

• TypeScript - Full type safety and IntelliSense
• ES Modules - Tree-shaking and optimized builds
• Vite - Lightning-fast dev server and builds
• Monorepo - Organized with pnpm workspaces

📦 Two Packages, One Goal ​

@webgazer-ts/core - Pure JavaScript/TypeScript implementation

• Zero framework dependencies
• Works with any frontend stack
• Full control over initialization and lifecycle

@webgazer-ts/react - React hooks and components

• 7 powerful hooks for every use case
• 4 pre-built UI components
• Automatic cleanup and lifecycle management

Use Cases ​

🎓 Academic Research ​

• User attention studies
• Reading behavior analysis
• Accessibility research
• HCI experiments

💼 UX Research ​

• Website usability testing
• A/B testing with gaze data
• Heatmap analysis
• User engagement metrics

♿ Accessibility ​

• Gaze-based navigation
• Assistive technology integration
• Eye-controlled interfaces
• Accessibility testing

🎮 Interactive Applications ​

• Gaze-aware games
• Attention-based UI
• Interactive storytelling
• Adaptive interfaces

Performance Metrics ​

Browser Support ​

• ✅ Chrome/Edge 90+
• ✅ Firefox 88+
• ✅ Safari 15+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Requires WebRTC support and camera permissions.

Credits ​

Webgazer.ts is a TypeScript rewrite of Webgazer.js by the Brown HCI Lab.

Original Authors:

• Alexandra Papoutsaki
• James Laskey
• Jeff Huang

TypeScript Rewrite:

• John Adrian Cruz

License ​

Licensed under GPL-3.0-or-later

For academic research use. See LICENSE for details.