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

Utilities

Features detection

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

Convolution

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

tracking.Image.computeIntegralImage(
pixels, width, height,
opt_integralImage,opt_integralImageSquare,opt_tiltedIntegralImage,
opt_integralImageSobel
);

Sobel

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

Viola-Jones

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

Conclusion

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