Trackingjs: Color tracking example code: usetrackingjs2.html

<!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>
[download file]