微信小程序人脸识别业务开发

思路：

使用原生camera标签录制视频或是拍摄照片，js里获取到数据后再上传给接口

代码：

Html

<button type="primary" @click="startAuth">开始认证</button>
<camera
  v-if="cameraShow"
  class="w-full h-[80vw]"
  device-position="front"
  flash="off"
  resolution="high"
  @error="error"
/>

Script

const startAuth = () => {
	const systemInfo = uni.getSystemInfoSync() // 获取系统信息，ios/android/mac/windows/linux/
	const message =
		systemInfo.osName === 'ios'
			? `请保持人脸处于视频范围内，且视频长度控制在5秒钟之内`
			: `确认开始人脸识别?请保持人脸处于视频范围内`
	uni.showModal({
		title: '提示',
		content: message,
		success: (res) => {
			if (res.confirm) {
				startCamera()
			}
		}
	})
}

const startCamera = () => {
	cameraShow.value = true
    // Camera上下文总控
	const ctx = uni.createCameraContext()
    // 开始录制
	ctx.startRecord({
		success: (res) => {
			console.log('startRecord', res)
		},
		fail: (res) => {
			console.log('startRecord fail', res)
		}
	})
	setTimeout(() => {
        // 结束录制并拿到录制文件与封面
		ctx.stopRecord({
			success: (res: any) => {
				const tempVideoPath = res.tempVideoPath // .webm格式的本地缓存地址，退出此页面后清除

				wx.uploadFile({
					url: '上传地址',
					filePath: tempVideoPath,
					name: 'file', // 对应后端接收的字段名
					success: (uploadRes) => {
						console.log('上传成功', uploadRes)
					},
					fail: (uploadErr) => {
						console.error('上传失败', uploadErr)
					}
				})
				cameraShow.value = false
			},
			fail: (res) => {
				console.log('stopRecord fail', res)
			}
		})
	}, 5000)
}

其他

注意在调起摄像头之前需要对用户权限做校验及修正，代码参考另一篇文章《微信小程序摄像头权限校验》