<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人脸检测</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="tracking.js"></script>
<script src="face-min.js"></script>
<script src="training/Landmarks.js"></script>
<script src="training/Regressor.js"></script>
<script src="stats.min.js"></script>
<style>
#regcoDiv {
width: 100%;
height: 530px;
position: relative;
background: #eee;
overflow: hidden;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/*-webkit-animation: twinkling 1s infinite ease-in-out;*/
/*-webkit-animation-duration: 1s;*/
/*animation-duration: 1s;*/
/*-webkit-animation-fill-mode: both;*/
/*animation-fill-mode: both*/
}
video, canvas {
margin-left: 230px;
/*margin-top: 120px;*/
position: absolute;
}
.className {
-webkit-animation: twinkling 1s infinite ease-in-out
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling {
0% {
background: #eee;
}
35% {
background: #08e800;
}
56% {
background: #1f25d4;
}
100% {
background: #eee;
}
}
@keyframes twinkling {
0% {
background: #eee;
}
35% {
background: #08e800;
}
56% {
background: #1f25d4;
}
100% {
background: #eee;
}
}
</style>
</head>
<body>
<div id="regcoDiv">
</div>
<div>
<table frame="void">
<tr>
<td>
<button title="人脸识别" value="人脸识别" onclick="getMedia2()"
style="color:#FFFFFF;height: 30px;display:block;margin:0 auto;margin-top:10px;width:120px;background-color: #3F51B5;border-radius:5px;text-align: center;line-height: 30px;font-size: 20px">
摄像头识别
</button>
</td>
</tr>
<tr>
<td colspan="2">
<button id="snap" onclick="chooseFileChangeComp()"
style="color:#FFFFFF;height: 30px;display:block;margin:0 auto;margin-top:10px;width:100px;background-color: #3F51B5;border-radius:5px;text-align: center;line-height: 30px;font-size: 20px">
提交
</button>
</td>
</tr>
</table>
</div>
<div>
<img id="imageDivComp"/>
</div>
</body>
</html>
<script>
getMedia2()
$("#imageDivComp").click(function () {
$("#chooseFileComp").click();
});
var t1;
/**
* 开始画摄像头
*/
function getMedia2() {
$("#regcoDiv").empty();
let vedioComp = "<video id='video2' width='500px' height='500px' autoplay='autoplay' playsinline webkit-playsinline='true' ></video><canvas id='canvas2' width='500px' height='500px'></canvas>";
$("#regcoDiv").append(vedioComp);
let constraints = {
video: {width: 500, height: 500},
audio: true
};
//获得video摄像头区域
let video = document.getElementById("video2");
// 这里介绍新的方法，返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
/**
* 模拟手机端 三秒主动提交检测
* @type {number}
*/
t1 = window.setInterval(function () {
chooseFileChangeComp()
}, 3000)
}
/**
* 提交检测 请求接口
*/
function chooseFileChangeComp() {
let regcoDivComp = $("#regcoDiv");
if (regcoDivComp.has('video').length) {
let video = document.getElementById("video2");
let canvas = document.getElementById("canvas2");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
var base64File = canvas.toDataURL();
var formData = new FormData();
formData.append("url", base64File);
formData.append("oId", 1);
formData.append("uid", 1);
$.ajax({
type: "post",
url: "/arcFace/arcFaceSearch",
data: formData,
contentType: false,
processData: false,
async: false,
success: function (text) {
var res = JSON.stringify(text)
if (text.success == true && text.RgbLiveness == 1) {
console.log(text);
clearInterval(t1);
console.log(text.baseUrl);
} else {
console.log(text);
}
},
error: function (error) {
alert(JSON.stringify(error))
}
});
}
}
/**
* 人脸追踪画框
**/
window.onload = function () {
let video = document.getElementById("video2");
let canvas = document.getElementById("canvas2");
let context = canvas.getContext('2d');
var tracker = new tracking.LandmarksTracker();
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track(video, tracker);
tracker.on('track', function (event) {
context.clearRect(0, 0, canvas.width, canvas.height);
if (!event.data) return;
// 画框样式
event.data.faces.forEach(function (rect) {
context.strokeStyle = '#eb4c4c';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '16px Helvetica';
context.fillStyle = "#000";
context.lineWidth = '5';
context.fillText('人脸横向: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('人脸纵向: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 50);
});
/**
* 人脸追踪 颗粒
*/
event.data.landmarks.forEach(function (landmarks) {
for (var l in landmarks) {
context.beginPath();
context.fillStyle = "#fff";
context.arc(landmarks[l][0], landmarks[l][1], 1, 0, 2 * Math.PI);
context.fill();
}
});
});
// 这里如果报错 不用管
var gui = new dat.GUI();
gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01).listen();
gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1).listen();
gui.add(tracker, 'stepSize', 1, 5).step(0.1).listen();
};
</script>
