借助百度云平台人脸识别sdk完成网页人脸识别登录demo

最新推荐文章于 2023-01-17 12:51:08 发布

sillyyijia

最新推荐文章于 2023-01-17 12:51:08 发布

阅读量1.4k

点赞数 5

分类专栏：百度云平台人工智能demo

本文链接：https://blog.csdn.net/sillyyijia/article/details/104041778

版权

百度云平台人工智能demo 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

最近在浏览百度云平台人工智能相关产品时，萌生了做一个网页人脸识别登录的demo。
以下是前端代码：
实现在浏览器调用摄像头，捕捉图片后上传到服务器验证。

<!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>sliyCode_yi</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        img {
            filter: blur(5px);
        }
        .img_box {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            box-shadow: 0 0 30px #02a2d2;
        }
        .find_people {
            position: absolute;
            bottom: -80px;
            width: 300px;
            text-align: center;
            font-weight: 600;
            font-size: 20px;
            color: skyblue;
        }
    </style>
</head>
<body>
    <img src="./bg.jpg" alt="" width="100%" height="auto">
    <div class="img_box">
        <canvas id="canvas" width="300" height="300">

        </canvas>
        <p class="find_people">人脸识别登录</p>
    </div>
    <script>
        var video = document.createElement('video'),
        canvas = document.getElementById('canvas'),
        snap = document.getElementById('tack'),
		down = document.getElementById('down'),
        img = document.getElementById('img'),
        timer = null,
        vendorUrl = window.URL || window.webkitURL;
        var context = canvas.getContext("2d");
        video.width = 300;
        video.height = 300;
        //媒体对象
        navigator.getMedia = navigator.getUserMedia ||
            navagator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia;
        navigator.getMedia({
            video: true, //使用摄像头对象
            audio: false  //不适用音频
        }, function(strem){
            //这个方法要报错：video.src = window.URL.createObjectURL(strem);
            video.srcObject = strem;
            video.onloadedmetadata = function(e) {
                video.play();
                timer = setInterval(() => {
                    context.drawImage(video, 0, 0, canvas.width, canvas.height)
                }, 16);
            };
            canvas.onclick = function(){
                clearInterval(timer);
                canvas.toBlob(function(blob){
                    var formdata = new FormData;
                    let fileBlob = new File([blob], new Date().getTime() + '.png')
                    formdata.append("file",fileBlob);
                    $.ajax({
                    url: "/facegoole",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    success: function(data){
                        if(data.status == 0 && !!JSON.parse(data.data)['result'] && JSON.parse(data.data)['result']['user_list'][0]['score']>60){
                            alert("登录成功");
                        }else{
                            alert("登录失败");
                        }
                    },
                    error: function(err){
                        console.log(err,2);
                    }
                })
                },"image/jpeg",1)
                
            }
        }, function(error) {
            console.log(error);
        })
    </script>
</body>
</html>

以下是node版后端代码
实现接收前端传来的图片并保存到本地。验证图片与百度云平台人脸库中图片的相似度，并返回到前端。

var fileName = "";
var request = require("request");
var fs = require("fs");
var path = require("path");
//图片上传
let storage = multer.diskStorage({
  //存储目录
  destination: function(req, file, cb){
    cb(null, path.join(__dirname,"../public/images"));
  },
  //文件名
  filename: function(req, file, cb){
    fileName = Date.now() +file.originalname.match(/(\.(jpe?g|png|gif|webp|JPG|psd))$/)[0];
    cb(null, fileName)
  }
});
router.post("/facegoole",function(req, res, next){
  fileName = "";
  upload(req, res, function(err){
    if(err instanceof multer.MulterError){
      //发生错误
      res.json({status: 1, message: "出现错误"});
      return;
    }else if(err){
      //发生错误
      res.json({status: 1, message: "出现错误"});
      return;
    }
    var image = fs.readFileSync(path.join(__dirname,`../public/images/${fileName}`));
    var base64Img = Buffer(image).toString("base64");
    const Url = "https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=**************************";//access_token需自己生成，见后续代码
    var Res = res;
    request.post({
      url: Url,
      headers: {
          "Content-Type": "application/json",
      },
      form: {
          image: base64Img,
          image_type: "BASE64",
          group_id_list: "unity_1"
        }
    },function(err,res,body){
        if(err){
            Res.json({status: 1,message: "操作失败"});
            return;
        }else{
            Res.json({status: 0, img: fileName,data:body});
            return;
        }
      
    })
  })
})

生成access_token代码node版

//获取access_token
var https = require("https");
var qs = require("querystring");
const param = qs.stringify({
    "grant_type": "client_credentials",
    'client_id': "填写百度云平台上自己创建应用的client_id",
    "client_secret": "填写百度云平台上自己创建应用的client_secret"
})
https.get({
    hostname: "aip.baidubce.com",
    path: "/oauth/2.0/token?"+param,
    agent: false 
},function(res){
    res.pipe(process.stdout);
})

以下是效果图
在这里插入图片描述

sillyyijia

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
3
评论
借助百度云平台人脸识别sdk完成网页人脸识别登录demo

最近在浏览百度云平台人工智能相关产品时，萌生了做一个网页人脸识别登录的demo。以下是前端代码：实现在浏览器调用摄像头，捕捉图片后上传到服务器验证。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...
复制链接

扫一扫