CardFace Demo

cardface-demo.markdown

CardFace Demo

A Pen by Aysen Zakharov on CodePen.

License.

index.html

<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>

script.js

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();
          
        });
      });

    };

scripts

<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>

style.css

body {
  background-color: #000;
}
* {
  color: #fff;
}
#videostream {
  width: 100%;
}
.avatar {
  border-radius: 5px;
}


  video, canvas {
    position: absolute;
  }

#video-block {
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />