现在,越来越多关于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画出的框跟随人移动的也是有一定的延迟。但是最终的效果还是实现了,至于优化上还是要慢慢来。