Permalink
Cannot retrieve contributors at this time
65 lines (54 sloc)
1.91 KB
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>tracking.js - color with camera</title> | |
<link rel="stylesheet" href="assets/demo.css"> | |
<script src="../build/tracking-min.js"></script> | |
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script> | |
<script src="assets/stats.min.js"></script> | |
<script src="assets/color_camera_gui.js"></script> | |
<style> | |
video, canvas { | |
margin-left: 100px; | |
margin-top: 35px; | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="demo-title"> | |
<p><a href="http://trackingjs.com" target="_parent">tracking.js</a> - choose the colors you want to detect through the controls on the right</p> | |
</div> | |
<div class="demo-frame"> | |
<div class="demo-container"> | |
<video id="video" width="600" height="450" preload autoplay loop muted controls></video> | |
<canvas id="canvas" width="600" height="450"></canvas> | |
</div> | |
</div> | |
<script> | |
window.onload = function() { | |
var video = document.getElementById('video'); | |
var canvas = document.getElementById('canvas'); | |
var context = canvas.getContext('2d'); | |
var tracker = new tracking.ColorTracker(); | |
tracking.track('#video', tracker, { camera: true }); | |
tracker.on('track', function(event) { | |
context.clearRect(0, 0, canvas.width, canvas.height); | |
event.data.forEach(function(rect) { | |
if (rect.color === 'custom') { | |
rect.color = tracker.customColor; | |
} | |
context.strokeStyle = rect.color; | |
context.strokeRect(rect.x, rect.y, rect.width, rect.height); | |
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); | |
}); | |
}); | |
initGUIControllers(tracker); | |
}; | |
</script> | |
</body> | |
</html> |