实现一个前后端的CS结构人脸识别小程序服务
原创
一、实现方式：前端调用相机组件实现人脸在线采集，然后将人脸图片传到自建的服务端调用人脸识别-人脸检测与分析API将识别结果回调到小程序页面中。
二、实现流程
第一步：配置服务器域名
第二步：实现小程序的Demo
在小程序公共配置文件app.json中，添加页面生成参数
"pages/camera/camera",
点击"编译"生成页面目录及页面
camera.wxml
<!-- camera.wxml -->
<camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Gender'] > 50}}">性别：男</view>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Gender'] < 50}}">性别：女</view>
<view>年龄：{{ FaceInfos['0']['FaceAttributesInfo']['Age'] }}</view>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Expression'] == 0 }}">表情：正常</view>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Expression'] < 50 }}">表情：微笑</view>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Expression'] > 50 }}">表情: 大笑</view>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Beauty'] == 0 }}">魅力值：一般</view>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Beauty'] < 50 }}">魅力值：有点迷人</view>
<view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Beauty'] > 50 }}">魅力值：偶像级</view>
<view>请求的图片宽度：{{ ImageWidth }}</view>
<view>请求的图片高度：{{ ImageHeight }}</view>
<view>人脸框左上角横坐标：{{ FaceInfos['0']['X'] }}</view>
<view>人脸框左上角纵坐标：{{ FaceInfos['0']['Y'] }}</view>
<view>人脸框宽度:{{ FaceInfos['0']['Width'] }}</view>
<view>人脸框高度：{{ FaceInfos['0']['Height'] }}</view>
<image mode="widthFix" src="{{src}}"></image>使用的组件：
使用的视图容器：
使用的XML语法：
使用的视图层：
camera.json
{
"navigationBarTitleText": "人脸识别在线测试",
"backgroundColor": "#eeeeee"
}camera.js
// camera.js
Page({
takePhoto() {
var that=this;
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
wx.request({
url: 'https://tencentcloud.cdhwdl.com:8000', //仅为示例，并非真实的接口地址
method:'post',
data: {
x: "data:image/jpg;base64," + wx.getFileSystemManager().readFileSync(res.tempImagePath, 'base64')
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
that.setData({
ImageWidth: res.data.Result.ImageWidth+"px",
ImageHeight: res.data.Result.ImageHeight+"px",
FaceInfos: res.data.Result.FaceInfos,
})
console.log(res.data)
}
})
}
})
},
error(e) {
console.log(e.detail)
}
})使用到的知识点： Page 构造器
创建 camera 上下文 CameraContext 对象
注意：如果自定义函数中嵌套了wx等对象函数，数据传递应该先声明"var that=this"，然后再嵌套函数，如wx.request中使用"that.setData"来传递数据
后端数据结构
第三步：搭建nodejs服务端
任意安装一款Linux发行版系统(安装过程略)
[root@zhang .nvm]# cat /etc/redhat-release
CentOS release 6.9 (Final)安装2.0版本以上的git客户端，如果你的系统是Centos发行版的，可以参考下面的安装演示；如果是其他发行版，可以参考git官网指引，通过简单的命令即可安装
非Centos发行版系统安装方式参考Git官方文档下载指引
Centos发行版系统（这里是Centos6.9）安装流程如下：
安装Git依赖包：
检查是否安装"Development Tools"软件组，若未安装则执行安装命令
[root@zhang tmp]# yum grouplist | grep "Development Tools"
[root@zhang tmp]#
[root@zhang yum.repos.d]# yum groupinstall "Development Tools" -y
[root@zhang yum.repos.d]# yum grouplist | grep "Development tools"
Development tools安装其他软件包（如果已安装了会提示已安装）
yum install zlib-devel -y
yum install perl-ExtUtils-MakeMaker -y
yum install asciidoc -y
yum install xmlto -y
yum install openssl-devel -y
yum install gcc -y
yum install curl-devel -y
yum install expat-devel -y
yum install gettext-devel -y卸载现有Git
[root@zhang git-2.0.5]# yum remove git -y下载2.0版本的Git客户端，如果下载慢，可以用网速较好的机器下载后再上传到服务器中，下载后解压
[root@zhang tmp]# wget https://www.kernel.org/pub/software/scm/git/git-2.0.5.tar.gz[root@zhang tmp]# ls -lh | grep git
drwxrwxr-x 19 root root 12K Dec 19 2014 git-2.0.5
-rw-r--r-- 1 root root 4.7M Dec 19 2014 git-2.0.5.tar.gz进入解压目录，三步编译安装法安装
软件配置与检查
[root@zhang git-2.0.5]# ./configure --prefix=/usr/local/git编译成二进制文件
[root@zhang git-2.0.5]# make安装编译后的文件到指定目录
[root@zhang git-2.0.5]# make install将Git的运行程序路径配置到全局环境变量中（路径为"/usr/local/git/bin"）
[root@zhang git-2.0.5]# vi /etc/profile[root@zhang git-2.0.5]# cat /etc/profile | grep "export PATH="
export PATH=/usr/local/nginx/sbin:/usr/local/php/bin:/usr/local/mysql/bin:$PATH:/usr/local/git/bin使得修改生效
[root@zhang git-2.0.5]# source /etc/profile
[root@zhang git-2.0.5]# 查看git版本号
[root@zhang git-2.0.5]# git --version
git version 2.0.5安装nvm
参考官方文档：https://github.com/nvm-sh/nvm/blob/master/README.md
[root@zhang git-2.0.5]# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 13527 100 13527 0 0 5385 0 0:00:02 0:00:02 --:--:-- 12131
=> Downloading nvm from git to '/root/.nvm'
=> Cloning into '/root/.nvm'...
remote: Enumerating objects: 290, done.
remote: Counting objects: 100% (290/290), done.
remote: Compressing objects: 100% (257/257), done.
remote: Total 290 (delta 35), reused 97 (delta 20), pack-reused 0
Receiving objects: 100% (290/290), 163.27 KiB | 8.00 KiB/s, done.
Resolving deltas: 100% (35/35), done.
Checking connectivity... done.
=> Compressing and cleaning up git repository
=> Appending nvm source string to /root/.bashrc
=> Appending bash_completion source string to /root/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion在当前用户的环境变量配置文件"~/.bash_profile"或者全局环境变量配置文件"/etc/profile"中加入如下内容
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[root@zhang ~]# vi ~/.bash_profile
[root@zhang ~]# tail -2f ~/.bash_profile
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"重载环境变量
source ~/.bash_profile测试nvm是否安装成功
[root@zhang ~]# nvm --version
0.35.3
[root@zhang ~]# 安装Node.js 7.10.1 版本及以上
[root@zhang iai]# nvm install v10.6.0
Downloading and installing node v10.6.0...
Downloading https://nodejs.org/dist/v10.6.0/node-v10.6.0-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v10.6.0 (npm v6.1.0)
[root@zhang iai]# node -v
v10.6.0创建nodejs web项目仓库
[root@zhang data]# mkdir -p /data/nodejs创建人脸识别项目
[root@zhang data]# mkdir /data/nodejs/iai
[root@zhang data]# cd /data/nodejs/iai
[root@zhang data]# mkdir picture
[root@zhang data]# chmod -R 775 picture安装tencentcloud-sdk-nodejs并创建一个项目入口文件app.js
[root@zhang iai]# npm install tencentcloud-sdk-nodejs --save
[root@zhang iai]# ls -lh
total 28K
-rw-r--r-- 1 root root 249 Apr 14 15:18 app.js
drwxr-xr-x 51 root root 4.0K Apr 14 15:39 node_modules
-rw-r--r-- 1 root root 2.7K Apr 14 09:53 npm-debug.log
-rw-r--r-- 1 root root 13K Apr 14 15:39 package-lock.json通过API 3.0 Explorer生成tencentcloud-sdk-nodejs下人脸检测与分析API的调用Demo
在实现Web功能之前，我们需要知道小程序的服务端只允许HTTPS协议的地址，所以我们应该通过nodejs的HTTPS模块来实现一个加密的Web服务，具体流程如下：
- 通过一个已经实名认证的腾讯云账号在控制台进入“SSL证书”控制台，点击【申请免费证书】为你的小程序服务端域名免费申请一个SSL加密证书
- 申请成功后下载证书文件压缩包
- 解压缩后进入到Nginx目录下
- 在Linux服务端nodejs的项目目录下创建certificate目录并配置权限755
[root@zhang iai]# ls -lh
total 32K
-rwxrwxrwx 1 root root 2.2K Apr 15 10:17 app.js
drwxrwxrwx 51 root root 4.0K Apr 14 15:39 node_modules
-rw------- 1 root root 0 Apr 15 09:50 nohup.out
-rwxrwxrwx 1 root root 2.7K Apr 14 09:53 npm-debug.log
-rwxrwxrwx 1 root root 13K Apr 14 15:39 package-lock.json
drwxrwxrwx 2 root root 4.0K Apr 15 10:31 picture
[root@zhang iai]# mkdir certificate
[root@zhang iai]# chmod 775 certificate/
- 上传Nginx目录下的两个证书文件到服务端的certificate目录下并重名为"server.key"、"server.crt"
[root@zhang certificate]# ls -lh
total 8.0K
-rw-r--r-- 1 root root 3.7K Apr 15 10:48 1_tencentcloud.cdhwdl.com_bundle.crt
-rw-r--r-- 1 root root 1.7K Apr 15 10:48 2_tencentcloud.cdhwdl.com.key
[root@zhang certificate]# mv 1_tencentcloud.cdhwdl.com_bundle.crt server.crt
[root@zhang certificate]# mv 2_tencentcloud.cdhwdl.com.key server.key
[root@zhang certificate]# ls -lh
total 8.0K
-rwxr-xr-x 1 root root 3.7K Apr 15 10:48 server.crt
-rwxr-xr-x 1 root root 1.7K Apr 15 10:48 server.key编辑项目入口文件app.js,通过nodejs的https模块创建一个web服务器并调用上述Demo
const https = require('https');
const fs = require('fs');
const path = require('path');
const privateKey = fs.readFileSync(path.join(__dirname, './certificate/server.key'), 'utf8');
const certificate = fs.readFileSync(path.join(__dirname, './certificate/server.crt'), 'utf8');
const credentials = {key: privateKey, cert: certificate};
const httpsServer = https.createServer(credentials,function(req, res){
let body = [];
req.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
var json_ob = JSON.parse(body.trim());
base64 = json_ob.x;
var base64Data = base64.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = Buffer.from(base64Data, 'base64');
var t1 = new Date().getTime();
var name = t1+".jpg";
var json = { Result: ""};
fs.writeFile("./picture/"+name, dataBuffer, { 'flag': 'a' }, function(err) {
if(err){
json.Result=err;
res.end(JSON.stringify(json));
}
});
const tencentcloud = require("./node_modules/tencentcloud-sdk-nodejs");
const IaiClient = tencentcloud.iai.v20180301.Client;
const models = tencentcloud.iai.v20180301.Models;
const Credential = tencentcloud.common.Credential;
const ClientProfile = tencentcloud.common.ClientProfile;
const HttpProfile = tencentcloud.common.HttpProfile;
let cred = new Credential("", "");
let httpProfile = new HttpProfile();
httpProfile.endpoint = "iai.tencentcloudapi.com";
let clientProfile = new ClientProfile();
clientProfile.httpProfile = httpProfile;
let client = new IaiClient(cred, "ap-guangzhou", clientProfile);
let req = new models.DetectFaceRequest();
var params = {Image: base64Data, NeedFaceAttributes: 1}
var params = JSON.stringify(params)
req.from_json_string(params);
client.DetectFace(req, function(errMsg, response) {
if (errMsg) {
json.Result=errMsg;
res.end(JSON.stringify(json));
}
json.Result=JSON.parse(response.to_json_string());
res.end(JSON.stringify(json));
});
});
});
const SSLPORT = 8000;
httpsServer.listen(SSLPORT, '0.0.0.0', () => {});服务端后台启用这个web服务
[root@zhang iai]# nohup node app.js &
[1] 4446
nohup: ignoring input and appending output to `nohup.out'我们先通过postman来在线调试下
测试OK，可以将web服务地址对接到小程序人脸识别页面中了
测试效果：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
相关产品与服务
人脸识别
腾讯云神图·人脸识别（Face Recognition）基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、比对、搜索、验证、五官定位、活体检测等多种功能，为开发者和企业提供高性能高可用的人脸识别服务。 可应用于在线娱乐、在线身份认证等多种应用场景，充分满足各行业客户的人脸属性识别及用户身份确认等需求。