百度AI 人脸识别 v3 node版

最新推荐文章于 2024-08-07 10:18:41 发布

ZKNA_

最新推荐文章于 2024-08-07 10:18:41 发布

阅读量3k

点赞数 2

分类专栏： javascript 文章标签：人脸识别v3 node 百度AI

本文链接：https://blog.csdn.net/Site_Dave/article/details/80207048

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2018-04-27 人脸接口V3版本发布新增人脸库管理等功能

本篇文章介绍了如何使用 nodejs 调用V3版本的人脸识别api

2018-05-05

nodejs 后台

var https = require('https')
var qs = require('querystring')
//用express搭建的服务器
var express = require('express')
var app = express()
var fs = require('fs')
var bodyParser = require('body-parser')

/*
 每次启动时都会 请求 /access 接口，从而获取新的access_token，或者可以 持久化数据，保存在json文件里，
 每隔一个月更新一次，因为每隔一个月给的access_token都会不一样
*/
var access_token = ''

const param = qs.stringify({
    'grant_type': 'client_credentials',
    'client_id': '你的 API key', 
    'client_secret': '你的 Secret Key' 
})

//这是我要对比的图片，写的时候有一个问题就是png的图片和jpg的图片不能对比，所以我都替换成png图片了
var bitmap = fs.readFileSync('./images/my03.png')
//图片转为 base64格式
var base64str1 = new Buffer(bitmap).toString('base64')

//bodyParser.urlencoded 限制了提交的大小不超过 50mb
app.use(bodyParser.urlencoded({limit: '50mb', extended: true }))

//我的html，js放在faceid文件夹下
app.use(express.static('../faceid'))

app.post('/access', function (req, res) {
    https.get(
        {
            hostname: 'aip.baidubce.com',
            path: '/oauth/2.0/token?' + param,
            agent: false
        },
        function (res) {
            res.setEncoding('utf8')
            res.on('data',function (data) {
            //取得access_token
                access_token = JSON.parse(data).access_token
            })
        }
    )
})

//这是 html界面 post请求 的judge 
app.post('/judge', function (req, res) {
    let  options = {
        host: 'aip.baidubce.com',
        path: '/rest/2.0/face/v3/match?access_token="'+access_token+'"',
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    }
    //这里还有很多参数，我都没写，具体的看官网
    /*
        从html界面传回来的数据req.body.img，然后用正则来格式化，
        replace(/\s/g, "+")这个是把任何的Unicode空白符转化为 +
        replace(/^data:image\/\w+\Wbase64,/, "") 再把字符串开头的data:image/png;base64 删除
        ^ 匹配字符串的开头，
        \/匹配/
        \w+ 匹配任何ASCII字符组成的单词 
        \W  匹配任何非ASCII字符

    */
    let contents = JSON.stringify([
        {
            image: base64str1,
            image_type: "BASE64",
        }, {
            image: req.body.img.replace(/\s/g, "+").replace(/^data:image\/\w+\Wbase64,/, ""),
            image_type: "BASE64",
        }
    ])

    let req_baidu = https.request(options, function (res_baidu) {
        res_baidu.setEncoding('utf8')
        res_baidu.on('data', function (chunk) {
            //百度返回来的数据，有得分，直接发给html，在html中处理
            res.send(chunk)
        })

    })
    req_baidu.write(contents)
    req_baidu.end()

})
//服务在3302端口
var server = app.listen(3302, function () {
    console.log('listening at http://%s','localhost:3302');
})

接下来是 html 代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="best" content="Best">
    <title>人脸识别</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            background: #f9f9f9;
        }

        body {
            display: flex;
            /*弹性布局,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
                       子元素的float、clear和vertical-align属性将失效。http://blog.csdn.net/u011300580/article/details/56011564*/
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .veriface {
            width: 800px;
            height: 500px;
            background-color: #FFFFFF;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .veriface .capture {
            display: block;
            width: 760px;
            height: 360px;
            background-color: #222222;
        }

        .veriface .control {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 70px;
        }

        .veriface .control span {
            width: 100px;
            height: 45px;
            background: #F9F9F9;
            text-align: center;
            line-height: 45px;
            color: #222222;
            font-size: 12px;
            border-radius: 8px;
            box-shadow: 0 0 4px #cccccc;
            user-select: none;
            cursor: pointer;
            transition: 1s;
        }

        .veriface .control span:hover {
            background-color: #e6e6e6;
        }

        .veriface h3.notice {
            color: #336688;
        }
        .draw_img{
            position: fixed;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<canvas class="draw_img" width="300" height="200"></canvas>
<div class="veriface" style="margin-top: 3px">
    <video class="capture" width="760" height="360" src=""></video>
    <h3 class="notice">把脸放过来</h3>
    <div class="control">
        <span class="open">开启摄像头</span>
        <span class="recognition">人脸识别</span>
        <span class="close">关闭摄像头</span>
    </div>
</div>
<script>
    /*
          从前台到后台的人脸识别
            1.开启摄像头
                1)window.navigator
            2.同步到video的src
                对象=> window.URL =>blob
                1)解析视频流为blob 添加到 src
            3.canvas创建视频片段照片
            4.
    */

    var open = document.querySelector('.open');//获取open按钮
    var capture = document.querySelector('.capture'); // 获取video标签
    var recognition = document.querySelector('.recognition'); //获取人脸识别的按钮

    var close = document.querySelector('.close');
    var notice = document.querySelector('.notice');
    var canvas = document.querySelector('.draw_img');
    var context = canvas.getContext('2d');
    var buffer;

    open.onclick = invokingCamera;  //回调函数 函数名称加括号是主动执行
    recognition.onclick = screenShot;  //点击人脸识别
    close.onclick = function () {
        //console.log(buffer);
        buffer && buffer.getTracks()[0].stop(); //停止视频流
        //console.log(buffer);
    }
    //获取摄像头,获取流媒体数据
    function invokingCamera() {
        if (navigator.mediaDevices.getUserMedia) {
            //优先使用前置摄像头
            navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: "user"}}).then(
                //获取视频流数据 成功后
                function (MediaStream) {
                    //console.log(stream);
                    buffer = MediaStream; //会指向一个内存地址
                    //console.log(buffer);
                    capture.srcObject = MediaStream;
                    capture.onloadedmetadata = function(e) {
                        capture.play();
                    };
                }
            ).catch(
                //失败后
                function (err) {
                    console.log(err.name + ": " + err.message);
                }
            );
        } else {
            alert('您的浏览器不支持摄像头');
        }
    }

    function screenShot() {
        msg('正在检测,请稍后~~~', '#c665ff');
        context.drawImage(capture,0,0,200,150);
        new Post({
            url: '/judge',
            data:canvas.toDataURL('image/png'),
            success: function (res) {
                 console.log(res); //服务器发送的消息
                res = JSON.parse(res).result.score;
                console.log(typeof res);
                if (res > 85) {
                    msg('欢迎主人~', '#7ef6c7');
                } else {
                    msg('丑拒~~', '#f10d0f');
                }
            }
        })
    }

    function msg(con, color) { //输出信息
        notice.innerHTML = con + '';
        notice.style.color = color;
    }

    //post 方式传输数据 get的话 base64 5mb url
    function Post(opt) {
        //构造函数
        this.init(opt);
    }

    Post.prototype = {
        init: function (opt) {  //初始化 参数 URL地址 Data参数 method方式
            this.url = opt.url || '';
            this.data = opt.data || {};
            this.method = 'POST';
            this.async = true;//异步
            this.success = opt.success || function () {  //回调函数
            }
            this.xhr();
        },
        xhr: function () {
            var that = this;
            var xhr = new XMLHttpRequest();//ajax对象实例化
            console.log(this.data)
            //请求的类型  请求地址 异步或者同步
            xhr.open(this.method, this.url, this.async);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); //表头
            xhr.send('img='+this.data);
            xhr.onreadystatechange = function (ev) {
                if (xhr.status === 200 && xhr.readyState === 4) {
                    this.success(xhr.response);//回调数据
                }
            }.bind(this);
        }
    }
    new Post({
        url: '/access',
        data:'',
    })
</script>
</body>
</html>