uniProject/components/zhuapaiConfirm/index.vue

<template>
	<view class="phone-camera-box">
		<view v-show="!showConfirmBtn" class="sxt-tip-box" style="text-align: center;">{{textMess}}</view>
		<camera v-show="showConfirmBtn" class="camera" device-position="front" flash="off" @initdone="onVideoSuccess"
			style="width:100%; height: 320rpx;"></camera>
	</view>
</template>

<script setup>
	import {
		ref,
		onUnmounted,
		onMounted,
		nextTick
	} from "vue"
	import {
		useH5Camera
	} from "./useCamera.js"

	const emits = defineEmits(['success', 'error', 'cancel'])
	const popupRef = ref(null)
	const showConfirmBtn = ref(false);
	const cameraContext = ref(null);

	let zhuapaiFun = null;
	let stopCamera = null;
	let errorFunCompleteFn = null;
	const textMess = ref('摄像头正在初始化...')

	function startCamera() {
		// 请求摄像头权限并获取流
		cameraContext.value = uni.createCameraContext();
	}

	function handleZhua() {
		zhuapaiFun()
	}


	function onVideoSuccess() {
		showConfirmBtn.value = true;
	}

	function onVideoError(e) {
		showConfirmBtn.false = true;
		textMess.value = '摄像头初始化失败!'
		emits('error')
		errorFunCompleteFn && errorFunCompleteFn(e)
	}

	function showDialog() {
		textMess.value = '摄像头正在初始化...'
		setTimeout(() => {
			showConfirmBtn.value = true;
			nextTick(() => {
				startCamera()
			})
		},1000)
	}

	function handleClose() {
		emits('cancel')
		stopCamera && stopCamera()
	}

	function handleConfirm() {
		emits('success')
		stopCamera && stopCamera()
	}

	defineExpose({
		showDialog
	})

	onUnmounted(() => {
		// 组件销毁时停止摄像头
		stopCamera && stopCamera();
	})
</script>

<style lang="scss">
	.phone-camera-box {
		margin-top: 60px;
		width: 100%;
	}

	.uni-video-container {
		width: 100%;
	}

	.uni-video-video {
		width: 100%;
	}

	.my-dialog-cc .uni-dialog-button-group .uni-border-left .uni-button-color {
		color: #3fd2a1;
	}
</style>