Computer Vision on the Web with TrackingJS

What Exactly Is TrackingJs?

Types of Trackers

Color Tracker

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
tracking.ColorTracker.registerColor('green', function(r, g, b) {
if (r == 0 && g == 250 && b == 0) {
return true;
return false;
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','green']);

Object Tracker


Features detection

var corners = tracking.Fast.findCorners(pixels, width, height);


tracking.Image.horizontalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.verticalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.separableConvolve(pixels, width, height, horizWeights, vertWeights, opaque);

Gray Scale

tracking.Image.grayscale(pixels, width, height, fillRGBA);

Image Blur

tracking.Image.blur(pixels, width, height, diameter);

Integral Image

pixels, width, height,


tracking.Image.sobel(pixels, width, height);


tracking.ViolaJones.detect(pixels, width, height, initialScale, scaleFactor, stepSize, edgesDensity, classifier);

Web components

bower install tracking-elements --save

Color Element

<!-- detect colors into an image -->
<img is="image-color-tracking" target="magenta cyan yellow" />
<canvas is="canvas-color-tracking" target="magenta cyan yellow"></canvas>
<video is="video-color-tracking" target="magenta cyan yellow"></video>

Object Element


Original Source



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store