185 lines
4.6 KiB
Markdown
185 lines
4.6 KiB
Markdown
# props
|
||
|参数名|类型|默认值|可选择值|描述|
|
||
|----|----|----|---|---|
|
||
|buildActionContainer|Function|null|""|创建ActionContainer类的函数，要求返回值必需是ActionContainer类|
|
||
|actions|Array|[]|""|动作组（目前已有动作：点头，摇头，平视）|
|
||
|isDev|boolen|false|true|是否是开发者模式,开启后可显示人脸的三个角度|
|
||
|
||
# emits
|
||
|方法名|参数|描述|
|
||
|----|---|---|
|
||
|detectFailed|[]|核验失败|
|
||
|photoChange|[url:'照片路径']|拍照后的回调|
|
||
|detectOver|[]|检测完成|
|
||
|showData|[faceData:'人脸数据']|每一帧的人脸数据|
|
||
# slots
|
||
|插槽名|参数|描述|
|
||
|----|---|---|
|
||
|default|无|用户可配合showData钩子展示人脸数据方便调试|
|
||
|
||
# 方法
|
||
## initData
|
||
开始进行人脸核验 使用案例：
|
||
```
|
||
//html
|
||
<face-bio-assay ref="faceDetect" ></face-bio-assay>
|
||
//js
|
||
//调用
|
||
this.$refs.faceDetect.initData()
|
||
```
|
||
## takePhoto
|
||
拍照获取照片，配合动作使用：
|
||
```
|
||
在每个动作创建时第二个参数是动作完成的回调 如平视动作的使用：
|
||
const fun = (state) => {
|
||
//state 有成功success和fail，ing(进行时不会触发该函数，忽略)
|
||
if (state === 'success') {
|
||
this.$refs.faceDetect.takePhoto() //调用拍照方法
|
||
}
|
||
}
|
||
let straightenHead = new StraightenHead(10, fun)
|
||
```
|
||
|
||
# 使用建议
|
||
```
|
||
ios中bug解决方案：
|
||
在ios中，二次进入使用该组件有问题，解决办法：单独将该组件作为一个页面（或者下载demo查看），代码如下：
|
||
|
||
//主页面
|
||
<template>
|
||
<view>
|
||
<button type="default" @click="init">人脸检测</button>
|
||
<image mode="aspectFit" :src="imgSrc" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imgSrc: '',
|
||
}
|
||
},
|
||
methods: {
|
||
init(){
|
||
uni.navigateTo({
|
||
url:"/pages/face/face",
|
||
events:{
|
||
data: (path) => {
|
||
this.imgSrc = path
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
//face.vue页
|
||
<template>
|
||
<view>
|
||
<face-bio-assay :isDev="false" ref="faceDetect" @detectFailed="detectFailed" @photoChange="photoChange">
|
||
</face-bio-assay>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import faceBioAssay from '@/uni_modules/face-bio-assay/components/face-bio-assay/face-bio-assay.vue'
|
||
export default {
|
||
components: {
|
||
faceBioAssay,
|
||
},
|
||
onLoad(option) { //一定要onLoad，onShow在进入相机授权页面退回时会再次触发
|
||
this.$refs.faceDetect.initData()
|
||
},
|
||
methods: {
|
||
detectFailed() {
|
||
uni.showToast({
|
||
title: "人脸核验失败~",
|
||
icon: 'none'
|
||
})
|
||
uni.navigateBack()
|
||
},
|
||
photoChange(path) {
|
||
uni.navigateBack()
|
||
this.getOpenerEventChannel().emit('data',path);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
```
|
||
|
||
# 类的使用
|
||
## Action
|
||
动作类，开发者可继承该类重写 takeFrame 方法 如：
|
||
```
|
||
//点头动作
|
||
import Action from "./Action.js"
|
||
class NodHead extends Action {
|
||
constructor(second=10,fun) {
|
||
//时间限制（s），结束时回调，完成次数(limit)，基本提示
|
||
super(second,fun,1,'请点头')
|
||
this.maxPitch = 0
|
||
this.minPitch = 0
|
||
}
|
||
takeFrame(faceData){
|
||
let face = faceData.faceInfo[0]
|
||
if(face.angleArray.pitch>this.maxPitch){
|
||
this.maxPitch = face.angleArray.pitch
|
||
}
|
||
if(face.angleArray.pitch<this.minPitch){
|
||
this.minPitch = face.angleArray.pitch
|
||
}
|
||
if(Math.abs(this.minPitch-this.maxPitch)>0.45 && (this.minPitch || this.maxPitch) ){
|
||
this.frames.push('点头') //frames 完成的帧数组 根据该数组长度和limit判断是否完成
|
||
this.maxPitch = 0
|
||
this.minPitch = 0
|
||
}
|
||
}
|
||
}
|
||
|
||
export default NodHead
|
||
```
|
||
## ActionContainer
|
||
动作容器的使用案例
|
||
```
|
||
buildActions() {
|
||
if (this.buildActionContainer) {
|
||
return this.buildActionContainer()
|
||
}
|
||
let actions = []
|
||
if (!this.actions?.length) {
|
||
let nodHead = new NodHead()
|
||
const fun = (state) => {
|
||
if (state === 'success') {
|
||
this.takePhoto() //拍照
|
||
}
|
||
}
|
||
let straightenHead = new StraightenHead(10, fun) //平视 结束拍照
|
||
let straightenHead2 = new StraightenHead(10) //平视
|
||
let shakeHead = new ShakeHead()
|
||
actions = [straightenHead2, nodHead, shakeHead, straightenHead]
|
||
} else {
|
||
actions = this.actions
|
||
}
|
||
//new ActionContainer(actions,...)
|
||
//动作组 actions
|
||
//起始动作下标 index
|
||
//初始提示 tip
|
||
//绑定 完成所有动作的回调 endFun
|
||
//绑定 动作进行中 ingFun
|
||
//绑定 动作完成时 successFun
|
||
//绑定 动作失败时 failFun
|
||
let act = new ActionContainer(actions)
|
||
act.end(() => { //也可用该方法绑定endFun方法
|
||
this.detectOver()
|
||
}).fail(() => { //也可用该方法绑定failFun方法
|
||
this.cameraError()
|
||
})
|
||
//....其他方法类似
|
||
return act
|
||
}
|
||
``` |