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?