提交IE下活体检测代码
This commit is contained in:
袁帅
@ -4,10 +4,11 @@
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery-webcam-master</title>
|
||||
<!-- <link href="cs.css" rel="stylesheet" type="text/css"> -->
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery.webcam.min.js"></script>
|
||||
<script src="jsrsasign-latest-all-min.js"></script>
|
||||
<script src="living.min.js"></script>
|
||||
<script type="text/javascript" src="jquery-3.6.1.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.webcam.min.js"></script>
|
||||
<script type="text/javascript" src="jsrsasign-latest-all-min.js"></script>
|
||||
<script type="text/javascript" src="moment.js"></script>
|
||||
<script type="text/javascript" src="living-jq.min.js"></script>
|
||||
<!-- <script src="excanvas.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
@ -17,15 +18,9 @@
|
||||
<script type="text/javascript">
|
||||
var pos = 0, ctx = null, saveCB,w = 380,h= 200, image = new Array();
|
||||
var lv = null;
|
||||
var action = 1,timer = 1000;
|
||||
var liveDetectPhoto = null;
|
||||
var canvas = document.createElement("canvas");//创建画布指定宽度和高度
|
||||
canvas.setAttribute('width', 320);
|
||||
canvas.setAttribute('height', 240);
|
||||
document.body.appendChild(canvas);
|
||||
// canvas = window.G_vmlCanvasManager.initElement(canvas);
|
||||
ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d
|
||||
image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
|
||||
var liveDetectPhotoUrl = null;
|
||||
var canvas = null;
|
||||
$(document).ready(function() {
|
||||
$("#webcam").webcam({
|
||||
width: w,
|
||||
@ -50,10 +45,10 @@
|
||||
//当绘制320*240像素的图片时发给后端php
|
||||
if (pos == 4 * 320 * 240) {
|
||||
//把图像放到画布上,输出为png格式
|
||||
ctx.putImageData(img, 0, 0);
|
||||
liveDetectPhoto = base64ToBlob(canvas.toDataURL("image/png"));
|
||||
//window.parent.postMessage({"image": canvas.toDataURL("image/png")}, '*');
|
||||
image = new Array();
|
||||
ctx.putImageData(img, 0, 0);
|
||||
//liveDetectPhotoUrl = canvas.toDataURL("image/png");
|
||||
liveDetectPhoto = base64ToBlob(canvas.toDataURL("image/png"));
|
||||
//window.parent.postMessage({"image": liveDetectPhoto}, '*');
|
||||
pos = 0;
|
||||
}
|
||||
// image.push(data);
|
||||
@ -66,37 +61,43 @@
|
||||
// }
|
||||
},
|
||||
onCapture: function(data) {
|
||||
canvas = document.createElement("canvas");//创建画布指定宽度和高度
|
||||
canvas.setAttribute('width', 320);
|
||||
canvas.setAttribute('height', 240);
|
||||
// document.body.appendChild(canvas);
|
||||
// canvas = window.G_vmlCanvasManager.initElement(canvas);
|
||||
ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d
|
||||
image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
|
||||
webcam.save();
|
||||
// Show a flash for example
|
||||
},
|
||||
|
||||
|
||||
debug: function(type, string) {
|
||||
console.log('type:' + type + ',string:' + string);
|
||||
// Write debug information to console.log() or a div
|
||||
},
|
||||
|
||||
|
||||
onLoad: function() {
|
||||
// Page load
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// $('#snapBtn').on('click', function() {
|
||||
// webcam.capture();
|
||||
// });
|
||||
window.addEventListener('message', receiveMessageFromParent, false);
|
||||
|
||||
|
||||
function receiveMessageFromParent ( event ) {
|
||||
if(event.data == 'releaseCamera'){
|
||||
location.reload();
|
||||
}else if(event.data = 'capture'){
|
||||
// liveDetectStart();
|
||||
webcam.capture();
|
||||
console.log(1,liveDetectPhoto);
|
||||
liveDetectStart();
|
||||
//webcam.capture();
|
||||
}
|
||||
//$('#base64image').attr('src', 'data:image/jpg;base64,' + event.data.data);
|
||||
};
|
||||
|
||||
|
||||
function setLiveDetectToken() {
|
||||
let appKey= 'nkYy3g1yT0alE8pF6a1UTC4I';
|
||||
let appSecrect = 'L30zHpTyAtTlY7tTCpbzdxxKCQgwWIQL';
|
||||
@ -105,7 +106,7 @@
|
||||
typ: "JWT", // 声明类型
|
||||
alg: "HS256" // 声明加密的算法 通常直接使用 HMAC SHA256
|
||||
};
|
||||
|
||||
|
||||
var payload = {
|
||||
iss: appKey,
|
||||
iat: moment().unix(),
|
||||
@ -120,40 +121,41 @@
|
||||
});
|
||||
return sJWT;
|
||||
}
|
||||
|
||||
|
||||
function liveDetectStart () {
|
||||
liveDetectStop();
|
||||
let _lv = new Living(null, {
|
||||
timer: 10000,
|
||||
rate: 1000,
|
||||
action : [1,3,2],
|
||||
token: setLiveDetectToken(),
|
||||
proxy:'/living/api',
|
||||
getFacePicture:function(){
|
||||
webcam.capture();
|
||||
return liveDetectPhoto;
|
||||
return {file:liveDetectPhoto};
|
||||
},
|
||||
//开始活体检测，此时token已鉴权成功
|
||||
onDetectStart:function(){
|
||||
//setSubmitLoading(true);
|
||||
},
|
||||
//每轮检测开始
|
||||
onDetectActionStart:function(action){
|
||||
action = action
|
||||
},
|
||||
//每轮检测计时
|
||||
onDetectActionProgress:function(action,timer){
|
||||
timer = timer;
|
||||
window.parent.postMessage({"actionAndTimer": {action:action,timer:timer}}, 'detectStatus');
|
||||
var actionAndTimer = {
|
||||
arg1: action,
|
||||
arg2: timer
|
||||
};
|
||||
//必须传递字符串
|
||||
window.parent.postMessage({"actionAndTimer": actionAndTimer}, '*');
|
||||
},
|
||||
//每轮检测结束
|
||||
onDetectActionFinish:function(action,data){
|
||||
// this.clearCanvas()
|
||||
timer = 10000;
|
||||
console.log(data)
|
||||
},
|
||||
//活体检测完成
|
||||
onDetectFinish:function(data){
|
||||
window.parent.postMessage({"detectResult": data}, 'detectFinish');
|
||||
window.parent.postMessage({"detectResult": data}, '*');
|
||||
}
|
||||
});
|
||||
//开始检测
|
||||
@ -183,5 +185,6 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user