uniProject/components/dialog/cameraCommon.vue

<template>
	<uni-popup ref="commonPopup" :animation="false" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.4)">
		<view class="phone-common-dialog">
			<view class="common-body-box">
				<view class="common-title">{{title}}</view>
				<view class="common-content" :class="dialogContentClass">
					<view v-if="showCamera" class="camera-modal">
						<view class="mask" @click="closeCamera"></view>
						<view class="modal-content">
							<camera class="camera-view" device-position="front"></camera>
							<button class="not-confirm-btn" @click="closeCamera">关闭</button>
						</view>
					</view>
				</view>
				<view class="common-btn-box">
					<view class="not-confirm-btn" @click="handleClose">{{notBtn}}</view>
					<view class="confirm-btn" @click="confirmBtn">{{okBtn}}</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		content: {
			type: String,
			require: true,
			default: ''
		},
		dialogContentClass: {
			type: String,
			require: true,
			default: 'content-center-class'
		},
		notBtn: {
			type: String,
			require: true,
			default: '取消'
		},
		okBtn: {
			type: String,
			require: true,
			default: '确认'
		},
	});
	const commonPopup = ref(null);
	let showCamera = ref(false)
	let cameraContext = ref(null)
	let listener = ref(null)
	const $emit = defineEmits(['confirm-btn'])

	function handleShow() {
		commonPopup.value.open();
		handleCheck()
	}

	function handleClose() {
		commonPopup.value.close();
		showCamera.value = false;
	}

	function confirmBtn() {
		$emit('confirm-btn');
		commonPopup.value.close();
		showCamera.value = false;
	}

	function handleCheck() {
		try {
			const systemInfo = uni.getSystemInfo();
			// if (!systemInfo.cameraAuthorized) {
			// 	uni.showToast({
			// 		title: '设备不支持摄像头',
			// 		duration: 2000
			// 	});
			// }	
			uni.getSetting({
				success(res) {
					const authSetting = res.authSetting || {}
					if (!authSetting['scope.camera']) {
						const {
							errMsg
						} = uni.authorize({
							scope: 'scope.camera'
						});
						// if (errMsg !== 'authorize:ok') {
						// 	throw new Error('权限被拒绝');
						// }
					}
					showCamera.value = true;
					setTimeout(() => {
						cameraContext.value = uni.createCameraContext();
						console.log('cameraContext.value', cameraContext.value);
						listener.value = cameraContext.value.onCameraFrame((frame) => {
							//  console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
						})
						//	console.log('listener.value',listener.value);
						listener.value.start()
					}, 500)
				},
				fail(err) {
					handleError(err)
				}
			})


		} catch (err) {
			handleError(err);
		}
	}

	function closeCamera() {
		if (listener.value) {
			listener.value.stop();
		}
		showCamera.value = false;
		handleClose()
	}



	function handleError(err) {
		uni.showModal({
			title: '权限验证失败',
			content: err.message,
			confirmText: '去设置',
			success: (res) => {
				if (res.confirm) {
					// #ifdef MP-WEIXIN
					wx.openSetting();
					// #endif
				}
			}
		});
	}
	defineExpose({
		handleShow,
		handleCheck,
		handleClose
	})
</script>

<style>
</style>