html+php+百度api 调用本地摄像头进行人脸匹配

index.php

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7   <title>人脸识别DEMO</title>
  8   <script src="./include/js/jquery-1.9.1.min.js"></script>
  9   <style>
 10     #login{
 11       border: 1px solid gray;
 12       border-radius: 20px;
 13       width: 320px;
 14       height: 320px;
 15       position: absolute;
 16       top: 50%;
 17       left: 50%;
 18       margin-top: -160px;
 19       margin-left: -160px;
 20       /* background-color: gray; */
 21       text-align: center;
 22     }
 23 
 24     .face-login{
 25       width: 100%;
 26       height: 100%;
 27     }
 28 
 29     .display{
 30       margin-top: 50px;
 31       width: 50%;
 32       height: 50%;
 33       border-radius: 50%;
 34     }
 35 
 36   </style>
 37 </head>
 38 <body>
 39   <div id="login">
 40     <button class="capture">登陆</button>
 41     <div class="face-login">
 42       <video class="video" width="320" height="320" style="display:none" ></video>
 43       <canvas class="canvas" width="320" height="320" style="display:none" ></canvas>
 44       <img class="display" src="" alt="face">
 45       <div class="result"></div>
 46     </div>
 47   </div>
 48 
 49   <script>
 50     var imgData = null;
 51     var timer = null; 
 52 
 53     $(document).ready(function(){
 54       
 55       let $video = $('.video').get(0);
 56       let $canvas = $('.canvas').get(0);
 57       let $capture = $('.capture');
 58       let $result_div = $(".result");
 59 
 60       let context = $canvas.getContext('2d');
 61       var mediaStream;
 62 
 63       //访问用户媒体设备的兼容方法
 64       function getUserMedia(constraints, success, error) {
 65         if (navigator.mediaDevices.getUserMedia) {
 66           //最新的标准API
 67           navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
 68         } else if (navigator.webkitGetUserMedia) {
 69           //webkit核心浏览器
 70           navigator.webkitGetUserMedia(constraints,success, error)
 71         } else if (navigator.mozGetUserMedia) {
 72           //firfox浏览器
 73           navigator.mozGetUserMedia(constraints, success, error);
 74         } else if (navigator.getUserMedia) {
 75           //旧版API
 76           navigator.getUserMedia(constraints, success, error);
 77         }
 78       }
 79 
 80       function success(stream) {
 81         //兼容webkit核心浏览器
 82         let CompatibleURL = window.URL || window.webkitURL;
 83         //将视频流设置为video元素的源
 84         console.log(stream);
 85         mediaStream = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
 86 
 87         //video.src = CompatibleURL.createObjectURL(stream);
 88         $video.srcObject = stream;
 89         $video.play();
 90 
 91       }
 92 
 93       function error(error) {
 94         alert(`访问用户媒体设备失败：${error.name}, ${error.message}`);
 95       }
 96 
 97       function userMediaClose(){
 98         mediaStream && mediaStream.stop();
 99       }
100 
101       //参考：https://blog.csdn.net/Rachel_ruiqiu/article/details/78614920
102       function convertBase64UrlToBlob(urlData){
103         var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
104         //处理异常,将ascii码小于0的转换为大于0
105         var ab = new ArrayBuffer(bytes.length);
106         var ia = new Uint8Array(ab);
107         for (var i = 0; i < bytes.length; i++) {
108             ia[i] = bytes.charCodeAt(i);
109         }
110         return new Blob( [ab] , {type : 'image/jpeg'});
111       }
112 
113       function timerHandller(){
114         context.drawImage($video, 0, 0, 320, 320); 
115 
116         var type = 'jpeg';
117         imgData = $canvas.toDataURL(type);
118 
119         $(".display").attr('src', imgData);
120       }
121 
122       function timerStart(){
123         timer = setInterval(timerHandller, 100);
124       }
125       timerStart();
126 
127       function timerStop(){
128         clearInterval(timer);
129       }
130 
131       if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
132         //调用用户媒体设备, 访问摄像头
133         getUserMedia({video : {width: 320, height: 320}}, success, error);
134       } else {
135         alert('不支持访问用户媒体');
136       }
137 
138       //上传
139       $capture.on('click',function(){
140         $result_div.empty();
141         $result_div.append('<p>面部匹配中，请稍后...</p>')
142 
143         var formDate = new FormData();
144         formDate.append("image", convertBase64UrlToBlob(imgData));
145 
146         $.ajax({
147             type: "POST",
148             url: "/face_login.php",
149             data: formDate,
150             timeout: 10000,
151             contentType: false,
152             processData: false,
153             success: function(data){
154               var obj= $.parseJSON(data);  
155               login(obj.access, obj.score.toFixed(2));
156             },
157             error: function(data){
158                 console.log('error');
159             },
160             complete: function(xhr, status){
161               if(status=='timeout'){
162                 displayInfo("处理超时，请重新匹配！");
163               }
164             }
165         })
166       })
167 
168       function displayInfo(info){
169         $result_div.empty();
170         $result_div.append('<p>'+info+'</p>')
171       }
172 
173       //登陆提示
174       function login(access,score){
175         if(access)
176         {
177           displayInfo("面部匹配成功，匹配得分："+score);
178           //简单跳转
179           setTimeout(() => {
180             window.location.href="./welcome.php";
181           }, 1000);
182         }else{
183           displayInfo("面部匹配失败，匹配未通过！")
184         }
185       }
186 
187     })
188   </script>
189 </body>
190 </html>

face-login.php

<?php
header('Content-Type:text/html; charset=utf-8');
date_default_timezone_set('PRC'); //为date('YmdHis')函数设置默认时区

define ("SUCCESS_SCORE",90.00);

require_once './include/AipFace.php';

// const APP_ID = ''; //app-id
// const API_KEY = ''; //app-key
// const SECRET_KEY = ''; //secret-key

$client = new AipFace(APP_ID, API_KEY, SECRET_KEY);

//获取数据部分
function imageDataSplit($img)
{
    if (strstr($img,",")){
        $img = explode(',',$img);
        $img = $img[1];
    }

    return $img;
}

//接收保存图片
//************************************************************************************************** */
// $image = $_POST['image'];
//$image = imageDataSplit($image);

$image = $_FILES["image"];
$image_name = 'face_tmp.jpg';

$path = './files';
//检测路径是否存在
if (!is_dir($path)){
    mkdir($path,0777,true);
}else{
    move_uploaded_file($image['tmp_name'], $path."/".$image_name);  //将上传的文件保存到服务器上指定的位置
}

//************************************************************************************************** */
//人脸识别

function faceSearch($file)
{
    global $client, $path, $image_name;
    $file_path = $path."/".$image_name;

    $image = ''.base64_encode(file_get_contents($file_path));
    $imageType = "BASE64";
    $groupIdList = "blog"; //组id
    
    // // 调用人脸搜索
    // //$client->search($image, $imageType, $groupIdList);
    
    // // 如果有可选参数
    $options = array();
    $options["max_face_num"] = 1;
    $options["match_threshold"] = 80;
    $options["quality_control"] = "NORMAL";
    $options["liveness_control"] = "HIGH";
    $options["user_id"] = "0204"; //
    $options["max_user_num"] = 3;
    
    // 带参数调用人脸搜索
    $result = $client->search($image, $imageType, $groupIdList, $options);

    //echo json_encode($result);

    $error_code = $result['error_code'];
    $error_msg = $result['error_msg'];
    $result_user_list = $result['result']['user_list'];

    if($error_code == 0){
        $user_score = 0;
        foreach($result_user_list as $user){
            $user_score = $user["score"] > $user_score ? $user['score'] : $user_score;
        }
        if($user_score > SUCCESS_SOCRE){
            $res = array('access'=>true,'score'=>$user_score);
        }

    }else{
        $res = array('access'=>false,'score'=>0);
    }

    unlink($file_path);

    echo json_encode($res);
}

faceSearch($image);

function faceMatch($image0, $image1)
{
    $result = $client->match(array(
        array(
            //'image' => base64_encode(file_get_contents('20191220011448111.jpg')),
            'image' => $image0,
            'image_type' => 'BASE64',
        ),
        array(
            // 'image' => base64_encode(file_get_contents('20191220011710563.png')),
            'image' => $image1,
            'image_type' => 'BASE64',
        )
    ));

    //echo json_encode($result, JSON_FORCE_OBJECT);
}

//请求方式检测
function get_request_method()
{
    // $_SERVER包含了诸多头信息、路径、以及脚本位置等等信息的数组，这个数组中的项目有web服务器创建。
    
    if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') return 'AJAX';
    else if ( ! empty($_POST)) return 'POST';
    else return 'GET';
}

welcome.php (检测成功跳转页面)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello</title>
</head>
<body>
  <h4>登陆完成，欢迎！</h4>
</body>
</html>

效果：

posted @ 2019-12-21 01:19 Yan327 阅读(810) 评论(0) 收藏举报

刷新页面返回顶部

Yan327

https://www.wiyixiao4.com/blog

html+php+百度api 调用本地摄像头进行人脸匹配

公告