1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <title></title>
8 <link href="css/mui.min.css" rel="stylesheet" />
9
10 <style>
11 body,
12 div,
13 dl,
14 dt,
15 dd,
16 ul,
17 ol,
18 li,
19 h1,
20 h2,
21 h3,
22 h4,
23 h5,
24 h6,
25 pre,
26 code,
27 form,
28 fieldset,
29 legend,
30 input,
31 textarea,
32 p,
33 blockquote,
34 th,
35 td,
36 hr,
37 button,
38 article,
39 aside,
40 details,
41 figcaption,
42 figure,
43 footer,
44 header,
45 hgroup,
46 menu,
47 nav,
48 section,
49 br {
50 margin: 0;
51 padding: 0;
52 }
53
54 body {
55 font-family: "microsoft yahei";
56 color: #FFFFFF;
57 overflow-x: hidden;
58 overflow-y: hidden;
59 background: #333333;
60 }
61 .mui-bar{
62 background: #333333;
63 box-shadow: none;
64 }
65 .back{
66 font-size: 22px;
67 height: 100px;
68 line-height: 100px;
69 padding:0 10px;
70 border: 0px solid red;
71 margin-left: 10px;
72 }
73 .back img{
74 width: 12px;
75 height: 24px;
76 }
77 .mui-content{
78 width: 60%;
79 margin: 80px auto 50px auto;
80 background:#333333 ;
81 text-align: center;
82 border: 0px solid red;
83 }
84 .mui-content div{
85 width: 100%;
86 background:#333333 ;
87 border: 0px solid red;
88 }
89 .mui-content label{
90 color: #FFFFFF;
91 text-align: center;
92 border: 0px solid red;
93 }
94 .mui-btn {
95 padding: 10px;
96 width: 80%;
97 margin: auto;
98 }
99 .mui-content-setting1 {
100 width: 100%;
101 background: #333333;
102 border: 0px solid red;
103 padding: 0 10px;
104 font-size: 20px;
105 float: left;
106 }
107 .button {
108 background: url(icon/setting/button.png) no-repeat;
109 background-size: 100% 100%;
110 -moz-background-size: 100% 100%;
111 font-size: 20px;
112 width: 80%;
113 height: 50px;
114 margin: auto;
115 line-height: 50px;
116 border: none;
117 color: #FFFFFF;
118 }
119 video{
120 transform: rotateY(180deg);
121 -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
122 -moz-transform: rotateY(180deg);
123 }
124 </style>
125 </head>
126
127 <body>
128 <header class="mui-bar mui-bar-nav">
129 <div id='user' class="mui-pull-left">
130 <div class="mui-pull-left back" onclick="back()">
131 <img class="mui-icon-back" src="icon/main/back.png" />
132 </div>
133 </div>
134 <span class="mui-title">人脸识别登录</span>
135 </header>
136
137 <div class="mui-content">
138 <div style="margin: auto;margin-bottom: 50px; ">
139 <video id="video" width="100%" height="100%" style="border: 0px solid red;margin: auto;"></video>
140 <canvas id='canvas' width="100%" height="100px" style="display: none;"></canvas>
141 <!--<img id='img' src=''>-->
142 </div>
143 <label>请正对手机进行人脸验证</label>
144 </div>
145 <!--<div class="mui-content-setting1">
146 <div id='check' class="button mui-text-center">人脸识别</div>
147 </div>-->
148 <script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
149 <script src="js/mui.min.js"></script>
150 <script>
151 function back() {
152 plus.webview.open("login.html");
153 }
154 var video,canvas,vendorUrl,interval;
155 var time=0;
156 //自动拍照
157 function getface(){
158 time++;
159
160 //绘制canvas图形
161 canvas.getContext('2d').drawImage(video, 0, 0, 100, 100);
162 //把canvas图像转为img图片
163 var bdata = canvas.toDataURL("image/png");
164 //img.src = canvas.toDataURL("image/png");
165 var base64 = bdata.split(',')[1];//照片压缩成base位数据
166 //提交至接口匹配人脸库
167 $.post('http://192.168.1.39:8039/FaceWebService.asmx/getFace', {
168 "face": base64,
169 "group": "test"
170 }, function(data) {
171 //人脸识别成功直接跳转至主页
172 if(data.error_code == "0") {
173 clearInterval(interval);//清除定时器
174 plus.webview.open("main.html"); //跳转至主页
175 } else if(time>9){
176 clearInterval(interval);//清除定时器
177 time=0;//重新计时
178 //10s后未识别成功，提示用户
179 if(data.error_code == "110") {
180 alert("人脸匹配度低于70，匹配失败！");
181 } else if(data.error_code == "222202") {
182 alert("未检测到人脸,请使用账号登录！");
183 } else if(data.error_code == "222203") {
184 alert("无法解析人脸，请检查图片质量！");
185 } else if(data.error_code == "222207") {
186 alert("未找到匹配的用户，请确认人脸库中是否存在此用户！");
187 }else {
188 alert("匹配失败，错误代码：" + data.error_code + "，请联系技术人员！");
189 }
190 plus.webview.open("login.html");
191 }
192 }, 'json');
193 }
194
195 (function($, doc) {
196 $.init();
197 $.plusReady(function() {
198 video = doc.getElementById('video'),
199 canvas = doc.getElementById('canvas'),
200 vendorUrl = window.URL || window.webkitURL;
201
202 //初始化摄像头：媒体对象；仅支持android，ios11.0一下系统均不支持
203 navigator.getMedia =navigator.getUserMedia || navagator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
204
205 navigator.getMedia({
206 video: true, //使用摄像头对象
207 audio: false //不适用音频
208 }, function(strem) {
209 video.src = vendorUrl.createObjectURL(strem);
210 video.play();
211 }, function(error) {
212 alert(error);
213 });
214 //getface();
215
216 interval=setInterval(getface,1000);
217
218 /*//手动拍照
219 var checkButton = doc.getElementById('check');
220 checkButton.addEventListener('tap', function(event) {
221
222 });*/
223 });
224 }(mui, document));
225 </script>
226 </body>
227
228 </html>
浙公网安备 33010602011771号