<!DOCTYPE html>
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<html>
<meta charset="GBK">
<style>
#container {
position : relative;
}
#canvas {
position : absolute;
left : 0;
top : 0;
}
</style>
<script src="utils.js"></script>
<script src="clmtrackr.js"></script>
<script src="./models/model_pca_20_svm.js"></script>
<script src="numeric.js"></script>
<script src="ccv.js"></script>
<audio id="media">
你的浏览器不支持audio标签。
</audio>
<div id="container">
<video id="video" width="600" height="400" autoplay >
您的浏览器不支持video标签
</video>
<canvas id="canvas" width="600" height="400"></canvas>
</div>
<button id="snap">Snap Photo</button>
<button id="start">Start</button>
<button id="showposition">显示</button>
<button id="hideposition">不显示</button>
<br/>
<button id="mouse">张嘴验证</button>
<button id="head">摇头验证</button>
<button id="eye">眨眼验证</button>
<div id="tip">
</div>
<div id="result">
</div>
<div id="msg">
</div>
<div id="positions">
</div>
<script>
var showpos=false;
// Put event listeners into place
//window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
if (error.PERMISSION_DENIED) {
jAlert('用户拒绝了浏览器请求媒体的权限', '提示');
} else if (error.NOT_SUPPORTED_ERROR) {
jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
} else if (error.MANDATORY_UNSATISFIED_ERROR) {
jAlert('指定的媒体类型未接收到媒体流', '提示');
} else {
jAlert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');
}
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
try{
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}catch(error){
alert(error);
}
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 600, 400);
});
document.getElementById("start").addEventListener("click", function() {
startTrack();
});
document.getElementById("showposition").addEventListener("click", function() {
showpos=true;
});
document.getElementById("hideposition").addEventListener("click", function() {
showpos=false;
});
document.getElementById("mouse").addEventListener("click", function() {
alive_mouse();
});
document.getElementById("head").addEventListener("click", function() {
alive_head();
});
document.getElementById("eye").addEventListener("click", function() {
alive_eye();
});
//}, false);
</script>
<script>