基于node.js 实现百度ai人脸检测功能（api）_博客园 nodejs 从视频流识别人脸

基于node.js 实现百度ai人脸检测功能（api）

很有幸和老师同学们一起尝试学习百度ai的相关技术文档，自己做了一个很ez的人脸检测的小网页，和大家分享一下。

百度ai技术文档 百度ai人脸检测技术文档

1.首先根据技术文档中的要求我们要获取access_token
这个我们只需要去注册自己的百度智能云的id账号，然后进入人脸识别页面页面，创建自己的应用，就可以获取到自己的API Key 以及Secret Key，拿到这个就可以去根据实例代码获取我们要的access_token了。
示例图如下：

根据百度ai技术文档提供的获取access_token的方法，可以获取到如下相关信息。

注意这是一个node的项目，相关模块需要用npm/cnpm安装，我想有node基础的同学就不用我阐述了。

官方获取access_token代码如下：

var https = require('https');
var qs = require('querystring');

const param = qs.stringify({
    'grant_type': 'client_credentials',
    'client_id': 'xCRoucNpcqBSL3Ssvyz9003z',
    'client_secret': 'wTxCPkMOnNZmat4PxWMgu8wU2QA8ZvGK'
});

https.get({
        hostname: 'aip.baidubce.com',
        path: '/oauth/2.0/token?' + param,
        agent: false
    },
    function (res) {
        // 在标准输出中查看运行结果
        res.pipe(process.stdout);
    }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：client_id 和 client_secert 分别填入你获取到的API Key 以及Secret Key。这样运行这个js文件， 用node命令运行，dos返回结果

/*{
    "refresh_token": "25.229e474f1ddaa3dd8bf615a0640c1db5.315360000.1886430622.282335-17511300",
    "expires_in": 2592000,
    "session_key": "9mzdWrktAR59shMTTbnfWJ2QNQo6NqrQQiSZlE94z70aI5ttomvuXYJVIPzSXw2n3cMf7hgoug5m4hhhYoeIUTlDmx+byA==",
    "access_token": "24.ae8755d49cf860037da7cb9f4868af07.2592000.1573662622.282335-17511300",
    "scope": "vis-ocr_ocr brain_ocr_idcard public brain_all_scope vis-faceverify_faceverify_h5-face-liveness vis-faceverify_FACE_V3 vis-faceverify_idl_face_merge brain_cvpaas-app-scope wise_adapt lebo_resource_base lightservice_public hetu_basic lightcms_map_poi kaidian_kaidian ApsMisTest_Test\u6743\u9650 vis-classify_flower lpq_\u5f00\u653e cop_helloScope ApsMis_fangdi_permission smartapp_snsapi_base iop_autocar oauth_tp_app smartapp_smart_game_openapi oauth_sessionkey smartapp_swanid_verify smartapp_opensource_openapi smartapp_opensource_recapi fake_face_detect_\u5f00\u653eScope",
    "session_secret": "c66f9aa948dc1c44b542d8798626ad6d"
}
*/
1
2
3
4
5
6
7
8
9
10

这里获取到的"access_token"就是我们要的数据

2.然后请求官方api，人脸识别的接口，这个会在你创建的应用下面有，分为v2和v3版本。
示例图如下：

如图可以看到人脸识别接口的api，以及接口是v3
然后完善我们后台的请求接口 /face

let express = require('express');
let https = require('https');
let request = require('request');
var router = express.Router();


//人脸识别接口
var token = "24.ae8755d49cf860037da7cb9f4868af07.2592000.1573662622.282335-17511300";

//url  林更新
var str = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1219144778,2690834063&fm=26&gp=0.jpg';

router.post('/', (req, res) => {
    let options = {
        host: 'aip.baidubce.com',
        path: '/rest/2.0/face/v3/detect?access_token="' + token + '"',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    };

    let contents = JSON.stringify({     
       // url  图片类型
        image: str,
        image_type: "URL",
        "face_field": 'age,beauty,expression,face_shape,gender,glasses,race',
        //这里根据文档填入你想要获取到的参数
    });

    let req_baiduai = https.request(options, function (res_baiduai) {
        res_baiduai.setEncoding('utf8');
        res_baiduai.on('data', function (chunk) {
            res.send(chunk)
            var testResult = JSON.parse(chunk);
            console.log(chunk)
            res.end();
        })
    });
    req_baiduai.write(contents);
    req_baiduai.end();
});
module.exports = router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

注意： 如果要使用BASE64 图片类型
需要修改上述代码：
var fs = require(‘fs’);
var image = fs.readFileSync(’./ab.png’).toString(‘base64’);
添加fs模块获取你要测试的本地图片并且转换为base64格式

修改body请求体
//base 64 图片类型
image: image,
image_type: “BASE64”,

3.通过前端获取到我们的后台接口/face返回的请求百度的数据
其中数据是通过ajax获取到的，并且通过js全局变量返回到全局环境以便于之后的渲染操作。

 $.ajax({
        //几个参数需要注意一下
        type: "post", //方法类型
        // dataType: "json", //预期服务器返回的数据类型
        url: "http://localhost:2019/face", // url
        // data: $('#form1').serialize(),
        success: function (res) {
            {

                console.log(res); //打印服务端返回的数据(调试用);
                a += res;
                alert("提交成功！！！");
                return a;
            }
        },
        async: false,
        error: function () {
            alert("提交异常！");
        },
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4.布局前端页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="icon" href="../images/bg.jpg" type="images/x-ico" />
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    html,
    body {
        width: 100%;
        height: 100%;
        background-image: url(../images/007.jpg);
        background-size: cover;
        overflow-y: hidden;
    }

    video {
        position: absolute;
        left: 100px;
        border: 10px solid white;
    }

    canvas {
        position: absolute;
        left: 150px;
        bottom: -20px;
    }

    button {
        position: absolute;
        width: 100px;
        height: 30px;
        top: 330px;
        left: 260px;
    }

    .result {
        position: absolute;
        width: 370px;
        height: 500px;
        right: 200px;
        top: 30px;
        /* border: 5px solid white; */
        text-align: center;
        padding: 20px;
        color: white;
        /* background: black; */
    }

    p {
        text-align: left;
        font-size: 20px;
        font-weight: 600;
        color: white;
        line-height: 30px;
    }
</style>

<body>
    <video id="video" width="400" height="300" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="400" height="300"></canvas>

    <div class="result">
        <h1>人脸属性</h1>
        <p>"face_num"：{{ msg0 }}</p>
        <p>"face_token"：{{ msg1 }}</p>
        <p>"face_probability"：{{ msg2 }}</p>
        <p>"age"：{{ msg3 }}</p>
        <p>"beauty"：{{ msg4 }}</p>
        <p>"expressiton"：{{ msg5 }}</p>
        <p>"face_shape"：{{ msg6 }}</p>
        <p>"gender"：{{ msg7 }}</p>
        <p>"glasses"：{{ msg8 }}</p>
        <p>"race"：{{ msg9 }}</p>
    </div>
</body>
<script type="text/javascript">
    var aVideo = document.getElementById('video');
    var aCanvas = document.getElementById('canvas');
    var ctx = aCanvas.getContext('2d');

    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）
    navigator.getUserMedia({
        video: true
    }, gotStream, noStream); //参数1获取用户打开权限；参数二是一个回调函数，自动传入视屏流，成功后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息

    function gotStream(stream) {

        // video.src = URL.createObjectURL(stream); // 老写法
        aVideo.srcObject = stream;

        aVideo.onerror = function () {
            stream.stop();
        };
        stream.onended = noStream;
        aVideo.onloadedmetadata = function () {
            // alert('摄像头成功打开！');
        };
    }

    function noStream(err) {
        alert(err);
    }

    document.getElementById("snap").addEventListener("click", function () {
        ctx.drawImage(aVideo, 0, 0, 320, 240); //将获取视频绘制在画布上
    });

    //cancas 保存图片
    


    var a = "";
    $.ajax({
        //几个参数需要注意一下
        type: "post", //方法类型
        // dataType: "json", //预期服务器返回的数据类型
        url: "http://localhost:2019/face", // url
        // data: $('#form1').serialize(),
        success: function (res) {
            {

                console.log(res); //打印服务端返回的数据(调试用);
                a += res;
                alert("提交成功！！！");
                return a;
            }
        },
        async: false,
        error: function () {
            alert("提交异常！");
        },
    });
    var testResult = JSON.parse(a);
    // var datalist = JSON.parse()

    var vm = new Vue({

        el: '.result', // 表示 我们 new的这个实例要去控制页面上的哪个区域
        data: { //data中存放的是el中要用到的数据
            msg0: testResult.result.face_num,
            msg1: testResult.result.face_list[0].face_token,
            msg2: testResult.result.face_list[0].face_probability,
            msg3: testResult.result.face_list[0].age,
            msg4: testResult.result.face_list[0].beauty,
            msg5: testResult.result.face_list[0].expression,
            msg6: testResult.result.face_list[0].face_shape,
            msg7: testResult.result.face_list[0].gender,
            msg8: testResult.result.face_list[0].glasses,
            msg9: testResult.result.face_list[0].race,


            //通过vue提供的指令就可以简单的把数据渲染到页面上，不提倡操作dom
        }
    });
</script>
<script>



</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

其中数据是通过vue渲染上去的，可能拿数据比较粗鲁，但是因为时间原因，嘻嘻嘻，希望大家理解。

最后的效果如下：

测试
如果你使用的图片是url形式，只需要在网上找一些明星照片然后填入url地址就可以，如果你使用base64格式图片，可以在摄像头开启之后拍摄一张图片，（我是用canvas画布将拍照效果保存页面上，你可以直接右键保存到你的项目的文件夹下）然后再次刷新页面就会出现效果。
有什么问题可以私聊我