优化视频流

src/views/weightManage/index.vue

@@ -822,6 +822,7 @@ const initCamera1 = () => {
     }
 
     // 修改前端代码，处理黑白相机的视频流数据
+    // 修改前端代码，处理压缩后的JPEG图像数据
     camera1Ws.value.onmessage = (event) => {
       try {
         if (camera1Canvas.value && event.data instanceof Blob) {
@@ -848,11 +849,18 @@ const initCamera1 = () => {
                 return;
               }
 
-              // 提取图像数据
+              // 提取压缩的图像数据
               const imageDataStart = 8;
               const imageDataLength = uint8Array.length - imageDataStart;
               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;
@@ -860,22 +868,18 @@ const initCamera1 = () => {
                 // 获取canvas上下文
                 const ctx = camera1Canvas.value.getContext('2d');
                 if (ctx) {
-                // 创建ImageData对象
-                const canvasImageData = ctx.createImageData(width, height);
-
-                // 对于黑白相机，数据是单通道灰度格式
-                // 将单通道灰度数据转换为RGBA格式
-                for (let i = 0, j = 0; i < imageData.length && j < canvasImageData.data.length; i++, j += 4) {
-                  const gray = imageData[i];
-                  canvasImageData.data[j] = gray;     // R
-                  canvasImageData.data[j + 1] = gray; // G
-                  canvasImageData.data[j + 2] = gray; // B
-                  canvasImageData.data[j + 3] = 255;  // A (不透明)
+                  // 绘制图像
+                  ctx.drawImage(img, 0, 0, width, height);
                 }
 
-                // 将ImageData绘制到canvas上
-                ctx.putImageData(canvasImageData, 0, 0);
-              }
+                // 释放URL对象
+                URL.revokeObjectURL(imageUrl);
+              };
+              img.onerror = () => {
+                console.error('图像加载失败');
+                URL.revokeObjectURL(imageUrl);
+              };
+              img.src = imageUrl;
             }
           };
           reader.readAsArrayBuffer(event.data);