Top 5 : Best face tracking and recognition related javascript libraries

Top 5 : Best face tracking and recognition related javascript libraries

5. CCV.js and Face detection

Github

A jQuery/Zepto plugin to detect faces on images, videos and canvases to get theirs coordinates.

Note: Face detection is based in the Face detection algorithm (jQuery only wraps the implementation of CCV.js) go to Liu Liu with CCV library which can be retrieved here from the official repository and the official demo of ccv.js here.

To implement Face detection in your project, download the last release manually or install it with Bower using :

bower install jquery.facedetection

Or install it with NPM.

npm install jquery.facedetection

Then include jQuery and the plugin.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="path/to/dist/jquery.facedetection.min.js"></script>

Set a picture with some faces in your HTML page.

<img id="picture" src="img/face.jpg">
Apply the plugin to this image and get the face coordinates.

<script>
   $('#picture').faceDetection({
     complete: function (faces) { 
         console.log(faces);     
     }  
    });
</script> 

Facedetection with jQuery

4. Headtrackr

Headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.

However Headtrackr always detects one face even though there may be more than one in the frame.

The following video shows a working demo.

3. clmtrackr

clmtrackr is a javascript library for fitting facial models to faces in videos or images. It currently is an implementation of constrained local models fitted by regularized landmark mean-shift, as described in Jason M. Saragih's paper. clmtrackr tracks a face and outputs the coordinate positions of the face model as an array, following the numbering of the model below:

Clmtrackr facial features

However clmtrackr always detects one face even though there may be more than one in the frame too. For tracking in video, it is recommended to use a browser with WebGL support, though the library should work on any modern browser. For some more information about Constrained Local Models, take a look at Xiaoguang Yan's excellent tutorial, which was of great help in implementing this library.

The following video shows a working demo.

The friendly API of this plugin allows to do any kind of weird things :

Sean connery aproves this plugin :

Face substituion with clmtrackr

2. ObjectDetect

js-objectdetect is a javascript library for real-time object detection. This library is based on the work of Paul Viola and Rainer Lienhart and compatible to stump based HAAR cascade classifiers used by the OpenCV object detector. Watch this video for a short demonstration. All modern browsers including IE 9+, Safari and Opera Mobile are supported.

js-objectdetect can be used for object detection, tracking and, in combination with mordern HTML5 features such as WebRTC, for all sorts of augmented reality applications that run in the browser without any plugin.

gesture input Rotating a 3D object via hand gesture

gesture scroll

Scrolling a website via hand gesture

glasses

Trying out various sunglasses

1. Tracking.js

Github

The tracking.js library (A modern approach for Computer Vision on the web) brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, tracking.js enables you to do real-time color tracking, face detection and much more. And all that with a lightweight core (7 KB) and intuitive interface.

Face recognition with tracking.js 

And the color tracking working on a video tag.

Video color tracking.js

The face recognition is really interesting and awesome, isn't ? Have fun

Carlos Delgado

About the author

Carlos Delgado

Interested in programming since he was 14 years old, Carlos is the founder and author of most of the articles at Our Code World. He is currently studying systems engineering at the UDI university in Colombia.

This could interest you
Become a more social person