uniProject/components/zhuapaiConfirm/zhuapai.vue

<template>
	<view class="zhuapai-drop-container" id="Drop" ref="DropRef" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)">
		<view class="phone-camera-box-zhuapai">
			<video ref="videoRef" class="video-view-box" :class="myClass" id="videoZhaPai" :controls="false"></video>
			<!-- 隐藏抓拍绘制图片 -->
			<canvas id="canvasZhuaPai" class="video-view-box canvas-view-box" :class="myClass"></canvas>
			<!-- 用于抓拍切出去传递固定img-->
			<!-- #ifdef H5 -->
			<img :src="imgUrl" alt="" id="gdImg" 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;
	let playVideoFun = null;

	const DropRef = ref(null);
	const DropContainerRef = ref(null);
	const zhuapai = ref(0); // 单位分
	const operId = ref(null); // 单位分
	const disX = ref(0); // 移动x
	const disY = ref(0); // 移动y
	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;
		playVideoFun && playVideoFun();
	}

	function touchmove(event) {
		// 2，获取手指移动的实时位置  需要减去位置差
		let moveX = event.touches[0].pageX - disX.value;
		let moveY = event.touches[0].pageY - disY.value;
		
		const systemInfo = uni.getSystemInfoSync();  
		const windowHeight = systemInfo.windowHeight;  // 可视区域高度 ‌:ml-citation{ref="1,3" data="citationList"}  
		const windowWidth = systemInfo.windowWidth;  // 可视区域高度 ‌:ml-citation{ref="1,3" data="citationList"}  


		// 3，获取容器的宽高和拖动元素的宽高  每一次移动都会获取一次 ，建议放在外面进行获取
		let dragHeight = DropRef.value.$el.offsetHeight;
		let dragWidth = DropRef.value.$el.offsetWidth;

		// 4，控制范围：在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
		if (moveX <= 0) {
			moveX = 0;
		}
		// 上边界
		if (moveY <= 0) {
			moveY = 0;
		}
		//下边界  容器高度 - 拖动元素高度
		if (moveY >= windowHeight - dragHeight - 150) {
			moveY = windowHeight - dragHeight - 150;
		}
		//右边界   容器宽度 - 拖动元素宽度
		if (moveX >= windowWidth - dragWidth) {
			moveX = 0;
		}

		// 5，开始移动
		style.value.top = moveY + "px";

	}

	function touchstart(event) {
		disX.value = event.touches[0].pageX - DropRef.value.$el.offsetLeft;
		disY.value = event.touches[0].pageY - DropRef.value.$el.offsetTop;
	}


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

		}
	}

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

	}

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

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

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

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

	defineExpose({
		init,showVideoBtn
	})
</script>

<style lang="scss">
	.zhuapai-drop-container {
    width: 180rpx;height: 400rpx;margin: 0;padding: 0;z-index: 10;position: absolute;overflow: hidden;
		.phone-camera-box-zhuapai{
			width: 100%;height: 240rpx;position: absolute;overflow: hidden;
			.uni-video-container{background-color: transparent; pointer-events: none;}
			.canvas-view-box,.hidden-video{transform: translateY(10000rpx);}
		}
		.video-view-box{width:100%;height: 240rpx;position: absolute;}
		.shiti-video-hidden-btn,.shiti-video-show-btn{
			position: absolute;top:0;
			i{width: 32rpx;height: 32rpx;display: block;background-size: cover;background-repeat: no-repeat;background-position:center;}
		}
		.shiti-video-hidden-btn{
			width: 60rpx;height: 60rpx;left:0;
			 i{background-image: url("@/static/images/exam/video-close-icon.svg");margin:6rpx auto 6rpx 6rpx;}
		 }
		.shiti-video-show-btn{
			background-color: #dcfbf1;padding:20rpx;border-radius:8rpx;right:0;
			i{background-image: url("@/static/images/exam/video-play-icon.svg");}
		}
	}
</style>