uniapp使用live-pusher实现模拟人脸识别效果

需求：

1、前端实现模拟用户人脸识别，识别成功后抓取视频流或认证的一张静态图给服务端。

2、服务端调用第三方活体认证接口，验证前端传递的人脸是否存在，把认证结果反馈给前端。

3、前端根据服务端返回的状态，显示在页面上用于提示用户。

难点：

1、前端APP如果要实现人脸活体校验验证，需要对接大厂的SDK实现。

2、一开始我采用用使用在App内嵌套H5来单独部署一套人脸验证，把结果通过webview与APP进行数据交互，但是H5试了使用好用高效的effet.js 库人脸识别 目前仅支持H5（但是发现最后在手机上识别人像整个人被压缩似得，而且是反向镜头，跟作者已反馈，等待作者持续更新）。

3、抛弃了使用App嵌套H5方法，因此最终选择了使用原生live-pusher直播流来模拟实现人脸识别效果。本打算给大家写成组件方便大家直接调用来着，但是发现组件内获取实例仅支持在onReady页面生命周期使用。

实现思路

1、首先需要获取手机是否有录音以及相机权限，没有的话引导用户前去设置页主动设置。

2、其次创建live-pusher实例，根据业务需求实现自己的模拟人脸识别思路（目前我们这是在用户手动点击5s后进行自动抓拍的）。

3、前端拿到抓拍最后一帧图片调用接口给服务端传递，服务端调用第三方进行人脸活体检测，一般是需要付费的哈。

4、最后前端把服务端返回的识别状态展示在页面上，方便后续用户操作。

代码步骤（当前是vue3项目示例，最低sdk 21版本并且勾选livepusher）

1、获取当前手机是否允许开启相机和录音权限。（建议直接使用官方大佬写的js sdk）App权限判断和提示

引入js sdk插件（vue3版本需要转换为export function，vue2版本直接按照官方大佬的直接使用即可）

import {
		requestAndroidPermission,
		gotoAppPermissionSetting
	} from '@/js_sdk/wa-permission/permission.js'

2、创建live-pusher实例，根据业务需求写业务逻辑（注意：一定要用nvue页面哈，cover-image覆盖一个矢量图在直播流画面上）。

ilve-pusher详细参数说明具体看live-pusher官方文档

<template>
	<view class="container">
		<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="" mode="FHD" :muted="true"
			:enable-camera="true" :auto-focus="true" :beauty="2" whiteness="2" aspect="9:16" local-mirror="disable"
			@statechange="statechange" @error="error" @netstatus="netstatus" :style="[{
					width:'400rpx',
		            height: '400rpx',
		            marginLeft: '175rpx',
					marginTop:'20rpx',
		        }]"></live-pusher>
		<cover-image style="
		            width: 400rpx;
		            height: 400rpx;
		            transform: scale(1.01);
					position: absolute;
					left: 175rpx;
					top: 190.5rpx;
		        " src="@/static/circleBg.png" />
	</view>
</template>
<script>
export default{
    onReady() {//需要在onReady页面生命周期函数来写
			this.livePusher = uni.createLivePusherContext("livePusher", this);
		},
}
</script>

3、5s后抓拍最后一帧图片给服务端，人脸识别成功即登录系统，识别失败跳转认证失败页面（这里跟服务端对接采用的formdata格式上传文件流，你也可以采取转成base64）

临时路径转base64

			// 定时器 几秒后自动抓拍
			handleSetTime() {
				this.timeFlag = setInterval(async () => {
					if (this.timeOut > 0) {
						this.timeOut--
						this.titleTips = this.countDownTimerStartTips
						this.buttonTip = `${this.countDownTimerStartBtnTips} ${this.timeOut}秒`
					}
					if (this.timeOut == 1) {
						this.livePusher.snapshot({
							success: (res) => {
								this.snapshotInfo = res.message
							}