Face tracker

/*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);
  }
}