Face Tracking

Face Tracking with 27 lines of JS using Jeeliz FaceFilter API

by Xavier Bourry

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>FACE TRACKING DEMO</title>
    <!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
    <script src="https://appstatic.jeeliz.com/faceFilter/jeelizFaceFilter.js"></script>

    <!-- HELPER TO USE CANVAS2D WITHOUT TAKING CARE OF WEBGL -->
    <script src="https://appstatic.jeeliz.com/faceFilter/Canvas2DDisplay.js"></script>
  </head>

  <body>
    <canvas width="600" height="600" id='faceTrackCanvas'></canvas>
  </body>

</html>

JavaScript

var CVD; //return of Canvas2DDisplay

JEEFACEFILTERAPI.init({
  canvasId: 'faceTrackCanvas',
  NNCpath: 'https://appstatic.jeeliz.com/faceFilter/', //root of NNC.json file

  //called when video stream is ready and lib initialized :
  callbackReady: function(errCode, spec) {
    if (errCode) throw (errCode);
    CVD = JEEFACEFILTERAPI.Canvas2DDisplay(spec);
    CVD.ctx.strokeStyle = 'yellow';
  }, //end callbackReady()

  //called at each render iteration (drawing loop) :
  callbackTrack: function(detectState) {
    if (detectState.detected > 0.6) {
      //draw a border around the face
      var faceCoo = CVD.getCoordinates(detectState);
      CVD.ctx.clearRect(0, 0, CVD.canvas.width, CVD.canvas.height);
      CVD.ctx.strokeRect(faceCoo.x, faceCoo.y, faceCoo.w, faceCoo.h);
      CVD.update_canvasTexture();
    }
    CVD.draw();
  } //end callbackTrack()
}); //end JEEFACEFILTERAPI.init call