添加人脸识别

uni_modules/face-bio-assay/readme.md

@@ -0,0 +1,185 @@
+# 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
+			}
+```