调用百度的人工智能api,人脸识别

从页面开始：HTML

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>人脸识别</title>
   <script src="plugin/js/jquery-3.1.1.min.js" type="text/javascript"></script>
   <script src="plugin/js/bootstrap.min.js"></script>
   <link href="plugin/css/bootstrap.min.css" th:href="@{/plugin/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>
   <video width="400" height="300"></video>

       
       <canvas width="200" height="150"></canvas>
       <button id="" οnclick="face_login()" class="btn btn-info"><i class="icon-play"></i> 登录</button>
<script>
function $(elem){
return document.querySelector(elem);
}
var canvas = $('canvas'),
context = canvas.getContext('2d'),
video = $('video'),
snap = $('#snap'),
upload = $('#upload'),
uploaded = $('#uploaded'),
mediaStreamTrack;
//打开摄像头
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
}).then(function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
video.src = (window.URL || window.webkitURL).createObjectURL(stream);
video.play();
});
}else if (navigator.getMedia) {
navigator.getMedia({
video: true
}, function(stream) {
mediaStreamTrack = stream.getTracks()[0];
video.src = (window.URL || window.webkitURL).createObjectURL(stream);
video.play();
});
}
//人脸识别参考文档：https://cloud.baidu.com/doc/FACE/
function face_login(){
context.drawImage(video, 0, 0, 200, 150);
jQuery.post('faceLogin', {           //指定发送图片到的servlet
snapData: canvas.toDataURL('image/jpg')
}).done(function(rs) {
//对结果集进行解析，判断是否存在人脸
       console.log(JSON.stringify(rs));
if(rs.error_code == "222202"){
alert("没有人脸信息或人脸数量非1，请重新拍照！");
}else if(rs.error_code == "222207"){
alert("人脸库中没有您的注册信息，请先注册。");
}else if(rs.error_code == "223120"){
alert("请正确登录，不得伪造！");
       }else if(rs.error_msg == "SUCCESS"){
alert("登录成功！");
// console.log(rs.result.user_list[0].user_info);
       }
});
}
</script>
</body>
</html>