uniapp实现人脸识别（不使用三方插件）

内容简介

1.拍摄/相册将身份证照片上传到接口进行图片解析
2.使用live-pusher组件拍摄人脸照片，上传接口与身份证人脸进行比对

功能实现

上传身份证

先看下效果

点击按钮调用chooseImageAPI进行图片的上传

// 上传按钮的loading以及disabled状态，避免多次上传
const loading = ref(false)
// 上传按钮事件
const chooseIdCard = () => {uni.chooseImage({success: (tempFiles) => {// 获取到当前图片路径并调用上传方法uploadIdCard(tempFiles.tempFilePaths[0])}})
}
// 身份证图片上传
const uploadIdCard = async (stream: (ArrayBuffer | string)) => {loading.value = trueuni.uploadFile({url: '/cardInfo/uploads', // 你的上传接口地址filePath: stream,         // 选中的图片name: 'file',             // 与后端协定的keysuccess: ({data, statusCode }) => {if(statusCode == 200){// 这里需要注意下，接口返回的事string，需要解析后才可正常使用const result = JSON.parse(data)if(result.code == 200 || result.success == true){// 这里写上传成功的逻辑// 我要将数据存在store中 给后面的页面使用loading.value = falseconst memberStore = useMemberStore()memberStore.setPersonInfo(result.data)uni.navigateTo({url:'/pages/face/face',})}else{uni.showToast({icon: 'error',title: result.msg})}}},fail: (err) => {console.error(err);uni.showToast({icon: 'error',title: '上传失败fail！'})}});
}

进行人脸比对

live-pusher组件实现摄像头调起以及样式的实现，在之前的文章有记录，点击查看，
这里主要描述该组件截图上传的部分

<template><cover-view class="pushContent"><live-pusher id="pusherFaceId" ref="pusherRef" class="livePusher"aspect="1:1" :whiteness="1" :beauty="1" device-position="front"/><cover-image class="pusherImg" src="/static/images/faceRadio.png" alt=""></cover-image></cover-view>
</template>
<script lang="ts" setup>const pusherContext = ref()onMounted(() => {// 获取当前组件实例const instance = getCurrentInstance() as ComponentInternalInstance;// 创建 live-pusher 上下文 livePusherContext 对象。// 这是要用实例的proxy代理对象pusherContext.value = uni.createLivePusherContext("pusherFaceId", instance.proxy)// 开启摄像头预览pusherContext.value.startPreview({success: () => {// 人脸拍摄上传faceRecognition()}});})const faceRecognition = () => {pusherContext.value.snapshot({success: (res: UniHelper.LivePusherProps) => {uploadFace(res.message.tempImagePath)},})}const uploadFace = (stream) => {uni.uploadFile({url: '/cardInfo/faceUploads',filePath: stream,name: 'file',// 额外的参数formData: {cardToken: memberStore.personInfo.cardToken},success: ({data, statusCode }) => {if(statusCode == 200){const result = JSON.parse(data)if(result.code == 200 || result.success == true){const memberStore = useMemberStore()memberStore.setProfile(result.data)uni.navigateTo({url:'/pages/main/main',})}else{uni.showToast({icon: 'error',title: result.msg})faceRecognition()}}},fail: (err) => {uni.showToast({icon: 'error',title: '上传失败fail！'})}});}
</script>

遇到的问题

1. 使用nvue页进行开发

vue页面在调用live-pusher组件的API时，不支持回调
人脸拍摄需要在摄像头调起成功之后进行，并且拍摄快照需要在success回调中获取值

2. 创建 live-pusher 上下文 livePusherContext 对象时要用proxy代理对象

之前使用 getCurrentInstance().ctx 去获取实例对象，在本地打包以及自定义基座包的时候都没有问题，但是打正式包就会报错，导致无法 创建 live-pusher对象，摄像头黑屏

ctx 和 proxy 的区别

特性	ctx	proxy
适用版本	Vue 2.x 和 Vue 3.x	Vue 3.x
推荐使用	Vue 2.x	Vue 3.x
访问方式	直接访问组件实例	通过代理对象访问组件实例
安全性	较低，直接操作实例可能带来风险	较高，通过代理对象更安全

3. 流文件上传

刚开始尝试用uni.request尝试上传流文件，没成功 。在这个做个记录
uni实现本地文件转数据流

• 通过h5+的API FileReader读取文件 获得base64地址
  • uni中不支持js的FileReader 只支持5+的 API，两者是有区别的，需要注意下
• uni自带的API base64ToArrayBuffer 再将base64转换为buffer

pusherContext.value.snapshot({success: (res: UniHelper.LivePusherProps) => {// 5+API FileReader读取文件 获得base64地址const reader = new plus!.io!.FileReader!();reader.readAsDataURL(res.message.tempImagePath)reader.onload = (readerRes: PlusIoFileEvent) => {var speech = readerRes!.target!.result;imgUrl.value = speech// uni自带的APIbase64ToArrayBuffer 将文件转换为bufferconst arrayBuffer = uni.base64ToArrayBuffer(speech)const resFace = await faceRecognitionAPI(arrayBuffer)if(resFace.code == 200){isfaced.value = truesetTimeout(() => {uni.navigateTo({url: '/pages/main/main'})}, 1500)}else{uni.showToast({icon: 'error',title: '识别失败，请对准摄像头！'})faceRecognition()}}}
})