Last active
April 26, 2019 20:51
-
-
Save lynn/ffe1f2ae55732ba4cebec010758ebf51 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<!-- This is just a very slightly modified tracking.js demo: https://trackingjs.com/examples/face_camera.html --> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking-min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/data/face-min.js"></script> | |
<style> | |
video, canvas { | |
margin-left: 100px; | |
margin-top: 120px; | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="demo-frame"> | |
<div class="demo-container"> | |
<video id="video" width="320" height="240" preload autoplay loop muted></video> | |
<canvas id="canvas" width="320" height="240"></canvas> | |
</div> | |
</div> | |
<script> | |
looking = false; | |
function sort(arr) { | |
// Keep or flip to taste ↴ | |
return arr.concat().sort((a, b) => !looking ? a - b : 0.5 - Math.random()); | |
// Hey! Since people are going to look at this, I should mention: | |
// sorting by 0.5 - Math.random() is a *lousy* way to shuffle an array, | |
// in the sense that the distribution of outcomes is very uneven. For my | |
// purpose, it doesn't matter (I'm intentionally trying to botch the | |
// outcome anyway), but you shouldn't ever seriously use this trick. | |
} | |
window.onload = function() { | |
var video = document.getElementById('video'); | |
var canvas = document.getElementById('canvas'); | |
var context = canvas.getContext('2d'); | |
var tracker = new tracking.ObjectTracker('face'); | |
tracker.setInitialScale(4); | |
tracker.setStepSize(2); | |
tracker.setEdgesDensity(0.1); | |
tracking.track('#video', tracker, { camera: true }); | |
tracker.on('track', function(event) { | |
context.clearRect(0, 0, canvas.width, canvas.height); | |
looking = false; | |
event.data.forEach(function(rect) { | |
looking = true; | |
context.strokeStyle = '#a64ceb'; | |
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); | |
}); | |
}); | |
}; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
your tweet appear in my timeline and this is so cool! xD