Importing trackingjs as third party library in Ion

Question

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.

Answer 1

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.

Answer 2

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']);

Answer 3

Try this.

import * as tracking from 'tracking/build/tracking';