刚好遇到要写微信小程序人脸识别的功能,就翻了一下微信小程序文档
人脸识别跳转文档
缺点:1. 照片也可以成功。我试了一下眨眼,但是好像不行,闭眼都能识别到眼睛。
2. ios的微信小程序 有兼容性问题,具体表现在返回的数据不一样,需要自己测试。
然后没有demo,就自己研究了,记录一下。用uniapp写的,所以需要条件编译。
HTML(需要用到相机组件)
<view class=""><camera v-if="showcamera" device-position="front" resolution="high" style="width: 100%; height: 100vh;"><cover-view class="cover_bg"><cover-view class="cover_face" :style="{backgroundColor: bgcolor}"><cover-view class="cover_text">{{tipsText}}</cover-view></cover-view></cover-view></camera><view class="photo_img" v-else><image :src="tempImg" mode=""></image></view></view>
css
.cover_bg {height: 100%;width: 100%;position: relative;}.cover_face {width: 100%;height: 32vh;position: absolute;bottom: 0;background-color: #FFFFFF;color: #333;font-size: 36rpx;font-weight: bold;.cover_text {letter-spacing: 2rpx;text-align: center;margin-top: 24%;}}
js
export default {data() {return {showcamera: true,bgcolor: '#F2F2F2',colorArray: ['#F2F2F2', '#F56B79', '#74B2FF'],current: 0,tipsText: '请显示正脸',tempImg: '',}},onLoad() {this.initData()},onShow() {setInterval(() => {if(this.current > 2) {this.current = 0}this.changes()this.current++}, 2000)},methods: {changes() {this.bgcolor = this.colorArray[this.current]},initData() {// #ifdef MP-WEIXINwx.initFaceDetect()const context = wx.createCameraContext()const listener = context.onCameraFrame((frame) => {console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)wx.faceDetect({frameBuffer: frame.data,width: frame.width,height: frame.height,enablePoint: true,enableConf: true,enableAngle: true,enableMultiFace: true,success: (faceData) => {console.log(faceData)let face = faceData.faceInfo[0]if(faceData.x == -1 || faceData.y == -1) {this.tipsText = '检测不到人脸'}if(faceData.faceInfo.length > 1) {this.tipsText = '请保证只有一人做认证'} else {if(face.angleArray.pitch >= 0.1 || face.angleArray.roll >= 0.1 || face.angleArray.yaw >= 0.1) {this.tipsText = '请平视摄像头'} else if(face.confArray.global <= 0.8 || face.confArray.leftEye <= 0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 || face.confArray.rightEye <= 0.8) {this.tipsText = '请勿遮挡五官'} else {this.tipsText = '人脸认证成功'// 这里可以写自己的逻辑了}}},fail: (err) => {console.log(err)if(err.x == -1 || err.y == -1) {this.tipsText = '检测不到人脸'} else {this.tipsText = '网络错误,请退出页面重试'}}})})listener.start()// #endif}}}
由于微信小程序 video,cover-view 的很多限制,本来想中间镂空的圆形,周围都是变色,结果cover-view 不支持box-shadow,就做的比较简单了。
持续更新中...后面还要做当前人脸是不是和身份证上的一样。(哎!!!)
听说是后台调Python的一个接口,哈哈哈,轻松了。