86 lines
2.1 KiB
HTML
86 lines
2.1 KiB
HTML
<!doctype html>
|
||
|
||
<html>
|
||
<head>
|
||
<title>tracking.js - feature detector with camera</title>
|
||
|
||
<meta charset="utf-8">
|
||
<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>
|
||
|
||
<style>
|
||
#video {
|
||
position: absolute;
|
||
top: -1000px;
|
||
}
|
||
|
||
#canvas {
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: -200px;
|
||
margin-top: -150px;
|
||
position: absolute;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-title">
|
||
<p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － display detected features</p>
|
||
</div>
|
||
|
||
<div class="demo-frame">
|
||
<div class="demo-container">
|
||
<video id="video" width="400" height="300" preload autoplay loop muted></video>
|
||
<canvas id="canvas" width="400" height="300"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var canvas = document.getElementById('canvas');
|
||
var context = canvas.getContext('2d');
|
||
|
||
var FastTracker = function() {
|
||
FastTracker.base(this, 'constructor');
|
||
};
|
||
tracking.inherits(FastTracker, tracking.Tracker);
|
||
|
||
tracking.Fast.THRESHOLD = 2;
|
||
FastTracker.prototype.threshold = tracking.Fast.THRESHOLD;
|
||
|
||
FastTracker.prototype.track = function(pixels, width, height) {
|
||
stats.begin();
|
||
var gray = tracking.Image.grayscale(pixels, width, height);
|
||
var corners = tracking.Fast.findCorners(gray, width, height);
|
||
stats.end();
|
||
|
||
this.emit('track', {
|
||
data: corners
|
||
});
|
||
};
|
||
|
||
var tracker = new FastTracker();
|
||
|
||
tracker.on('track', function(event) {
|
||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||
var corners = event.data;
|
||
for (var i = 0; i < corners.length; i += 2) {
|
||
context.fillStyle = '#f00';
|
||
context.fillRect(corners[i], corners[i + 1], 2, 2);
|
||
}
|
||
});
|
||
|
||
tracking.track('#video', tracker, { camera: true });
|
||
|
||
// GUI Controllers
|
||
var gui = new dat.GUI();
|
||
|
||
gui.add(tracker, 'threshold', 1, 100).onChange(function(value) {
|
||
tracking.Fast.THRESHOLD = value;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|