<!doctype html> <html> <head> <!-- Based on https://trackingjs.com/docs.html --> <meta charset="utf-8"> <title>Program that uses tracking.js to track a particular color 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> <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. * Must download trackingjs files from https://trackingjs.com and put them where above 'script src=' statements will find them. */ window.onload = function() { // Define my color tracking.ColorTracker.registerColor('mycolor', function(r, g, b) { //*1 Hard coded a blue-ish color // Very liberal definition return (r < 60 && g > 40 && g < 160 && b > 10)}); //*1 let video = document.getElementById ('video'); let canvas = document.getElementById ('canvas'); let context = canvas.getContext ('2d'); let tracker = new tracking.ColorTracker ('mycolor'); //*2 Callback when finds it tracking.track ('#video', tracker, { camera: true }); tracker.on ('track', function(event) { //*2 context.clearRect (0, 0, canvas.width, canvas.height); if (event.data.length === 0) { document.getElementById("result").innerHTML = "(nothing found)" } else { document.getElementById("result").innerHTML = "" //*2 event.data.forEach (function (rect) { //*2 document.getElementById ("result").innerHTML //*2 += "Found: " + rect.x + ", " + rect.y + ", " + rect.width + ", " + rect.height + "<br/>" //*2 }) } }); }; </script> </head> <body> <p>Use <a href="http://trackingjs.com">tracking.js</a> to detect Colors</p> <video id="video" width="320" height="240" preload autoplay loop muted></video> <canvas id="canvas" width="320" height="240"></canvas> <div id="result">(nothing found)</div> </body> </html>