Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CardFace Demo
<div class="container" ng-app="app" ng-controller="ctrl">
<br>
<div class="row">
<h1>CardFace Demo</h1>
</div>
<div class="row">
<div class="col-sm-8">
<div id="video-block" class="col-sm-12">
<video id="video" width="700" height="600" preload autoplay loop muted></video>
<canvas id="canvas" width="700" height="600"></canvas>
</div>
</div>
<div class="col-sm-4">
<div class="container-fluid ">
<h5>Found users: </h5>
<div class="row" ng-repeat="u in users">
<div class="avatar col-sm-4">
<img ng-src="https://192.168.222.115:5000/img/faces/{{u.customer_id}}.png" width="100"/>
</div>
<div class="col-sm-8">
<h5>{{u.nickname}}</h5>
<ul>
<li>Discount: {{u.discount}}%</li>
<li>Bonuses: {{u.bonuses}}</li>
<li>Visit number: {{u.visits_num}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
var app = angular.module('app', []).controller('ctrl', function ($scope, $http) {
$scope.users = []
setInterval(function () {
$http.get('https://192.168.222.115:5000/api/customer/list', {
crossDomain: true
}).then(function (data) {
$scope.users = data.data.active
})
}, 2000)
})
window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
context.strokeStyle = '#0f0';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.lineWidth = 1.5;
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
context.strokeStyle = "#ff0";
context.beginPath();
context.arc(rect.x, rect.y, 5, 0, 2 * Math.PI);
context.stroke();
context.beginPath();
context.arc(rect.x + rect.width, rect.y, 5, 0, 2 * Math.PI);
context.stroke();
context.beginPath();
context.arc(rect.x, rect.y + rect.height, 5, 0, 2 * Math.PI);
context.stroke();
context.beginPath();
context.arc(rect.x + rect.width, rect.y + rect.height, 5, 0, 2 * Math.PI);
context.stroke();
});
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/data/face-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://ayzakh.bitbucket.io/tracking-min.js"></script>
body {
background-color: #000;
}
* {
color: #fff;
}
#videostream {
width: 100%;
}
.avatar {
border-radius: 5px;
}
video, canvas {
position: absolute;
}
#video-block {
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.