微信小程序如何实现人脸追踪

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

微信小程序如何实现人脸追踪

上一篇:学习旧岛小程序 (3)组件的样式


下一篇:原生微信小程序的生命周期