I am trying to import the trackingjs library (https://www.npmjs.com/package/tracking) into my ionic2 project.
By following the documentation (https://ionicframework.com/docs/v2/resources/third-party-libs/) I can import the lodash library and use it.
But with tracking js all I get is an empty object (tracking === {})
import tracking from 'tracking/build/tracking';
I installed the tracking module with npm and then installed the corresponding types (https://www.npmjs.com/package/@types/tracking). I can see the code from the module in my main.js file when using ionic serve so it seems to be included correctly, but I can't get it to work.
Did I miss anything obvious or is there something more to do with that library? Any help will be appreciated.
Try this.
import * as tracking from 'tracking/build/tracking';
After much trial and error I have managed to import and use tracker.js into my Ionic 2 app with typescript 2.2.1.
My problem was to detect the faces from a user selected photo, before it is uploaded.
Here are my solution steps
1st Install tracking.js via npm
npm install tracking
2nd import the tracking.js file into your ionic page.
Note: Check the node_modules/tracking folder and find out where tracking.js is stored. Then use the file path but remove the ".js"
at the end
//node_modules/tracking/build/tracking.js
import 'tracking/build/tracking';
3rd import the face.js Classifier file after the import 'tracking/build/tracking' line and declare the necessary variables
//node_modules/tracking/build/tracking.js
import 'tracking/build/tracking';
//node_modules/tracking/build/data/face.js
import 'tracking/build/data/face';
//Declare this variables so they are visible in your code
declare var window: any;
declare var tracking: any;
4th use the tracker.js api in your code (this can still be optimized)
//I prefer to run it after the view has completely loaded
ionViewDidLoad(){
//Initialize the tracking object with parameters to track face only
var tracker = new tracking.ObjectTracker('face');
//Create an img object
var img = new Image();
/** IT IS IMPORTANT TO SET THE HEIGHT AND WIDTH
BECAUSE THE IMAGE MIGHT BE TOO SMALL OR TOO BIG FOR
YOUR STEPSIZE AND NO FACES WILL BE DETECTED
I SUGGEST YOU TEST THIS OUT FIRST IN A BROWSER HTML FILE
TO GET THE CORRECT SIZE FOR YOUR USECASE **/
img.width = 200;
img.height = 200;
//I don't know why I have to set this since I am accessing a local file.
img.crossOrigin = '*';
/**
Set the onload callback to make sure the image
is loaded before we do anything to it
**/
img.onload = function() {
console.log('------------IMAGE LOADED------------');
/**
You need to find out what's the best value base on your image size.
Too small and it might take forever and crash the app.
Too big and you might miss detecting the small faces.
**/
tracker.setStepSize(1.7); //Default size based on docs is 1.7
//Pass the loaded img object and instance of the tracker object to tracker.track()
var task = tracking.track(img, tracker);
//It might take a millisecond or a second before it can find a face
tracker.on('track', function(event) {
//If the event.data is empty it means that there are no faces found
console.log( JSON.stringify(event.data) );
//Loop Through each faces
event.data.forEach(function(rect) {
//Coordinates on where to render the a rectangle in a canvas
console.log(JSON.stringify(rect));
console.log('-------------FOUND SOME FACES----------------------');
//DO WHAT EVER YOU LIKE WITH THE DATA
});
//Stop the tracking since I only need to check if there is at least one face
task.stop();
});
}
//Set the image path you want to track
img.src = 'assets/img/facetest.jpg';
}
You can also detect eyes and mouth by importing the eye.js and mouth.js Classifiers file
//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 want to track all faces, eyes, and mouth then use an array of classifier name as parameter after importing all the Classifier files
var tracker = new tracking.ObjectTracker(['face','eye','mouth']);
import 'tracking/build/tracking.js';
import 'tracking/build/data/face.js';
const global = <any>window;
this.tracker = new global.tracking.ObjectTracker('face');
Seems todo the trick, not in ionic but another Angular 4 project.