HAAR.js

Further development on this project has stopped!!

This project has stopped, no new features are added or updated. However the functionality works as stated in this document and the API reference. Further development has moved to the FILTER.js project, for Image Processing and Computer Vision, which includes a new HaarDetector plugin which can be seen as the continuation of this project.

Feature Detection Library for JavaScript (uses HTML5 canvas on browser and Canvas package on Node)

Based on Viola-Jones Feature Detection Algorithm using Haar Cascades and improvement Viola-Jones-Lienhart et al Feature Detection Algorithm

This is a port of OpenCV C++ Haar Detection (actually a port of JViolaJones which is a port of OpenCV for Java) to JavaScript and Node

Light-weight (~10kB minified, ~5kB gzipped).

Contents

• Live Playground Examples
• How to Use
• API Reference
• Haar Cascades
• Usage Ideas
• Todo
• Changelog
• Credits

Live Examples

• Interactive Face Detection
• Many Faces Detection
• Interactive Mouth Detection

How To use

You can use the existing openCV cascades to build your detectors.

To do this just transform the opencv xml file to javascript or json format using the haartojs (php) tool (in cascades folder)

examples:

to use opencv's haarcascades_frontalface_alt.xml in javascript do:

haartojs haarcascades_frontalface_alt.xml > haarcascades_frontalface_alt.js

this creates a javascript file: haarcascades_frontalface_alt.js which you can include in your html file or node file

the variable to use in javascript is similarly
haarcascades_frontalface_alt (both in browser and node)

to transform a cascade xml file to json format do:

haartojson haarcascades_frontalface_alt.xml > haarcascades_frontalface_alt.json

The structure of the .js and .json formats is exactly the same, so you can interchange between the two freely

IMPORTANT : The conversion process has changed from previous versions (both in the CLI script and in HAAR.js)

The changes are :

• the feature rectangle coordinates are stored in an array instead of an object hash
• the tilted flag/attribute for rectangles (Rainer Lienhart et al.) is incorporated in the conversion

so make sure to re-convert your .js xml cascades for this version of HAAR.js

The tilted attribute for rectangles (Rainer Lienhart et al. extension of the algorithm) describes tilted (rotated 45 deg) features (rectangles) in order to detect more features at rotated positions

The tilted flag is added in the .js or .json files (as tilt ), (see also js-objectdetect , which uses the Lienhart extension of the algorithm)

This is now incorporated into HAAR.js and this increases the compatibility with the OpenCV cascades (when they use tilted features, eg mouth cascade)

HAAR.js works both in the browser and in Node.js (supporting parallel computations with Parallel.js)

NOTE HAAR.js (0.4.4+) (and the generated cascades) support umd-style generic loading capability for: commonjs / node , amd , browsers script tags

Runing inside the browser

Loading wth script tags You can run the example face.html or mouth.html inside your browser

Running inside node

For running, the package have a dependency on canvas You can find an example inside examples/nodes.js Valid Output

node examples/node.js 
processing the picture
[{"x":102.5,"y":105.5,"width":160.66666666666666,"height":160.66666666666666}]

To work properly, canvas need some system depencencies. You can find instruction on https://github.com/LearnBoost/node-canvas/wiki For example for Ubuntu :

sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev

Loading with requirejs

As a third option, you can load the library with requireJS, both on the browser on with node. There is an example of loading with RequireJS inside node in examples/require.js. The configuration would be the same inside a browser

Supporting parallel computation

The parallel.js library is included in this repository, see the face.html example for how to use. In most cases using parallel computation (if supported) can be much faster (eg eye.html example)

Where to find Haar Cascades xml files to use for feature detection

• OpenCV
• This resource
• search the web :)
• Train your own with a little extra help here and here
• A haarcascade for eyes contributed by Mar Canet demo here

Usage Ideas

• SmileDetectJS
• ObjectDetect (some common ideas with HAAR.js are used with extra functionality like object tracking)

TODO

• optimize detector for real-time usage on browsers (eg. -> https://github.com/liuliu/ccv) [DONE use parallel.js]
• add selection option, detection is confined to that selection (eg detect nose while face already detected) [DONE]
• check if some operations can use fixed-point arithmetic, or other micro-optimizations [DONE where applicable]
• keep up with the changes in openCV cascades xml format (will try)
• add some real performance tests (anyone interested??)

URL Nikos Web Development
URL Haar.js blog post
URL WorkingClassCode