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