uni-app 人脸识别 自动开启前置摄像头 自动获取快照

<!-- scan.nvue -->
<template>
	<view>
		<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="" mode="SD" :muted="true"
			:enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="3:5" orientation="horizontal"
			@statechange="statechange" @netstatus="netstatus" @error="error"
			:style="{ height: windowHeight + 'px' }"></live-pusher>
        <!-- 图片用于覆盖摄像头其他区域 - 只保留中间位置 -->
		<cover-image src="/static/facebox7.png" class="gaiimg"
			:style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"></cover-image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				context: null,
				snapshotInterval: null,
				windowHeight: 0,
				windowWidth: 0,
				count: 0, // 当前检测次数
				checkCount: 5, // 限制检测多少次
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(true) //隐藏状态栏
			// #endif
			const systemInfo = uni.getSystemInfoSync()
			this.windowWidth = systemInfo.windowWidth || 0
			this.windowHeight = systemInfo.windowHeight || '100vh'
		},
		onReady() {
			// 注意：需要在onReady中 或 onLoad 延时
			this.context = uni.createLivePusherContext("livePusher", this);
			this.startPreview() // 开启摄像头
			// this.switchCamera() // 切换为后置摄像头

			this.snapshotInterval = setInterval(() => {
				this.snapshot();
			}, 3000);
		},

        // 销毁页面
		onUnload() {
			clearInterval(this.snapshotInterval)
		},
		
		methods: {
			/* 开启摄像头 */
			startPreview: function() {
				this.context.startPreview({
					success: (a) => {
						console.log("livePusher.startPreview:" + a);
					}
				});
			},

			/* 默认开启的是前置摄像头，根据需求决定是否调用摄像头切换方法 */
			switchCamera: function() {
				this.context.switchCamera({
					success: (a) => {
						console.log("livePusher.switchCamera:" + JSON.stringify(a));
					}
				});
			},

			/* 自动抓拍方法 */
			snapshot: function() {
				this.context.snapshot({
					success: (e) => {
						this.count++
						/* log输出抓拍的图片的路径 */
						console.log("抓拍快照 = ", e.message.tempImagePath)
						/* 抓拍成功后可以清除计时器 */
						clearInterval(this.snapshotInterval)
						/* 将抓拍的照片的路径传给人脸识别处理方法 */
						this.scanFace(e.message.tempImagePath)
					}
				});
			},

			/* 人脸识别方法 */
			scanFace(tempImagePath) {
				this.sendImageToServer(tempImagePath).then(res => {
					// 人脸识别成功
					clearInterval(this.snapshotInterval)
					uni.showToast({
						title: '人脸识别成功',
						icon: 'success',
					})
				}).catch(err => {
					/* 失败，则重新创建计时器开始抓拍图片 */
					this.snapshotInterval = setInterval(() => {
						if (this.count >= this.checkCount) {
							clearInterval(this.snapshotInterval)
						} else {
							this.snapshot()
						}
					}, 3000)
				})
			},

			// 发送图片到服务器进行人脸识别
			sendImageToServer(imagePath) {
				return new Promise((resolve, reject) => {
                    // 以下的传图片到后台的方式二选一即可

                    // 方式一：直接上传文件到后台接口
                    uni.uploadFile({
						url: config.baseUrl + "admin/reason/student/byImgQueryStuId",
						fileType: "image",
						filePath: imagePath,
						name: 'file',
						success: (res) => {
							console.log('上传成功', res);
							resolve(res.data) // 请求成功时返回结果
						},
						fail: (err) => {
							console.error('上传失败', err);
							reject('请求失败: ' + error) // 请求失败时拒绝
						}
					});

                    // 方式二：把图片转成base64传到后台接口
					// #ifdef APP-PLUS
					plus.io.resolveLocalFileSystemURL(imagePath, (entry) => { // 文件系统 
						entry.file((e) => {
							let fileReader = new plus.io.FileReader(); // 读取文件
							fileReader.readAsDataURL(e) // 以URL编码格式读取文件数据内容
							fileReader.onload = (r) => {
								const base64Image = r.target.result
								uni.request({
									url: "admin/reason/student/byImgQueryStuId", // 接口
									method: 'POST',
									data: {
										file: base64Image // 发送图片的Base64编码
									},
									success(response) {
										resolve(response.data) // 请求成功时返回结果
									},
									fail(error) {
										reject('请求失败: ' + error) // 请求失败时拒绝
									}
								})
							}
						})
					})
					// #endif

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.gaiimg {
		position: absolute;
		top: 0;
        left: 0;
	}
</style>

覆盖的图片素材如下：