Through various experimentation, I have successfully integrated and utilized tracker.js in my Ionic 2 application with typescript 2.2.1.
The challenge at hand was to identify faces within a photo selected by the user before it gets uploaded.
Below are the steps I took to solve this issue:
1st Step: Install tracking.js using npm
npm install tracking
2nd Step: Import the tracking.js file into your Ionic page.
Note: Locate the tracking.js file within the node_modules/tracking folder. Then, use the file path but exclude the ".js" extension from the end.
//node_modules/tracking/build/tracking.js
import 'tracking/build/tracking';
3rd Step: Import the face.js Classifier file after importing 'tracking/build/tracking' and declare necessary variables.
//node_modules/tracking/build/tracking.js
import 'tracking/build/tracking';
//node_modules/tracking/build/data/face.js
import 'tracking/build/data/face';
//Ensure these variables are declared for visibility in your code
declare var window: any;
declare var tracking: any;
4th Step: Utilize the tracker.js API in your code (further optimization is possible)
//Preferably run this after the view has fully loaded
ionViewDidLoad(){
//Initialize the tracking object with parameters to track faces only
var tracker = new tracking.ObjectTracker('face');
//Create an image object
var img = new Image();
/** It is crucial to set the height and width
as the image may be too small or large for
your step size, affecting face detection.
I recommend testing this in an HTML file first
to determine the suitable size for your scenario **/
img.width = 200;
img.height = 200;
//Set cross-origin attribute even when accessing a local file
img.crossOrigin = '*';
/**
Set the onload callback to ensure the image
is loaded before further processing
**/
img.onload = function() {
console.log('------------IMAGE LOADED------------');
/**
Determine the optimal value based on image size.
Too small might cause delays or app crashes,
while too big could lead to missing smaller faces.
**/
tracker.setStepSize(1.7); //Default size according to docs is 1.7
//Pass the loaded image object and tracker instance to tracker.track()
var task = tracking.track(img, tracker);
//Detection of faces might take some time
tracker.on('track', function(event) {
//An empty event.data implies no faces were found
console.log( JSON.stringify(event.data) );
//Iterate through each detected face
event.data.forEach(function(rect) {
//Coordinates to render a rectangle on a canvas
console.log(JSON.stringify(rect));
console.log('-------------FOUND SOME FACES----------------------');
//Process the data as required
});
//Stop tracking once at least one face is identified
task.stop();
});
}
//Define the image path to track
img.src = 'assets/img/facetest.jpg';
}
You can also detect eyes and mouth by importing eye.js and mouth.js Classifier files
//node_modules/tracking/build/data/eye.js
import 'tracking/build/data/eye';
//node_modules/tracking/build/data/mouth.js
import 'tracking/build/data/mouth';
If you wish to track all faces, eyes, and mouths, utilize an array of classifier names as parameters after importing all Classifier files
var tracker = new tracking.ObjectTracker(['face','eye','mouth']);