<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>人脸识别</title>
<style type="text/css">
*{
margin:0;padding:0;
}
body{
font-size:12px;
font-family:"微软雅黑";
}
/* message start */
.message{color:red;text-align:center;font-size:25px;font-weight:bold;margin:30px auto;}
/* end message */
/* content start */
.content{height:600px;800px;margin:100px auto 0px;position:relative;overflow:hidden;}
.content .f_scan{100%;height:100%;background:url(images/intro.png) no-repeat;background-size:cover;position:absolute;}
/*end content *
/* btn start */
#btn{280px;height:50px;border-radius:25px;margin:80px auto;
background:#66cc66;font-size:22px;text-align:center;line-height:50px;
color:#fff;display:block;text-decoration:none;}
#btn:hover{background:#ff9999;}
/*end btn */
#canvas{border:1px solid red}
</style>
</head>
<body>
<div class="message"></div>
<div class="content">
<video id="video" width="800" height="600"></video>
<canvas id="canvas" width="800" height="600"></canvas>
<div class="f_scan"></div>
</div>
<div id="btn">人脸识别</div>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
init_getvideo();
$("#btn").click(function(){
scan();
var context = canvas.getContext("2d");
context.drawImage(video,0,0,800,600);
var base = canvas.toDataURL("image/png");
var base64 = base.split("64,")[1];
$.ajax({
type:"post",
url:"register.jsp",
data:{"imgBase64":base64},
success:function(data){
if(data){
window.location.href = "http://www.itstaredu.com/";
} else {
$(".message").html("你长得太丑了！");
}
}
});
});
});
//初始化调用摄像头
function init_getvideo(){
var video = document.getElementById("video");
//navigator浏览器得到内置对象
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
getUserMedia.call(navigator,{
video:true,
audio:false
},function(LocalMediaStream){
//将摄像头的流媒体赋值给video标签src地址
video.src = window.URL.createObjectURL(LocalMediaStream);
video.onloadedmetadata = function(e){//加载元数据
video.play();
}
},function(e){
console.log("获取流媒体错误",e);
});
};
//图像扫描
function scan(){
var box = $(".content");
$(".f_scan").css({"bottom":box.height()}).animate(
{bottom:0},2000,function(){
$(this).css({"bottom":box.height()})
});
} ;
</script>
</html>