-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
99 lines (88 loc) · 3.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Face-find-fun</title>
<style>
#infoBox {position:absolute;padding:10px;background-color:grey;z-index:1;}
video {width:1024px; height:750px;}
</style>
</head>
<body style="height:100%;background:black;">
<div id="infoBox"> </div>
<canvas id="inputCanvas" width="1024" height="750" style="display:none;" > </canvas>
<canvas id="overlay" width="1024" height="750"> </canvas>
<video id="inputVideo" autoplay></video>
<script src="lib/headtrackr.min.js"> </script>
<script type="text/javascript">
(function() {
/* Cross-browser window.URL */
window.URL = window.URL || window.webkitURL;
/* Feature detection of navigator.getUserMedia */
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
/* Grab video, canvas and infoBox elements */
var video = document.getElementById("inputVideo"),
canvas = document.getElementById("inputCanvas"),
infoBox = document.getElementById("infoBox"),
canvasOverlay = document.getElementById('overlay'),
ctx = canvasOverlay.getContext('2d'),
inChangeModeArea = false, i = 0,
filters = ["hue-rotate(180deg)", "grayscale()", "sepia(100%)",
"saturate(500%)", "blur(5px)", "invert()", "normal"];
canvasOverlay.style.position = "absolute";
canvasOverlay.style.top = '0px';
canvasOverlay.style.zIndex = '1';
canvasOverlay.style.display = 'block';
var 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" : "Found and tracking face!"
};
document.addEventListener('headtrackrStatus',
function (event) {
if (event.status in statusMessages) {
infoBox.innerHTML = statusMessages[event.status];
}
}, true);
/* Initialize headtrackr with video (for mediastream), and canvas (to copy videoframes) */
var htracker = new headtrackr.Tracker({ui:false, calcAngles:true});
htracker.init(video, canvas);
htracker.start();
// Draw on the canvas when we detect a face
document.addEventListener("facetrackingEvent", function( event ) {
// clear canvas
ctx.clearRect(0,0,1024,750);
if (event.detection === "CS") {
infoBox.innerHTML = "x:" +event.x + ", y:" + event.y + ", w:" + event.width + ", h:" + event.height;
ctx.translate(event.x, event.y)
ctx.rotate(event.angle-(Math.PI/2));
ctx.beginPath(); //Draw a hat
ctx.fillStyle = '#8ED6FF';
var w = event.width*0.65, h = event.height*0.7, x = -w/2, y = -h/2;
ctx.moveTo(x, y);
ctx.quadraticCurveTo(0, -event.height * 1.3, x+w, y);
ctx.quadraticCurveTo(0,y+10, x, y);
ctx.fill();
ctx.rotate((Math.PI/2)-event.angle);
ctx.translate(-event.x, -event.y);
//Change CSS3 filter when the head reaches the right corner
if (event.x < 250) {
if (!inChangeModeArea) {
i = i % filters.length;
video.setAttribute("style","-webkit-filter:" + filters[i++]);
inChangeModeArea = true;
}
} else {
inChangeModeArea = false;
}
}
});
})();
</script>
</body>
</html>