更新记录

1.1.4（2024-01-28）

把各个动作的完成次数暴露出来，便于使用

1.1.3（2023-12-01）

actions 改为 funaction

1.1.2（2023-10-17）

更新可切换前/后置摄像头

平台兼容性

props

emits

slots

方法

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页 demo1
<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>

//face demo2
actions 本版本改用funaction否则action子类继承的父类信息在prop中会丢失.
<template>
    <view>
        <face-bio-assay :hasSwitch="false" :actions="actions" :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'
    import StraightenHead from '@/uni_modules/face-bio-assay/components/face-bio-assay/actions/StraightenHead.js'

    export default {
        components: {
            faceBioAssay,
        },

        onLoad(option) {
            this.$refs.faceDetect.initData()
        },

        data() {
            return {
                actions: (takePhoto) => {
                    return [new StraightenHead(10, (state) => {
                        if (state === 'success') {
                            takePhoto()
                        }
                    })]
                }
            }
        },

        methods: {
            detectFailed() {
                uni.showToast({
                    title: "人脸核验失败~",
                    icon: 'none'
                })
                uni.navigateBack()
            },

            photoChange(path) {
                uni.navigateBack()
                this.getOpenerEventChannel().emit('data', path);
            }
        }

    }
</script>

<style>
</style>

类的使用

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
            }