2013-02-28 00:22:10 +01:00
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script type="text/javascript" src="../js/ccv.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../js/face.js"></script>
|
|
|
|
|
<script src="/_ah/channel/jsapi"></script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
* { margin:0; padding:0; } /* to remove the top and left whitespace */
|
|
|
|
|
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
|
|
|
|
|
body {font-family: 'Helvetica';background-color: #000000; }
|
|
|
|
|
a:link { color: #ffffff; } a:visited {color: #ffffff; }
|
|
|
|
|
|
|
|
|
|
#localCanvas {
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#localVideo {
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
-webkit-transition-property: opacity;
|
|
|
|
|
-webkit-transition-duration: 2s;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
#logo {
|
|
|
|
|
display: block;
|
|
|
|
|
top:4;
|
|
|
|
|
right:4;
|
|
|
|
|
position:absolute;
|
|
|
|
|
float:right;
|
|
|
|
|
#opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#credit {
|
|
|
|
|
display: block;
|
|
|
|
|
top:28;
|
|
|
|
|
right:4;
|
|
|
|
|
position:absolute;
|
|
|
|
|
float:right;
|
|
|
|
|
font-size:10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<title>WebRTC Face Reco Demo Application</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var localVideo;
|
|
|
|
|
var localCanvas;
|
|
|
|
|
//var worker = new Worker('ccv.js');
|
|
|
|
|
|
|
|
|
|
initialize = function() {
|
|
|
|
|
localVideo = document.getElementById("localVideo");
|
|
|
|
|
localCanvas = document.getElementById("localCanvas");
|
|
|
|
|
getUserMedia();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getUserMedia = function() {
|
|
|
|
|
try { navigator.webkitGetUserMedia({video:true,audio:true}, onGotStream, onFailedStream);
|
|
|
|
|
//trace("Requested access to local media");
|
|
|
|
|
} catch (e) {
|
|
|
|
|
alert("getUserMedia error " + e);
|
|
|
|
|
//trace_e(e, "getUserMedia error");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
poll = function() {
|
|
|
|
|
var w = localVideo.videoWidth;
|
|
|
|
|
var h = localVideo.videoHeight;
|
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = w;
|
|
|
|
|
canvas.height = h;
|
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
ctx.drawImage(localVideo, 0, 0, w, h);
|
|
|
|
|
var comp = ccv.detect_objects({ "canvas" : ccv.grayscale(canvas),
|
|
|
|
|
"cascade" : cascade,
|
|
|
|
|
"interval" : 5,
|
|
|
|
|
"min_neighbors" : 1 });
|
|
|
|
|
/* draw detected area */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//localCanvas.left = 400;
|
|
|
|
|
//localCanvas.top = localVideo.top;
|
|
|
|
|
/*localCanvas.right = localVideo.right;
|
|
|
|
|
localCanvas.bottom = localVideo.bottom;*/
|
|
|
|
|
localCanvas.width = localVideo.clientWidth;
|
|
|
|
|
localCanvas.height = localVideo.clientHeight;
|
|
|
|
|
var ctx2 = localCanvas.getContext('2d');
|
|
|
|
|
ctx2.lineWidth = 2;
|
|
|
|
|
ctx2.lineJoin = "round";
|
|
|
|
|
ctx2.clearRect (0, 0, localCanvas.width,localCanvas.height);
|
|
|
|
|
var x_offset = 0, y_offset = 0, x_scale = 1, y_scale = 1;
|
|
|
|
|
if (localVideo.clientWidth * localVideo.videoHeight > localVideo.videoWidth * localVideo.clientHeight) {
|
|
|
|
|
x_offset = (localVideo.clientWidth - localVideo.clientHeight * localVideo.videoWidth / localVideo.videoHeight) / 2;
|
|
|
|
|
} else {
|
|
|
|
|
y_offset = (localVideo.clientHeight - localVideo.clientWidth * localVideo.videoHeight / localVideo.videoWidth) / 2;
|
|
|
|
|
}
|
|
|
|
|
x_scale = (localVideo.clientWidth - x_offset * 2) / localVideo.videoWidth;
|
|
|
|
|
y_scale = (localVideo.clientHeight - y_offset * 2) / localVideo.videoHeight;
|
|
|
|
|
for (var i = 0; i < comp.length; i++) {
|
|
|
|
|
comp[i].x = comp[i].x * x_scale + x_offset;
|
|
|
|
|
comp[i].y = comp[i].y * y_scale + y_offset;
|
|
|
|
|
comp[i].width = comp[i].width * x_scale;
|
|
|
|
|
comp[i].height = comp[i].height * y_scale;
|
|
|
|
|
var opacity = 0.1;
|
|
|
|
|
if (comp[i].confidence > 0) {
|
|
|
|
|
opacity += comp[i].confidence / 10;
|
|
|
|
|
if (opacity > 1.0) opacity = 1.0;
|
|
|
|
|
}
|
|
|
|
|
//ctx2.strokeStyle = "rgba(255,0,0," + opacity * 255 + ")";
|
|
|
|
|
ctx2.lineWidth = opacity * 10;
|
|
|
|
|
ctx2.strokeStyle = "rgb(255,0,0)";
|
|
|
|
|
ctx2.strokeRect(comp[i].x, comp[i].y, comp[i].width, comp[i].height);
|
|
|
|
|
}
|
|
|
|
|
setTimeout(poll, 1000);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onGotStream = function(stream) {
|
|
|
|
|
var url = webkitURL.createObjectURL(stream);
|
|
|
|
|
localVideo.style.opacity = 1; localVideo.src = url;
|
|
|
|
|
localStream = stream;
|
|
|
|
|
|
|
|
|
|
//trace("User has granted access to local media. url = " + url);
|
|
|
|
|
setTimeout(poll, 2000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onFailedStream = function(error) {
|
|
|
|
|
alert("Failed to get access to local media. Error code was " + error.code + ".");
|
|
|
|
|
//trace_warning("Failed to get access to local media. Error code was " + error.code);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(initialize, 1);
|
|
|
|
|
</script>
|
|
|
|
|
|
2013-03-11 17:58:07 +01:00
|
|
|
<video id="localVideo" autoplay="autoplay" muted="true"></video>
|
2013-02-28 00:22:10 +01:00
|
|
|
<canvas width="1000" height="1000" id="localCanvas"></canvas>
|
|
|
|
|
<a href="http://www.webrtc.org"><img id="logo" alt="WebRTC" src="../images/webrtc_black_20p.png"></a>
|
|
|
|
|
<a href="http://liuliu.me/eyes/javascript-face-detection-explained"><div id="credit">JS Face Detect by Liu Liu</div></a>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
