Angular JS and Tracking.js face detection

1.4k Views Asked by At

I am implementing one MEAN app and I would like to detect the faces from a photo by using this app. So externally, I tried and successfully implemented face detection by using tracking.js. Now I would like to integrate that implementation in MEAN app. So let me know how to inject non angular dependencies to a controller because I need to use tracking.js here.

Here's some of my code.

main module (mainApp.js):

 var fbApp;
 (function(){
fbApp = angular.module("fbApp",['angularFileUpload','ngRoute'])
.config(function($routeProvider, $locationProvider) {
          $routeProvider
           .when('/', {
            templateUrl: '../views/login/login.html',
            controller: 'LoginController',
          })
          .when('/home', {
                templateUrl: '../views/home/home.html',
                controller: 'HomeController',
          });
    });
})();

I injected FileUploader dependency here but that is an angular module, I am little bit confused with tracking.js file's dependency.

In the same app, I detected face without using angularjs' controller, But that time, the id of the image was static while now it is dynamic.

My main controller:

 (function(){

     fbApp.controller('HomeController',
                      ['$scope','$location','$routeParams', 
                       'HomeService','FileUploader',
                      function ($scope,$location,
                                $routeParams,HomeService,
                                 FileUploader){

          // here are my functions which controls several home contents
          $scope.getFace = function(feed){
             here I need to get tracking.js help so I am little bit of doubt because of lack of knowledge.
          }


    }
  ]);

 })();

Home service is a service which I used for call APIs, so I just want to use the tracking.js dependency and use the following logic in the home controller

function getFace(){

  var img = document.getElementById('feed_image'+id);

  var tracker = new tracking.ObjectTracker(['face']);
  tracker.setStepSize(1.5);

  tracking.track('#feed_image'+id, tracker);

  tracker.on('track', function(event) {
    console.log(event);
    event.data.forEach(function(rect) {
      window.plot(rect.x, rect.y, rect.width, rect.height);
    });
  });

  window.plot = function(x, y, w, h) {
    var rect = document.createElement('div');
    document.querySelector('.card_view_body ').appendChild(rect);
    rect.classList.add('rect');
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
  };
 }

The home.html phot container div:

      <div ng-repeat="feed in userFeeds">
            <div class="card_view">
                <div class="card_view_head clearfix">
                    <img class="img-circle" src="{{feed.feedOwnerPic}}" alt="" />
                    <h4>{{feed.feedOwnerName}}</h4>
                </div>
                <div class="card_view_body">
                       <!-- <img id="feed_image}" src="{{feed.feedPhotoUrl}}" alt="Select a Photo" onclick="getFace()" class="img-responsive">-->
                       <img id="{{feed._id}}" src="{{feed.feedPhotoUrl}}" alt="Select a Photo" ng-click="getFace(feed)" class="img-responsive">
                    <div class="form-group">
                        <p>{{feed.feedDescription}}</p>
                    </div>
                </div>
            </div>
        </div>

I added all angular dependencies and tracking.min.js related to this DOM to the main view, that's how I got face detection for the single image.

Please look at the img tag's id, which is dynamic, previously it was static because I tried it for 1 image and kept getFace() method, which is in another js file.

I am a newbie in javascript and angular js.

I Am using angular 1.6 version.

How to use tracking.js with angularjs?

0

There are 0 best solutions below