调整

components/zhuapaiConfirm/useCamera.js

@@ -453,7 +453,7 @@ export function useH5Camera({
 	}
 
 	function getSnapShotImage(data) {
-		console.log('base64', data)
+		// console.log('base64', data)
 		const imgData = data.split(';base64,');
 		if (!imgData.length) {
 			console.error('【源 ：拍照数据异常，未找到图片二进制数据分割节点： `;base64,`】');
@@ -490,7 +490,7 @@ export function useH5Camera({
 		}).catch(err => {
 			uni.showToast({
 				icon: 'none',
-				title: '抓拍图片异常!'
+				title: '当前网络可能存在异常，请稍后重试，如持续异常，请联系管理员。注：若异常未联系管理员，可能会影响考试结果。'
 			})
 			uni.redirectTo({
 				url: "/pages/client/Kaoshi/list"
@@ -507,4 +507,6 @@ export function useH5Camera({
 		errorFunComplete,
 		playVideo
 	}
-}
+}
+
+

components/zhuapaiConfirm/zhuapai.vue

@@ -1,5 +1,6 @@
 <template>
-	<view class="zhuapai-drop-container" id="Drop" ref="DropRef" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)">
+	<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>
 			<!-- 隐藏抓拍绘制图片 -->
@@ -44,6 +45,9 @@
 	const disX = ref(0); // 移动x
 	const disY = ref(0); // 移动y
 	const showVideo = ref(true);
+	const isBuffer = ref(false);
+
+	const stopTimer = ref(null);
 	const style = ref({
 		top: "10vh",
 		right: "0",
@@ -56,7 +60,7 @@
 		}
 	})
 
-	const emits = defineEmits(['init', 'success', 'error', 'cancel'])
+	const emits = defineEmits(['init', 'success', 'error', 'cancel', 'progress'])
 
 	function noShowVideoBtn() {
 		showVideo.value = false
@@ -71,10 +75,10 @@
 		// 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"}  
+
+		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，获取容器的宽高和拖动元素的宽高  每一次移动都会获取一次 ，建议放在外面进行获取
@@ -157,42 +161,136 @@
 			// 首次运行进行抓拍一次
 			handleZhua();
 		}, 3000);
+		addVideoListener();
 	}
 
 	function onVideoError() {
 		emits('error')
+		removeVideoListener()
+	}
+
+	// 针对视频通话的监听处理
+
+	function onTimeupdate() {
+		if (isBuffer.value) {
+			console.log('buffer')
+			return;
+		}
+		if (!stopTimer.value) {
+			return;
+		}
+		console.log('onTimeupdate')
+		clearTimeout(stopTimer.value);
+		stopTimer.value = null;
 	}
 
+	function onProgress() {
+		if (stopTimer.value) {
+			return;
+		}
+		isBuffer.value = true;
+		console.log('onProgress')
+		// buffer时间增大到3秒 过滤掉后续的onTimeupdate
+		setTimeout(() => {isBuffer.value = false}, 3000)
+		// 视频中途暂停被占用
+		stopTimer.value = setTimeout(() => {
+			emits('progress', false);
+			console.log('结束')
+		}, 10 * 1000)
+	}
+   function addVideoListener() {
+		let video = document.querySelector(`#videoZhaPai .uni-video-video`)
+		// 判定有流
+		video.addEventListener('progress', onProgress);
+		video.addEventListener('timeupdate', onTimeupdate);
+	}
+     function removeVideoListener() {
+		let video =document.querySelector(`#videoZhaPai .uni-video-video`)
+		video && video.removeEventListener('progress', onProgress);
+		video && video.removeEventListener('timeupdate', onTimeupdate);
+	}
+
+
 	onUnmounted(() => {
 		// 组件销毁时停止摄像头
 		stopCamera && stopCamera();
+		removeVideoListener();
 	})
 
 	defineExpose({
-		init,showVideoBtn
+		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);}
+		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;
+			}
 		}
-		.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-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");}
+
+		.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>

pages/client/Kaoshi/exam.vue

@@ -79,11 +79,11 @@
 			</view>
 		</uni-popup>
 		<!-- 摄像头确认 -->
-		<zhuapaiConfirm ref="zhuapaiConfirmRef" @success="zpConfirmSuccess" @error="zpConfirmError"
+		<zhuapaiConfirm ref="zhuapaiConfirmRef" @success="zpConfirmSuccess" @error="zpConfirmError" 
 			@cancel="zpConfirmCancel" key="1"></zhuapaiConfirm>
 		<template v-if="data.zhuapai && data.zhuapai > 0">
 			<!-- 抓拍 -->
-			<zhuapaiVue ref="zhuapaiRef" @error="zpError" @success="zpSuccess" key="2"></zhuapaiVue>
+			<zhuapaiVue ref="zhuapaiRef" @error="zpError" @success="zpSuccess" key="2" @progress="onProgress"></zhuapaiVue>
 		</template>
 	
 		<!-- 切屏 -->
@@ -419,6 +419,14 @@
 
 	// 摄像头抓拍相关功能 end
 	// 摄像头确认相关功能 start
+	function onProgress() {
+		uni.showToast({
+			icon: 'none',
+			title: '摄像头运行环境异常，请重新进入考试',
+			duration: 8000
+		})
+		handleBack();
+	}
 	function zpConfirmSuccess() {
 		initKaoshi();
 	}