现在，越来越多关于AI智能识别方面的技术涌现，如百度AI，腾讯AI等等，在这些上面我们都可以了解到AI系统，但是作为程序员的我们，我就要学会如何运用别人的AI来进行开发，首先这里就以微信小程序为例简单的说明一下如何结合AI在微信小程序上实现关于人脸追踪的实例。
在开始前，也先普及一下，其实js也是有人脸识别的插件Tracking.Js，clmtrackr.js，这里就不介绍，到时候我会另开文章来对html或者移动web的人脸识别进行简单的介绍，有兴趣的话自己也可以先行了解一哈。
那么下面进入正题吧！！！
step1
我这里用百度AI为例，所以当然就需要用到百度AI的服务（最主要的就是调用百度AI的access_token，access_token的生成方法在百度AI上有介绍），接着去对应的页面去找到人脸识别对应的接口（接口会在代码上显示）。接着我们就可以去微信开发者工具上生成我们对应的界面，这里我就简单实现一下。
注意：我们不是这里用的是wx.chooseImage，而是用camera的组件，因为如果用的是wx.chooseImage里的照相或录制视频的话，是变成手机系统的照相或录制，是无法调用的api的。因此我们需要的是使用camera的组件，因为当我们使用camera组件的时候我们还停留在小程序上，并且还是可以调用api接口。
wxml代码
<view class="container">
<camera device-position="{{status.camera}}" flash="off" binderror="error" style="width: 100%; height: 300px;">
<cover-view class="frame" style='left:{{frame.left}}px;top:{{frame.top}}px;width:{{frame.width}}px;height:{{frame.height}}px'></cover-view>
</camera>
<view bindtap='record'>{{status.record ? '结束录像' : '开始录像'}}</view>
<view bindtap='changeCamera'>{{status.camera === 'back' ? '前置摄像头' : '后置摄像头'}}</view>
<view bindtap='faceTracking'>人脸追踪</view>
</view>
step2
先说明一下，其实无论是百度AI的人脸识别，还是腾讯AI的人脸识别，基本上都是对文件的数据流进行识别，所以当我们在录制视频时，当前录制的视频还未形成文件，所以在调用百度AI的api时我们是没有对应形成的文件数据流的，因为当我们要开始实现人脸追踪的时候，我们需要在js中不停的调用camera的拍照功能，不停的去上传的图片到百度AI上，以至于api可以返回我们所需要的数据，就是当前人脸在摄像头的x，y，width，height等的数据。
百度AI的api返回数据
js代码
Page({
/**
* 页面的初始数据
*/
data: {
status: {
record: false,
camera: 'back'
},
pic: '',
frame: {
left: 0,
top: 0,
width: 0,
height: 0,
},
windowWidth:0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.ctx = wx.createCameraContext();
var sysInfo = wx.getSystemInfoSync()
this.setData({
windowWidth: sysInfo.windowWidth,
})
},
faceTracking:function(){
this.takePhoto()
this.interval = setInterval(this.takePhoto, 500)
},
takePhoto: function () {
let that = this;
var takephonewidth;
var takephoneheight;
this.ctx.takePhoto({
quality: "low",
success: function (photo) {
that.data.pic = photo.tempImagePath;
that.setData({
pic: that.data.pic
})
wx.getImageInfo({
src: photo.tempImagePath,
success: function (pic) {
takephonewidth = pic.width;
takephoneheight = pic.height;
}
})
wx.getFileSystemManager().readFile({
filePath: photo.tempImagePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: function (base64pic) {
wx.request({
url: "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=你的access_token",
data: {
image: base64pic.data,
image_type: "BASE64",
max_face_num: 10
},
method: 'POST',
dataType: "json",
header: {
'content-type': 'application/json'
},
success: function (res) {
if (res.data.error_code === 0) {
for (let j = 0; j < res.data.result.face_num; j++) {
that.data.frame.left = res.data.result.face_list[j].location.left / takephonewidth * that.data.windowWidth
that.data.frame.top = res.data.result.face_list[j].location.top / takephoneheight * 300
that.data.frame.width = res.data.result.face_list[j].location.width / takephonewidth * that.data.windowWidth
that.data.frame.height = res.data.result.face_list[j].location.height / takephoneheight * 300
}
that.setData({
frame:that.data.frame
})
}
}
})
}
})
}
})
},
})
由于最终效果是录像，需要本人上镜，就不给大家看最终的效果了，嘻嘻！
总结
总感觉这种办法不是特别的好，也一直在耗费性能的同时，当然也浪费api次数（虽然百度AI的人脸识别的api是免费的），但是毕竟是每0.5s就进行一个拍摄和请求，所以方法上有待提升，但是目前由于也是没有好的办法，也只能暂时顶替着。而且最终用view或者canvas画出的框跟随人移动的也是有一定的延迟。但是最终的效果还是实现了，至于优化上还是要慢慢来。
