0
点赞
收藏
分享

微信扫一扫

uniapp + vue3微信小程序开发(2)活体人脸识别

彭维盛 2022-04-25 阅读 73

这相信有很多小程序都会用,为啥呢?因为小程序压根不得给你用户身份证信息,所以替换做法就是你让用户上传身份证照片,然后你在人脸识别,判断是同一个人后,再将你信息录入数据库

1、在小程序端的活体识别方法

1、uniapp camera组件拍照 takePhoto

2、uniapp camera组件录像 startRecord

3、uniapp live-pusher组件 视频推流方式

2、拍照方式实现人脸识别

因为项目要得紧,所以我这里使用最简单的拍照,拍八张,定时器每秒一张(后端用的是百度人脸识别api,有照片活体识别和视频活体识别),然后一起传给后端,不过更好的做法是拍一张传一张,成功则完成,识别失败那就再调拍照api,总的时间不超过十秒,在用户端看来是没有任何异常的。

<template>
	<view class="face-detection">
		<view class="live-father">
			<camera class="camera-box" device-position="front" flash="off" @initdone="initdone" @stop="stop" @error="error">
				<cover-view class="camera-tip" v-if="showTip">{{8 - imgList.length}}</cover-view>
			</camera>
		</view>
		<button class="bottom" type="primary" :disabled="status!==0" @click="startFace">{{statusFilter()}}</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		onBeforeUnmount
	} from 'vue'
	import { onReady, onHide, onError } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance()
	const context = ref(null)
	onHide(() => {
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
			showTip.value = false
		}
	})
	onError(() => {
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
			showTip.value = false
		}
	})
	onBeforeUnmount(() => {
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
			showTip.value = false
		}
	})
	const timer = ref(null)
	const imgList = reactive([])
	const showTip = ref(false)
	/**
	 * 相机初始化完成
	 */
	const initdone = () => {
		console.log('相机初始化完成');
		status.value = 0
	}
	const startFace = () => {
		status.value = 1
		showTip.value = true
		timer.value = setInterval(() => {
			if (imgList.length >= 8) {
				clearInterval(timer.value)
				timer.value = null
				status.value = 2
				showTip.value = false
				console.log('正在上传...');
				return
			}
			takePhoto()
		}, 1000)
	}
	const status = ref(-1) // -1 => 相机未就绪, 0 => 相机已就绪,但未开始, 1 => 进行中, 2 => 已结束, 3 => 重新识别
	const statusFilter = () => {
		switch(status.value) {
			case -1:
				return '相机未就绪'
			case 0:
				return '开始识别'
			case 1:
				return '正在识别中...'
			case 2:
				return '识别完成'
			case 3:
				return '重新识别'
			default:
				return '开始识别'
		}
	}
	/**
	 * 拍照
	 */
	const takePhoto = () => {
		const ctx = uni.createCameraContext();
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				imgList.push(res.tempImagePath)
			},
			fail: () => {
				console.log('fail');
			}
		});
	}
	/**
	 * 摄像头在非正常终止时触发,如退出后台等情况
	 */
	const stop = (e) => {
		console.log("stop:" + e.detail);
	}
	/**
	 * 用户不允许使用摄像头时触发
	 */
	const error = (e) => {
		console.log("error:" + e.detail);
	}
</script>

<style lang="scss" scoped>
	.face-detection {
		background-color: #F3F3F3;
		height: 100vh;
		box-sizing: border-box;
		padding: 30rpx;
		position: relative;
		.live-father {
			width: 600rpx;
			height: 600rpx;
			border-radius: 50%;
			margin: 100rpx auto;
			.camera-box{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				position: relative;
				.camera-tip{
					text-align: center;
					line-height: 600rpx;
					height: 600rpx;
					font-size: 70rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}
		.bottom{
			margin: 60rpx auto 0;
			width: 690rpx;
			height: 98rpx;
			background-color: #CA2915;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
			text-align: center;
		}
	}
</style>
举报

相关推荐

0 条评论