Trackingjs: Head tracking example code

<!doctype html>
<html>
<head>
<!-- Based on https://trackingjs.com/examples/face_camera.html -->

<meta charset="utf-8">
<title>Program that uses tracking.js to track face with camera</title>

<!-- Must download trackingjs files from https://trackingjs.com and put them where these 'script src=' statements will find them. -->
<script src="./trackingjs/build/tracking-min.js"></script>
<script src="./trackingjs/build/data/face-min.js"></script>

<style>
video, canvas {
  margin-left: 230px;
  margin-top: 120px;
  position: absolute;
}
</style>

<script>
/*
 * Simple program that uses trackingjs
 *
 * Must run on a remote server, and access via https not http. //*1 Setup, caveats
 * Must download trackingjs files from https://trackingjs.com and put them where above 'script src=' statements will find them. //*1
 */

window.onload = function() {
  let video = document.getElementById ('video');
  let canvas = document.getElementById ('canvas');
  let context = canvas.getContext ('2d');
  let tracker = new tracking.ObjectTracker(['face']);  //*2 Callback when finds head

  tracking.track ('#video', tracker, { camera: true });

  tracker.on ('track', function(event) { //*2
    context.clearRect (0, 0, canvas.width, canvas.height);
    for (let rect of event.data) { //*2
      // Print face coordinates
      document.getElementById ("result").textContent //*2
	= "Face at " + (rect.x + rect.width/2) + ", " + (rect.y + rect.height/2) //*2

      // Show face location on the video
      context.strokeStyle = '#a64ceb'; //*3 Also draw the result
      context.strokeRect (rect.x, rect.y, rect.width, rect.height); //*3

      // Display face coordinates on the video
      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);
    }
  });
};
</script>

</head>
<body>
<p>Use <a href="http://trackingjs.com">tracking.js</a> to detect Faces</p>

<div id="result">(no results yet)</div>

<video id="video" width="320" height="240" preload autoplay loop muted></video>
<canvas id="canvas" width="320" height="240"></canvas>

</body>
</html>