h5人脸识别-迷路的老鼠

最近帮别人做一个app嵌入人脸识别的功能，主要是用一个开源的js库，这里纪录一下，以及碰到的坑。

js库使用的歪果仁开发一套东西，叫tracking，打开摄像头，根据画面捕捉脸部(必须是脸部)。

捕获到脸部后，会把图片进行截图，转成base64的图片，上传给服务端，服务端进行下一步的人脸识别验证。

本地测试无碍，但是上传到服务器之后发现MediaDevices.getUserMedia` undefined。网上查了一下资料，本地调用没问题，如果上传到服务器，地址必须是https，否则都是 undefined 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>人脸识别</title>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="css/demo.css">
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<script type="text/javascript" src="js/face/jquery-1.9.1.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/face/layer.js"></script>
<script src="js/face/tracking.js"></script>
<script src="js/face/face-min.js"></script>


</head>

<body>
<div class="container">

<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">

<div class="row">

<div class="col-lg-12">
<a href="javascript:returnLogin()" class="btn btn-primary btn-user btn-block return">
Return
</a>
</div>

<div class="col-lg-12">
<video id="video" preload autoplay loop muted style="width:100%;object-fit:fill"></video>
<canvas id="canvas" width="100%" height="100%"></canvas>

</div>

</div>
<div id="face2" class="col-lg-12">
<canvas id="canvas1"></canvas>
</div>
</div>

</div>
</div>
<script type="text/javascript" th:inline="javascript">
$('#fps').hide();
// /*<![CDATA[*/
// var ctx = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/
// window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var canvas1 = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, {
camera: true
});
tracker.on('track', function (event) {
if (event.data.length === 0) {
console.info('无人脸');
context.clearRect(0, 0, canvas.width, canvas.height);
} else {
event.data.forEach(function (rect) {
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
// context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
// context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
Shoot();
});
}
});
// var gui = new dat.GUI();
// gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
// gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
// gui.add(tracker, 'stepSize', 1, 5).step(0.1);

// };
var isCheck = false;

function Shoot() {
if (isCheck) {
console.log("正在进行人脸识别");
return;
}
console.log("人脸识别中...");
isCheck = true;
layer.msg('login...');
var trackerTask = tracking.track(video, tracker);
var context = canvas1.getContext('2d');
//把当前视频帧内容渲染到画布上
context.drawImage(video, 0, 5, 320, 140);
var dom = document.createElement("a");
dom.href = this.canvas.toDataURL("image/png");
// dom.download = new Date().getTime() + ".png";
dom.click();
//删除字符串前的提示信息 "data:image/png;base64,"
var data = canvas1.toDataURL();
var b64 = data.substring(22);
var path = "/facemanager/search";
$.ajax({
type: 'post',
dataType: 'json',
url: path,
data: {
imgdata: b64
},
success: function (result) {
if (result.error_code == '0') {
trackerTask.stop();
layer.open({
title: '温馨提示',
content: '欢迎 ' + result.user_info,
yes: function (index, layero) {
trackerTask.run();
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
});
} else {
trackerTask.stop();
layer.open({
title: '温馨提示',
content: result.error_msg,
yes: function (index, layero) {
trackerTask.run();
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
});
}

isCheck = false;
},
error:function(){

isCheck = false;

}
})
};

function returnLogin(){
window.location.href="login.html";
}
</script>
</body>

</html>

转载请注明：迷路的老鼠 » h5人脸识别