Face tracker

In this example below you will see how to do a Face tracker with some HTML / CSS and Javascript

A simplified version of "Facetracking example" http://auduno.github.io/clmtrackr/clm_video.html

Thumbnail
This awesome code was written by 1cgonza, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1cgonza ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Face tracker</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="canvas" width="400" height="300"></canvas>
<video id="webcam" width="400" height="300" preload="auto" loop=""></video>
<input class="btn" type="button" value="wait, loading video" disabled="disabled" onclick="startVideo()" id="startbutton">
  <script src='http://juancgonzalez.com/lab/js/vendor/clmtrackr.min.js'></script>
<script src='https://webrtc.github.io/adapter/adapter-latest.js'></script>
<script src='http://juancgonzalez.com/lab/js/vendor/model_pca_20_svm.js'></script>
<script src='https://auduno.github.io/clmtrackr/js/utils.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1cgonza/face-tracker-zLFxA */
#webcam {
  background-color: #666;
}
#canvas {
  position: absolute;
}
#startbutton {
  display: block;
  font-size: 50px;
}

/*Downloaded from https://www.codeseek.co/1cgonza/face-tracker-zLFxA */
/* 
 * CLMTRACKR
 * https://github.com/auduno/clmtrackr
 * a simplified version of their example: https://auduno.github.io/clmtrackr/clm_video.html
 */

var vid = document.getElementById('webcam');
var overlay = document.getElementById('canvas');
var overlayCC = overlay.getContext('2d');

var ctrack = new clm.tracker({
  useWebGL: true
});
ctrack.init(pModel);

function enablestart() {
  var startbutton = document.getElementById('startbutton');
  startbutton.value = "start";
  startbutton.disabled = null;
}

// // check for camerasupport
if (navigator.getUserMedia) {
  // set up stream
  var videoSelector = {
    video: true
  };
  if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
    var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
    if (chromeVersion < 20) {
      videoSelector = "video";
    }
  };

  navigator.getUserMedia(videoSelector, function(stream) {
    if (vid.mozCaptureStream) {
      vid.mozSrcObject = stream;
    } else {
      vid.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
    }
    vid.play();
  }, function() {

    console.log("There was some problem trying to fetch video from your webcam, using a fallback video instead.");
  });
} else {
  console.log("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}

vid.addEventListener('canplay', enablestart, false);

function startVideo() {
  // start video
  vid.play();
  // start tracking
  ctrack.start(vid);
  // start loop to draw face
  drawLoop();
}

function drawLoop() {
  requestAnimFrame(drawLoop);
  overlayCC.clearRect(0, 0, 400, 300);

  if (ctrack.getCurrentPosition()) {
    ctrack.draw(overlay);
  }
}

Comments