191 lines
8.6 KiB
HTML
191 lines
8.6 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>jQuery-webcam-master</title>
|
||
<!-- <link href="cs.css" rel="stylesheet" type="text/css"> -->
|
||
<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>
|
||
<div id="webcam" style="float: left; clear: both;"></div>
|
||
<!-- <input id="snapBtn" type="button" value="人脸识别" style="float: left; clear: both;"/>
|
||
<img id="base64image" src='' width="450" height="320" style="float: left; clear: both;"/> -->
|
||
<script type="text/javascript">
|
||
var pos = 0, ctx = null, saveCB,w = 380,h= 200, image = new Array();
|
||
var lv = null;
|
||
var liveDetectPhoto = null;
|
||
var liveDetectPhotoUrl = null;
|
||
var canvas = null;
|
||
$(document).ready(function() {
|
||
$("#webcam").webcam({
|
||
width: w,
|
||
height: h,
|
||
mode: "callback",
|
||
swffile: "jscam_canvas_only.swf", // 这里引入swf文件，注意路径
|
||
onTick: function(remain) {},
|
||
onSave: function(data) {
|
||
var col = data.split(";");//把data切割为数组
|
||
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);
|
||
//liveDetectPhotoUrl = canvas.toDataURL("image/png");
|
||
liveDetectPhoto = base64ToBlob(canvas.toDataURL("image/png"));
|
||
//window.parent.postMessage({"image": liveDetectPhoto}, '*');
|
||
pos = 0;
|
||
}
|
||
// image.push(data);
|
||
// pos += 4 * 320;
|
||
//post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
|
||
// if (pos >= 4 * 320 * 240) {
|
||
// window.parent.postMessage({"image":image.join('|')}, '*');
|
||
// image = new Array();
|
||
// pos = 0;
|
||
// }
|
||
},
|
||
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();
|
||
}
|
||
//$('#base64image').attr('src', 'data:image/jpg;base64,' + event.data.data);
|
||
};
|
||
|
||
function setLiveDetectToken() {
|
||
let appKey= 'nkYy3g1yT0alE8pF6a1UTC4I';
|
||
let appSecrect = 'L30zHpTyAtTlY7tTCpbzdxxKCQgwWIQL';
|
||
// Header
|
||
var header = {
|
||
typ: "JWT", // 声明类型
|
||
alg: "HS256" // 声明加密的算法 通常直接使用 HMAC SHA256
|
||
};
|
||
|
||
var payload = {
|
||
iss: appKey,
|
||
iat: moment().unix(),
|
||
exp: moment()
|
||
.add(29, "minutes")
|
||
.unix()
|
||
};
|
||
var sHeader = JSON.stringify(header);
|
||
var sPayload = JSON.stringify(payload);
|
||
var sJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, {
|
||
utf8: appSecrect,
|
||
});
|
||
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 {file:liveDetectPhoto};
|
||
},
|
||
//开始活体检测，此时token已鉴权成功
|
||
onDetectStart:function(){
|
||
},
|
||
//每轮检测开始
|
||
onDetectActionStart:function(action){
|
||
},
|
||
//每轮检测计时
|
||
onDetectActionProgress:function(action,timer){
|
||
var actionAndTimer = {
|
||
arg1: action,
|
||
arg2: timer
|
||
};
|
||
//必须传递字符串
|
||
window.parent.postMessage({"actionAndTimer": actionAndTimer}, '*');
|
||
},
|
||
//每轮检测结束
|
||
onDetectActionFinish:function(action,data){
|
||
console.log(data)
|
||
},
|
||
//活体检测完成
|
||
onDetectFinish:function(data){
|
||
window.parent.postMessage({"detectResult": data}, '*');
|
||
}
|
||
});
|
||
//开始检测
|
||
_lv.start();
|
||
lv = _lv;
|
||
}
|
||
/**
|
||
* 停止活体检测
|
||
*/
|
||
function liveDetectStop (){
|
||
lv && lv.stop();
|
||
}
|
||
/**
|
||
* base64Url转blob
|
||
*/
|
||
function base64ToBlob(base64) {
|
||
var parts = base64.split(";base64,");
|
||
var contentType = parts[0].split(":")[1];
|
||
var raw = window.atob(parts[1]);
|
||
var rawLength = raw.length;
|
||
var uInt8Array = new Uint8Array(rawLength);
|
||
for (let i = 0; i < rawLength; i += 1) {
|
||
uInt8Array[i] = raw.charCodeAt(i);
|
||
}
|
||
return new Blob([uInt8Array], { type: contentType });
|
||
};
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|
||
|