Face Detection Example - attuts.com

Check out full face detection tutorial and code explanation on attuts.com

HTML

<script src="https://cdn.rawgit.com/eduardolundgren/tracking.js/master/build/tracking-min.js"></script>
<script src="https://cdn.rawgit.com/eduardolundgren/tracking.js/master/build/data/face-min.js"></script>
<div class="imgContainer">
  <img id="img" src="https://crossorigin.me/https://placeimg.com/640/480/people" />
</div>

CSS

.rect {
    border: 2px solid #a64ceb;
    left: -1000px;
    position: absolute;
    top: -1000px;
  }

  #img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -173px 0 0 -300px;
  }

JavaScript

// checkout full tutorial on attuts.com 
var img = document.getElementById('img');

      var tracker = new tracking.ObjectTracker(['face']); // Based on parameter it will return an array.
      tracker.setStepSize(1.7);

      tracking.track('#img', tracker);
console.log("--- 0 _ tracking = ",tracking)
console.log("--- 0 _ tracker = ",tracker)
      tracker.on('track', function(event) {
      console.log("--- 0 ",event)
        event.data.forEach(function(rect) {
        console.log("--- 0 _ rect = ",rect)
          draw(rect.x, rect.y, rect.width, rect.height);
        });
      });

      function draw(x, y, w, h) {
        var rect = document.createElement('div');
        console.log("--- 1 _ rect = ",rect)
        document.querySelector('.imgContainer').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';
      };