whatisgithub

What is tracking.js?

eduardolundgren/tracking.js — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

A small JavaScript library that adds real-time face detection and color tracking to web pages using the browser's camera, no server or plugins needed, at about 7 kilobytes.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

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.

What is it built with?

JavaScriptHTML5Canvas API

How does it compare?

eduardolundgren/tracking.jspeachananr/onepage-scrollmobz/elasticsearch-head
Stars9,4789,4769,483
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasymoderate
Complexity2/52/53/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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?

Frequently asked questions

What is tracking.js?

A small JavaScript library that adds real-time face detection and color tracking to web pages using the browser's camera, no server or plugins needed, at about 7 kilobytes.

What language is tracking.js written in?

Mainly JavaScript. The stack also includes JavaScript, HTML5, Canvas API.

What license does tracking.js use?

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

How hard is tracking.js to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is tracking.js for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.