MiniScm/subpkg_checkin/dynamicFaceCheck/dynamicFaceCheck.vue

<template>
	<view class="content">
		<view class="camera-box" v-if="showcamera">
			<view class="camera-bg-box">
				<camera v-if="isOk" class="camera" device-position="front" flash="off" resolution="low"></camera>
			</view>
			<view v-show="tipsText" class="camera-tip">{{ tipsText }}</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				cameraEngine: null,
				VKSession: null,
				showcamera: true,
				tipsText: "开始人脸检测",
				isOk: true,
				guestId: 0,
				idNumber: null,
				name: null,
			};
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState("m_business", ["currentHotelId"]),
		},
		onShow() {
			let that = this;
			wx.getSetting({
				success(res) {
					if (!res.authSetting["scope.camera"]) {
						//获取摄像头权限
						wx.authorize({
							scope: "scope.camera",
							success() {
								that.showcamera = true;
								wx.showToast({
									title: "授权成功",
									icon: "success",
									duration: 1000,
								});
							},
							fail() {
								console.log("相机授权fail");
								wx.showModal({
									title: "提示",
									content: "尚未进行授权，功能将无法使用",
									cancelText: "取消",
									confirmText: "授权",
									success(res) {
										console.log(res);
										if (res.confirm) {
											console.log("用户点击确定");
											wx.openSetting({
												//这里的方法是调到一个添加权限的页面，这里可以测试在拒绝授权的情况下设置中是否存在相机选项
												success: (res) => {
													if (!res.authSetting[
															"scope.camera"]) {
														wx.authorize({
															scope: "scope.camera",
															success() {
																wx.showToast({
																	title: "授权成功",
																	icon: "success",
																	duration: 1000,
																});
																setTimeout(
																	function() {
																		wx
																			.navigateBack();
																	}, 1000
																);
															},
															fail() {
																wx.showToast({
																	title: "您已取消授权",
																	icon: "error",
																	duration: 1000,
																});
																setTimeout(
																	function() {
																		wx
																			.navigateBack();
																	}, 1000
																);
															},
														});
													}
												},
												fail: function() {
													console.log("相机授权设置失败");
												},
											});
										} else if (res.cancel) {
											console.log("用户点击取消");
											wx.showToast({
												title: "您已取消授权",
												icon: "error",
												duration: 1000,
											});
											setTimeout(function() {
												wx.navigateBack();
											}, 1000);
										}
									},
								});
							},
						});
					}
				},
				fail(res) {
					console.log("22222222222222222" + JSON.stringify(res));
				},
			});
			console.log("OKkkkkkk");
			// 初始化相机引擎，更改调用，引用新接口
			this.initData();
		},

		onLoad(options) {
			console.log("tipsText", this.tipsText);
			this.guestId = options.guestId;
			this.idNumber = options.idNumber;
			this.name = options.name;
			console.log("guestId ", this.guestId);
			console.log("idNumber ", this.idNumber);
			console.log("name", this.name);
		},

		methods: {
			//visionkit人脸必须函数
			async detectFace(frame) {
				console.log("frame", frame.data);

				this.VKSession.detectFace({
					frameBuffer: frame.data,
					width: frame.width,
					height: frame.height,
					scoreThreshold: 0.8,
					sourceType: 0,
					modelMode: 1,
				});
			},

			//初始化相机引擎
			initData() {
				let that = this;
				//使用visionkit
				that.cameraEngine = wx.createCameraContext();
				let count = 0;
				//初始化相机
				const listener = that.cameraEngine.onCameraFrame((frame) => {
					count++;
					//每十帧分析一次
					if (count === 10) {
						this.detectFace(frame);

						count = 0;
					}
				});
				//开始监听数据帧
				listener.start();
				//创建VK对象
				that.VKSession = wx.createVKSession({
					version: "v1",
					track: {
						plane: {
							mode: 1,
						},
						face: {
							mode: 2,
						},
					},
				});
				//启动VK对象
				that.VKSession.start((errno) => {
					console.log("VKSession.start errno", errno);
					if (errno) {
						wx.showModal({
							title: "提示",
							content: "网络错误,请退出后重试",
							showCancel: false,
							confirmText: "确定",
							success(res) {
								console.log(res);
								if (res.confirm) {
									wx.navigateBack();
								}
							},
						});
					}
				});

				that.VKSession.on("updateAnchors", (anchors) => {
					console.log("anchors", anchors);
					console.log("anchors.length", anchors.length);
					anchors.forEach((anchor) => {
						console.log("anchor.points", anchor.points);
						console.log("anchor.origin", anchor.origin);
						console.log("anchor.size", anchor.size);
						console.log("anchor.angle", anchor.angle);
						console.log("anchor", anchor.confidence);
						if (anchors.length > 1) {
							that.tipsText = "请保证只有一个人";
						} else {
							const {
								pitch,
								roll,
								yaw
							} = anchor.angle;
							const standard = 0.3;

							if (
								Math.abs(pitch) >= standard ||
								Math.abs(roll) >= standard ||
								Math.abs(yaw) >= standard
							) {
								that.tipsText = "请平视摄像头";
							} else if (
								anchor.origin.x < 0.15 ||
								anchor.origin.x > 0.3 ||
								anchor.origin.y < 0.2 ||
								anchor.origin.y > 0.45
							) {
								this.tipsText = "请将人脸对准中心位置";
							} else if (
								anchor.confidence[0] <= 0.8 ||
								anchor.confidence[1] <= 0.8 ||
								anchor.confidence[2] <= 0.8 ||
								anchor.confidence[3] <= 0.8 ||
								anchor.confidence[4] <= 0.8
							) {
								that.tipsText = "请勿遮挡五官";
							} else {
								listener.stop();
								that.tipsText = "即将拍照，请保持！";
								setTimeout(function() {
									that.handleTakePhotoClick();
								}, 1000);
								return;
							}
						}
					});
				});
			},

			// 拍照
			handleTakePhotoClick() {
				this.tipsText = "正在上传...";
				uni.showLoading({
					title: "正在人脸认证，请稍后",
				});
				this.cameraEngine.takePhoto({
					quality: "normal",
					success: ({
						tempImagePath
					}) => {
						let mybase64 = wx
							.getFileSystemManager()
							.readFileSync(tempImagePath, "base64");
						this.afterRead(mybase64);
					},
				});
			},
			//上传
			async afterRead(mybase64) {
				let that = this;
				uni.$http
					.post("/faceVerification/checkPic", {
						hotelId: this.currentHotelId,
						faceData: mybase64,
					})
					.then(async (res) => {
						uni.hideLoading();
						console.log("mybase64", mybase64);
						if (res.data.code === 200 && res.data.success === true) {
							that.isOk = false;
							if (this.userInfo.skipIdMatching) {
								that.isOk = true;
								uni.showModal({
									content: "图片检查通过！",
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											console.log("用户点击确定");
											setTimeout(function() {
												let pages = getCurrentPages();
												console.log("pages", pages);
												let prevPage = pages[pages.length - 2];
												wx.navigateBack({
													success: () => {
														prevPage.$vm
															.setGuestPicBase64ById(
																that
																.guestId,
																mybase64
															);
													},
												});
											}, 1000);
										}
									},
								});
							} else {
								uni.showLoading({
									title: "正在人证比对，请稍后",
								});
								let yunjiFaceCheckInfo = {
									idNo: that.idNumber,
									name: that.name,
									image: mybase64,
								};
								let res = await uni.$http.post(
									"/faceVerification/yunjiVerification",
									yunjiFaceCheckInfo
								);
								uni.hideLoading();
								if (res.data.success === true) {
									uni.showModal({
										content: "人证比对通过！",
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												console.log("用户点击确定");
												setTimeout(function() {
													let pages = getCurrentPages();
													console.log("pages", pages);
													let prevPage = pages[pages.length - 2];
													// prevPage.setData({
													// 	pic: mybase64,
													// });
													wx.navigateBack({
														success: () => {
															prevPage.$vm
																.setGuestPicBase64ById(
																	that
																	.guestId,
																	mybase64
																);
														},
													});
												}, 1000);
											}
										},
									});
								} else {
									that.isOk = true
									uni.showModal({
										content: "人证比对失败,请重试",
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												console.log("用户点击确定");
												that.initData();
											}
										},
									});
								}
							}
						} else {
							uni.showModal({
								content: "人脸认证失败,请重试",
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log("用户点击确定");
										that.initData();
									}
								},
							});
						}
						console.log("checkPicRes", res);
					});
			},
		},
	};
</script>

<style lang="scss">
	.content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		.camera-box {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.camera-bg-box {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;

			&::after {
				content: "";
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				border-radius: 100%;
				width: 600rpx;
				height: 600rpx;
				border: 1000rpx solid rgba(255, 255, 255, 0.998);
			}
		}

		.camera {
			width: 100%;
			height: 100%;
			border-top: 200rpx solid black;
			border-bottom: 200rpx solid black;
			box-sizing: border-box;
		}

		.camera-tip {
			position: absolute;
			bottom: 220rpx;
			left: 50%;
			color: rgb(0, 0, 0);
			transform: translateX(-50%);
			// .text-40-fff-600();
		}
	}
</style>