基于百度AI+navigator+jquery-webcam+jsp实现人脸识别登录续，真正兼容各浏览器
1、对于百度AI的调用和简单的jquery-webcam获取摄像头图像的方法，参见以往的博客：http://www.cnblogs.com/guo-eric/p/8371861.html
2、对于谷歌浏览器，可以采用H5标签，直接获取canvas标签实现
<!DOCTYPE html>
<html>
<head>
<title>paizhao.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<button id="start" style="display:block" >start</button>
<button id="picture" style="display:block" >paizhao</button>
<canvas style="display:block" id="canvas" width="320" height="320"></canvas>
<button id="sc" style="display:block" >shangchuan</button>
<button id="stop" style="display:block" >stop</button>
</div>
</body>
<script>
var mediaStreamTrack;
document.getElementById("start").addEventListener("click", function () {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 320, height: 320 } },
function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
video.src = (window.URL || window.webkitURL).createObjectURL(stream);
video.play();
/* var video = document.getElementById("video");
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
console.log('nihao44eee4aaaaddda');
video.play();
}; */
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
});
document.getElementById("stop").addEventListener("click", function () {
mediaStreamTrack && mediaStreamTrack.stop();
});
document.getElementById("picture").addEventListener("click", function () {
var context = document.getElementById("canvas").getContext("2d");
context.drawImage(video, 0, 0, 320, 320);
});
document.getElementById("sc").addEventListener("click", function () {
var imgData=document.getElementById("canvas").toDataURL("image/png");
var mmmd=getBase64Image(document.getElementById("mmm"));
var data=imgData.substr(22);
console.log(mmmd)
debugger
$.post('recorder/target/sc',{'sj':data});
});
function getBase64Image(img) {
var canvastemp = document.createElement("canvas");
canvastemp.width = img.width;
canvastemp.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL
// return dataURL.replace("data:image/png;base64,", "");
}
</script>
</html>
3、对于IE浏览器必须采用jquery-webcam实现，因为IE对H5的标签实现的不好
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>jQuery-webcam-master</title> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.webcam.js"></script> <style type="text/css"> #webcam { border: 1px solid #666666; width: 320px; height: 240px; } #photos { border: 1px solid #666666; width: 320px; height: 240px; } .btn { width: 320px; height: auto; margin: 5px 0px; } .btn input[type=button] { width: 150px; height: 50px; line-height: 50px; margin: 3px; } </style> </head> <body> <input type="button" value="show" id="showBtn" onclick="init();" /> <input type="button" value="close" id="closeBtn" onclick="destroy();" /> <div id="webcam"></div> <div class="btn"> <input type="button" value="登录" id="saveBtn" onclick="action('old');" disabled="disabled"/> <a href="http://localhost:8088/AipFaceSys/webcam.jsp">跳转</a> </div> </body> <script type="text/javascript"> function init(){ var pos = 0, ctx = null, saveCB, image = []; //创建画布指定宽度和高度 var root = document.getElementById("webcam"); if(root.firstChild){ root.removeChild(root.firstChild); } var canvas = document.createElement("canvas"); canvas.setAttribute('width', 320); canvas.setAttribute('height', 240); //如果画布成功创建 if (canvas.toDataURL) { //设置画布为2d，未来可能支持3d ctx = canvas.getContext("2d"); //截图320*240，即整个画布作为有效区(cutx?) image = ctx.getImageData(0, 0, 320, 240); saveCB = function(data) { //把data切割为数组 var col = data.split(";"); var img = image; //绘制图像(这里不是很理解算法) //参数data 只是每行的数据 ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb for (var i = 0; i < 320; i++) { //转换为十进制 var tmp = parseInt(col[i]); img.data[pos + 0] = (tmp >> 16) & 0xff; img.data[pos + 1] = (tmp >> 8) & 0xff; img.data[pos + 2] = tmp & 0xff; img.data[pos + 3] = 0xff; pos += 4; } //当绘制320*240像素的图片时发给后端php if (pos >= 4 * 320 * 240) { //把图像放到画布上,输出为png格式 ctx.putImageData(img, 0, 0); //alert('图片保存成功'); $.ajax({ url : 'login.do?method=old', type : "POST", dataType : 'json', async : false, data : {image : canvas.toDataURL("image/png")}, success : function(data) { alert(data.flag+'---'+data.message); //webcam = null; }, error : function(error) { tip('访问数据异常', '异常提示'); return true; } }); pos = 0; } }; } $("#webcam").webcam({ width : 320, height : 240, mode : "callback", swffile : "js/jscam.swf", onTick : function(remain) { if (0 == remain) { jQuery("#status").text("Cheese!"); } else { jQuery("#status").text(remain + " seconds remaining..."); } }, onSave : saveCB, onCapture : function() { webcam.save(); }, onPauseCamera : function() { webcam.pauseCamera(); }, debug : function(type, string) { console.log(type + ": " + string); } }); //初始化之后，登录按钮才可用 $("#saveBtn").removeAttr("disabled"); } //拍照 var method = 'login'; function action(action) { if(action != null){ method = action; } webcam.capture(); } function destroy(){ webcam.pauseCamera(); } </script> </html>
当前，对于以上代码中的关闭摄像头的方法，webcam源文件中是存在pauseCamera方法的，只是官网提供的webcam.swf文件中，没有集成该方法，我们需要重新编译该文件，
具体的编译方法，参考博文：https://www.cnblogs.com/wuzhiyuan/p/7487143.html
以上实现，只是简易整理，如果需要用到重新编译webcam.swf文件的方法，或者三方工具，请留言！
