eduardolundgren/tracking.js

★ 9,478JavaScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((trackingjs))
    What it does
      Face detection
      Color tracking
      Browser computer vision
    Features
      Camera feed input
      Canvas support
      Image analysis tools
    Tech Stack
      JavaScript
      HTML5 Canvas
      getUserMedia
    Use Cases
      Gesture controls
      Interactive web apps
      Real-time detection

mindmap root((trackingjs)) What it does Face detection Color tracking Browser computer vision Features Camera feed input Canvas support Image analysis tools Tech Stack JavaScript HTML5 Canvas getUserMedia Use Cases Gesture controls Interactive web apps Real-time detection

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a gesture-controlled web interface that responds when a user waves a colored object in front of their webcam.

USE CASE 2

Add real-time face detection to a webpage so the page reacts or animates when someone looks at the camera.

USE CASE 3

Create a drawing app where a user moves a colored pen in front of the webcam to draw on an HTML canvas.

Tech stack

JavaScriptHTML5Canvas API

Getting it running

Difficulty · easy Time to first run · 30min

Live camera features require getUserMedia browser support, which typically needs HTTPS and may not work in all browsers.

BSD license, free to use for any purpose including commercial projects, with attribution.

In plain English

Tracking.js is a JavaScript library that brings computer vision capabilities into web browsers. Computer vision is the field of software that lets a program analyze and interpret what it sees in an image or video, and this library makes some of those techniques available directly in a webpage without requiring a server or any special plugins. The two main features are color tracking and object tracking. Color tracking watches a video feed and identifies areas that match a specific color, which can be used to build things like gesture-controlled interfaces where you wave a colored object to trigger actions. Object tracking uses a technique called Viola-Jones to detect faces in real-time video from a webcam. The library core is about 7 kilobytes, which is small enough to include on a webpage without meaningfully slowing it down. It works by attaching to standard HTML elements: canvas elements for static images, video elements for live camera feeds, and img elements for photos. The library reads pixel data from those elements and runs its detection algorithms against them. Browser support covers Internet Explorer 9 and later, plus current versions of Chrome, Firefox, Opera, and Safari, though live camera support depends on a browser feature (getUserMedia) with slightly narrower availability. The library can be installed through npm or Bower, or downloaded as a zip file. The README includes links to interactive demo pages showing face detection and color-based drawing applications. There is also a set of lower-level utilities available for developers who want to work directly with image processing operations like edge detection, blurring, and feature detection. The project appears to have been active primarily between 2014 and 2017, and the README links to an open issue that likely tracks the project's current maintenance status. It is released under a BSD license.

Copy-paste prompts

Prompt 1

Using tracking.js, write a webpage that detects my face via webcam and draws a colored box around it in real time.

Prompt 2

Show me how to use tracking.js color tracking to move a game character by waving a red object in front of the camera.

Prompt 3

Write a tracking.js example that watches the webcam feed for a blue color and logs its x/y position coordinates every frame.

Prompt 4

How do I install tracking.js via npm and attach it to an HTML canvas element to do real-time color tracking?

Open on GitHub → Explain another repo

← eduardolundgren on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.