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>