<!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>