tracking
Version:
A modern approach for Computer Vision on the web.
115 lines (95 loc) • 2.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - draw something</title>
<link rel="stylesheet" href="assets/demo.css">
<script src="../build/tracking.js"></script>
<script src="assets/splines.min.js"></script>
<script src="assets/stats.min.js"></script>
<style>
#canvas,
#video {
height: 300px;
position: absolute;
width: 400px;
padding-top: 66px;
}
.draw-frame {
background: url(assets/draw_frame.png);
width: 400px;
height: 414px;
border: 1px solid #ccc;
top: 50%;
left: 50%;
position: absolute;
margin: -207px 0 0 -200px;
}
canvas, video {
-moz-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
filter: FlipH;
transform: scale(-1, 1);
}
</style>
</head>
<body>
<div class="demo-title">
<p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － use magenta color to draw and cyan to erase</p>
</div>
<div class="demo-frame">
<div class="demo-container">
<div class="draw-frame">
<video id="video" width="400" height="300" preload autoplay loop muted></video>
<canvas id="canvas" width="400" height="300"></canvas>
</div>
</div>
</div>
<script>
window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var drawSegments = [[]];
var segment = 0;
var tracker = new tracking.ColorTracker(['magenta', 'cyan']);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
if (event.data.length === 0 && drawSegments[segment].length > 0) {
segment++;
if (!drawSegments[segment]) {
drawSegments[segment] = [];
}
}
event.data.forEach(function(rect) {
if (rect.color === 'magenta') {
draw(rect);
}
else if (rect.color === 'cyan') {
erase(rect);
}
});
});
function draw(rect) {
drawSegments[segment].push(rect.x + rect.width / 2, rect.y + rect.height / 2);
}
function erase(rect) {
context.clearRect(rect.x, rect.y, rect.width, rect.height);
}
function isInsideRect(x, y, rect) {
return rect.x <= x && x <= rect.x + rect.width &&
rect.y <= y && y <= rect.y + rect.height;
}
(function loop() {
for (var i = 0, len = drawSegments.length; i < len; i++) {
drawSpline(context, drawSegments[i], 0.5, false);
}
drawSegments = [drawSegments[drawSegments.length - 1]];
segment = 0;
requestAnimationFrame(loop);
}());
};
</script>
</body>
</html>