現在，越來越多關於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畫出的框跟隨人移動的也是有一定的延遲。但是最終的效果還是實現了，至於優化上還是要慢慢來。