h5 mui 调用摄像头实现人脸识别登录

  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                 
142             div>    
143             <label>请正对手机进行人脸验证label>
144         div>    
145         
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>

 

转载于:https://www.cnblogs.com/dreamzcy/p/10314347.html

你可能感兴趣的