uniProject/components/zhuapaiConfirm/zhuapai.vue

<template>
	<view id="Drop" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)"
		class="dropContainer">
		<view class="phone-camera-box-zhuapai" style="overflow: hidden;height: 150rpx;">
			<video ref="videoRef" :class="myClass" style="width:100%; height: 150rpx;position: absolute;"
				id="videoZhaPai" :controls="false"></video>

			<!-- 隐藏抓拍绘制图片 -->
			<canvas id="canvasZhuaPai" :class="myClass"
				style="width:100%; height:  150rpx;position: absolute;"></canvas>
			<!-- 用于抓拍切出去传递固定img-->
			<!-- #ifdef H5 -->
			<img :src="imgUrl" alt="" ref="gudingImg" v-show="false">
			<!-- #endif -->
			<!-- 测试抓拍使用 -->
			<!-- <button @click="handleZhua">抓拍</button> -->
		</view>
		<span v-show="showVideo" @click="noShowVideoBtn" class="shiti-video-hidden-btn">开<i></i></span>
		<span v-show="!showVideo" @click="showVideoBtn" class="shiti-video-show-btn">关<i></i></span>
	</view>

</template>

<script setup>
	import {
		ref,
		onUnmounted,
		nextTick,
		computed
	} from "vue";
	import {
		useH5Camera
	} from "@/components/zhuapaiConfirm/useCamera";
	import * as ksApi from "@/api/kaoshi.js"
	import {
		getStaticUrl
	} from "@/utils/common.js"

	const imgUrl = getStaticUrl('static/images/exam/nokaoshi.png')

	let zhuapaiFun = null;
	let stopCamera = null;

	const zhuapai = ref(0); // 单位分
	const showVideo = ref(true);
	const style = ref({
		top: "10vh",
		right: "0",
	});

	const myClass = computed(() => {
		return {
			'show-video': showVideo.value,
			'hidden-video': !showVideo.value
		}
	})

	const emits = defineEmits(['init', 'success', 'error', 'cancel'])

	function noShowVideoBtn() {
		showVideo.value = false
	}

	function showVideoBtn() {
		showVideo.value = true
	}

	function touchmove(event) {
		console.log(4444, event)
	}

	function touchstart(event) {
		console.log(3333, event)
	}


	function init(options) {
		zhuapai.value = options.zhuapai;
		if (zhuapai.value > 0) {
			// 启动摄像头
			nextTick(() => {
				startCamera()
			})
			// 设定计时器
			// setInterval(() => handleZhua(), zhuapai.value * 60 * 1000 || 6000000)
		}
	}

	function startCamera() {
		// 请求摄像头权限并获取流
		// #ifdef H5
		console.log('navigator', navigator)
		const {
			startH5Camera,
			handlePaiZhao,
			stopH5Camera
		} = useH5Camera({
			elVideoId: '#videoZhaPai',
			elCanvasId: '#canvasZhuaPai',
			onVideoSuccess,
			onVideoError,
			zhuapaiHttp: ksApi.getClientZhuaPaiUpdate
		})
		startH5Camera();
		zhuapaiFun = handlePaiZhao;
		stopCamera = stopH5Camera;
		// #endif

	}

	function handleZhua() {
		zhuapaiFun && zhuapaiFun()
	}

	function onVideoSuccess() {
		setTimeout(() => {
			// 首次运行进行抓拍一次
			// handleZhua();
		}, 3000);
	}

	function onVideoError() {
		emits('error')
	}

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

	defineExpose({
		init
	})
</script>

<style lang="scss" scoped>
	.dropContainer {
		width: 30vw;
		height: 150rpx;
		margin: 0;
		padding: 0;
		z-index: 10;
		position: absolute;
		right: 0;
		top: 30%;

		::v-deep .uni-video-container {
			position: absolute;
		}

		::v-deep .uni-video-video {
			position: absolute;
		}

		::v-deep .uni-canvas-canvas {
			position: absolute;
		}
		
		::v-deep .show-video {
			z-index: 10;

			.uni-video-video,.uni-canvas-canvas {
				z-index: 10;
			}
		}
		
		::v-deep .uni-video-container {
			
		}

		::v-deep .hidden-video {
			z-index: -10;

			.uni-video-video,.uni-canvas-canvas,{
				z-index: -10;
			}
		}

	

	}
</style>