codice:
<script src="headtrackr.js"></script>
<canvas id="compare" width="320" height="240" style="display:none"></canvas>
<video id="vid" autoplay loop width="320" height="240"></video>
<canvas id="overlay" width="320" height="240"></canvas>
<canvas id="debug" width="320" height="240"></canvas>
<p id='gUMMessage'></p>
<p>Status : <span id='headtrackerMessage'></span></p>
<p><input type="button" onclick="htracker.stop();htracker.start();" value="reinitiate facedetection"></input>
<br/><br/>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// set up video and canvas elements needed
var videoInput = document.getElementById('vid');
var canvasInput = document.getElementById('compare');
var canvasOverlay = document.getElementById('overlay')
var debugOverlay = document.getElementById('debug');
var overlayContext = canvasOverlay.getContext('2d');
canvasOverlay.style.position = "absolute";
canvasOverlay.style.top = '0px';
canvasOverlay.style.zIndex = '100001';
canvasOverlay.style.display = 'block';
debugOverlay.style.position = "absolute";
debugOverlay.style.top = '0px';
debugOverlay.style.zIndex = '100002';
debugOverlay.style.display = 'none';
// add some custom messaging
statusMessages = {
"whitebalance" : "checking for stability of camera whitebalance",
"detecting" : "Detecting face",
"hints" : "Hmm. Detecting the face is taking a long time",
"redetecting" : "Lost track of face, redetecting",
"lost" : "Lost track of face",
"found" : "Tracking face"
};
supportMessages = {
"no getUserMedia" : "Unfortunately, <a href='http://dev.w3.org/2011/webrtc/editor/getusermedia.html'>getUserMedia</a> is not supported in your browser. Try <a href='http://www.opera.com/browser/'>downloading Opera 12</a> or <a href='http://caniuse.com/stream'>another browser that supports getUserMedia</a>. Now using fallback video for facedetection.",
"no camera" : "No camera found. Using fallback video for facedetection."
};
document.addEventListener("headtrackrStatus", function(event) {
if (event.status in supportMessages) {
var messagep = document.getElementById('gUMMessage');
messagep.innerHTML = supportMessages[event.status];
} else if (event.status in statusMessages) {
var messagep = document.getElementById('headtrackerMessage');
messagep.innerHTML = statusMessages[event.status];
}
}, true);
// the face tracking setup
var htracker = new headtrackr.Tracker({altVideo : {ogv : "./media/capture5.ogv", mp4 : "./media/capture5.mp4"}, calcAngles : true, ui : false, headPosition : false, debug : debugOverlay});
htracker.init(videoInput, canvasInput);
htracker.start();
// for each facetracking event received draw rectangle around tracked face on canvas
document.addEventListener("facetrackingEvent", function( event ) {
// clear canvas
overlayContext.clearRect(0,0,320,240);
// once we have stable tracking, draw rectangle
if (event.detection == "CS") {
overlayContext.translate(event.x, event.y)
overlayContext.rotate(event.angle-(Math.PI/2));
overlayContext.strokeStyle = "#00CC00";
overlayContext.strokeRect((-(event.width/2)) >> 0, (-(event.height/2)) >> 0, event.width, event.height);
overlayContext.rotate((Math.PI/2)-event.angle);
overlayContext.translate(-event.x, -event.y);
}
});
// turn off or on the canvas showing probability
function showProbabilityCanvas() {
var debugCanvas = document.getElementById('debug');
if (debugCanvas.style.display == 'none') {
debugCanvas.style.display = 'block';
} else {
debugCanvas.style.display = 'none';
}
}
</script>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
vid = document.getElementById("vid"),
videoObj = { "vid": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
vid.src = stream;
vid.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
vid.src = window.webkitURL.createObjectURL(stream);
vid.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
vid.src = window.URL.createObjectURL(stream);
vid.play();
}, errBack);
}
// Trigger photo take(ipotizzato da me)
/*document.getElementById("snap").addEventListener("headtrackrStatus", function(event) {
if event.status in statusMessages = "found" : "Tracking face";{
var messagep = document.getElementById('headtrackerMessage');
context.drawImage(vid, 0, 0, 154, 128);
}
});
}, false);
*/
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(vid, 0, 0, 240, 180);
});
}, false);
Rispondi quotando