-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- LIVE
-
+
+
+
@@ -327,16 +303,9 @@ const compareMatchResult = ref('')
// 摄像头状态
const cameraStatus = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
-const camera1Status = ref<'connected' | 'connecting' | 'disconnected' | 'error'>('disconnected')
// 视频元素引用
const cameraVideo = ref
(null)
-// 相机1使用canvas元素
-const camera1Canvas = ref(null)
-
-// 相机1 WebSocket连接
-const camera1Ws = ref(null)
-const camera1WsConnected = ref(false)
// FLV播放器实例
let player: any = null
@@ -556,12 +525,7 @@ const stopCamera = () => {
// 监听步骤变化
watch(activeStep, (newVal) => {
- if (newVal === 1) {
- // 进入扫码核验页面,启动相机1
- nextTick(() => {
- initCamera1()
- })
- } else if (newVal === 2) {
+ if (newVal === 2) {
// 进入称重登记页面,启动摄像头
nextTick(() => {
initCamera()
@@ -569,17 +533,12 @@ watch(activeStep, (newVal) => {
} else {
// 离开相关页面,停止摄像头
stopCamera()
- closeCamera1WebSocket()
}
})
// 组件挂载时
onMounted(async () => {
await loadFlvJs()
- // 如果当前是扫码核验页面,初始化相机1
- if (activeStep.value === 1) {
- initCamera1()
- }
})
// 组件卸载时
@@ -823,129 +782,21 @@ const handleNext = async () => {
Message.error('比对失败,请重试')
}
} else {
- activeStep.value++
- // 进入称重页面时建立WebSocket连接
- if (activeStep.value === 2) {
- establishWebSocket()
- }
- }
- }
-}
-
-// 初始化相机1 WebSocket连接
-const initCamera1 = () => {
- camera1Status.value = 'connecting'
-
- try {
- const wsUrl = 'ws://localhost:6609/ws/camera'
- camera1Ws.value = new WebSocket(wsUrl)
-
- camera1Ws.value.onopen = () => {
- camera1Status.value = 'connected'
- camera1WsConnected.value = true
- Message.success('已和相机1建立连接')
- }
-
- // 修改前端代码,处理黑白相机的视频流数据
- // 修改前端代码,处理压缩后的JPEG图像数据
- camera1Ws.value.onmessage = (event) => {
- try {
- if (camera1Canvas.value && event.data instanceof Blob) {
- // 处理二进制图像数据
- const reader = new FileReader();
- reader.onload = (e) => {
- if (e.target && e.target.result) {
- const arrayBuffer = e.target.result;
- const uint8Array = new Uint8Array(arrayBuffer);
-
- // 解析消息格式: [width(4 bytes)][height(4 bytes)][image data]
- if (uint8Array.length < 8) {
- console.error('相机1 WebSocket消息格式错误: 数据长度不足');
- return;
- }
-
- // 读取宽度和高度(小端序)
- const width = uint8Array[0] | (uint8Array[1] << 8) | (uint8Array[2] << 16) | (uint8Array[3] << 24);
- const height = uint8Array[4] | (uint8Array[5] << 8) | (uint8Array[6] << 16) | (uint8Array[7] << 24);
-
- // 检查宽度和高度是否合理
- if (width <= 0 || height <= 0 || width > 4096 || height > 4096) {
- console.error('相机1 WebSocket消息格式错误: 无效的图像尺寸');
- return;
- }
-
- // 提取压缩的图像数据
- const imageDataStart = 8;
- const imageData = uint8Array.subarray(imageDataStart);
-
- // 创建Blob对象并转换为URL
- const blob = new Blob([imageData], { type: 'image/jpeg' });
- const imageUrl = URL.createObjectURL(blob);
-
- // 创建Image对象并显示
- const img = new Image();
- img.onload = () => {
- // 设置canvas尺寸
- camera1Canvas.value.width = width;
- camera1Canvas.value.height = height;
-
- // 获取canvas上下文
- const ctx = camera1Canvas.value.getContext('2d');
- if (ctx) {
- // 绘制图像
- ctx.drawImage(img, 0, 0, width, height);
- }
-
- // 释放URL对象
- URL.revokeObjectURL(imageUrl);
- };
- img.onerror = () => {
- console.error('图像加载失败');
- URL.revokeObjectURL(imageUrl);
- };
- img.src = imageUrl;
+ activeStep.value++
+ // 进入称重页面时建立WebSocket连接
+ if (activeStep.value === 2) {
+ establishWebSocket()
+ // 离开扫码核验页面时,清除图片刷新定时器
+ if (imageRefreshTimer) {
+ clearInterval(imageRefreshTimer)
+ imageRefreshTimer = null
}
- };
- reader.readAsArrayBuffer(event.data);
+ }
}
- } catch (error) {
- console.error('相机1 WebSocket消息解析失败:', error)
- }
- }
-
-
- camera1Ws.value.onclose = () => {
- camera1Status.value = 'disconnected'
- camera1WsConnected.value = false
- }
-
- camera1Ws.value.onerror = (error) => {
- console.error('相机1 WebSocket错误:', error)
- camera1Status.value = 'error'
- Message.error('相机1连接失败')
- }
- } catch (error) {
- console.error('建立相机1 WebSocket连接失败:', error)
- camera1Status.value = 'error'
- Message.error('无法建立相机1连接')
}
}
-// 重新连接相机1
-const reconnectCamera1 = () => {
- closeCamera1WebSocket()
- setTimeout(() => initCamera1(), 1000)
-}
-// 关闭相机1 WebSocket连接
-const closeCamera1WebSocket = () => {
- if (camera1Ws.value) {
- camera1Ws.value.close()
- camera1Ws.value = null
- camera1WsConnected.value = false
- camera1Status.value = 'disconnected'
- }
-}
// 处理上一步
const handlePrevious = () => {
@@ -955,6 +806,10 @@ const handlePrevious = () => {
if (activeStep.value !== 2) {
closeWebSocket()
}
+ // 进入扫码核验页面时,启动图片自动刷新
+ if (activeStep.value === 1) {
+ startImageRefresh()
+ }
}
}
@@ -1198,7 +1053,11 @@ const closeWebSocket = () => {
// 组件卸载时关闭WebSocket连接
onUnmounted(() => {
closeWebSocket()
- closeCamera1WebSocket()
+ // 清除图片刷新定时器
+ if (imageRefreshTimer) {
+ clearInterval(imageRefreshTimer)
+ imageRefreshTimer = null
+ }
})
@@ -1283,7 +1142,6 @@ onUnmounted(() => {
/* 主内容区域 */
.main-content {
display: flex;
- align-items: flex-start;
margin-bottom: 30px;
}
@@ -1336,7 +1194,7 @@ onUnmounted(() => {
background: #000;
border-radius: 4px;
overflow: hidden;
- margin-bottom: 20px;
+ margin: 20px 0;
}
.video-container video {