fix

bigScreen3/src/views/dashboard/cpns/VideoSurveillance.vue

@@ -8,21 +8,14 @@
         class="video-item"
         @click="closeAllVideosAndOpenModal(video)">
         <div class="video-thumbnail">
-          <!-- 直接显示设备的fImg图片，如果没有则显示默认图片 -->
-            <div class="video-thumbnail-img">
-              <img 
-                :src="video.fImg || defaultImg" 
-                :alt="video.name" 
-                class="camera-image"
-                @error="handleImageError($event, index)"
-              />
-              <div class="play-indicator">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <circle cx="12" cy="12" r="10" stroke="rgba(7, 185, 255, 0.8)" stroke-width="2"/>
-                  <path d="M9 8L17 12L9 16V8Z" fill="rgba(7, 185, 255, 0.9)"/>
-                </svg>
-              </div>
-            </div>
+          <video
+            :id="`video-${index}`"
+            :ref="el => videoEls[index] = el"
+            preload="metadata"
+            muted
+            playsinline
+            autoplay
+          ></video>
           <div class="name-badge">{{ video.name }}</div>
           <div class="time-badge">{{ video.time }}</div>
         </div>
@@ -41,6 +34,7 @@
               playsinline 
               controls 
               class="video-player" 
+              style="width: 100%; height: 100%; object-fit: contain;"
               autoplay
               muted
             ></video>
@@ -57,12 +51,6 @@
 import { ref, onMounted, watch, onUnmounted } from 'vue'
 import { getPageListData } from '@/api/index'
 import videoSrc from '@/assets/mp4/ziyuan.mp4'
-import defaultImg from '@/assets/defaultImg.png'
-import axios from 'axios'
-import { getToken } from '@/utils/auth'
-import { ElMessage } from 'element-plus'
-
-
 
 // 监控设备列表（响应式数据）
 const videoList = ref([])
@@ -89,13 +77,15 @@ const fetchDriveInfoList = async () => {
         return {
           name: device.deviceName || device.fRemark || '未知监控设备',
           time: formattedTime,
-          deviceId: device.fDriveid,
-          streamUrl: device.url,
-          fImg: device.fImg || '' // 保存设备图片地址
+          deviceId: device.id || device.deviceId || '',
+          streamUrl: 'rtsp://'+device.fAccount+':'+device.fPassword+'@'+device.fIp
         }
       })
       
-      // 默认不再自动播放视频，改为点击时播放
+      // 数据加载完成后，自动播放所有视频
+      setTimeout(() => {
+        playAllVideos();
+      }, 100);
     } else {
       console.warn('接口返回数据格式不正确，使用默认数据')
     }
@@ -106,21 +96,13 @@ const fetchDriveInfoList = async () => {
 
 
 
-// 处理图片加载错误，显示默认图片
-function handleImageError(event, index) {
-  event.target.src = defaultImg;
-  // 更新videoList中的fImg为默认图片，避免重复触发错误
-  if (videoList.value[index]) {
-    videoList.value[index].fImg = defaultImg;
-  }
-}
-// WebRTC服务器配置
-const WEBRTC_CONFIG = {
-  server: "http://127.0.0.1:8000",
-  connectParams: "rtptransport=tcp&timeout=30&connectiontimeout=5",
-  reconnectDelay: 3000,
-  timeoutDelay: 10000
-}
+// 视频元素引用数组
+const videoEls = ref([])
+
+// WebRTC实例数组，用于管理多个视频流
+const webRtcServers = ref([]);
+// WebRTC服务器地址
+const IP = "http://127.0.0.1:8000";
 
 // 模态框相关状态
 const isModalOpen = ref(false)
@@ -130,25 +112,81 @@ const selectedVideo = ref(null)
 const videoElement = ref(null)
 // 模态框中使用的WebRTC实例
 const modalWebRtcServer = ref(null);
-// 模态框连接超时引用
-let modalConnectTimeout = null;
 // 监听项目ID变化，重新获取数据
 watch(() => props.selectedProjectId, () => {
+  // 先停止所有视频播放
+  stopAllVideos();
   // 重新获取数据
   fetchDriveInfoList();
 }, { immediate: true })
-const fDriveid = ref('')
-// 关闭所有视频并打开模态框
-function closeAllVideosAndOpenModal(video) {
-  if (!video.streamUrl) {
-    ElMessage.warning('视频流URL为空，无法播放');
-
+// 播放所有视频
+function playAllVideos() {
+  // 检查WebRtcStreamer是否可用
+  if (!window.WebRtcStreamer) {
+    console.warn('WebRtcStreamer不可用，无法播放视频流');
     return;
   }
+  
+  // 为每个视频创建WebRTC连接
+  videoList.value.forEach((video, index) => {
+    playVideoWithWebRTC(video, index);
+  });
+}
+
+// 使用WebRTC播放单个视频
+function playVideoWithWebRTC(video, index) {
+  const videoEl = videoEls.value[index];
+  if (!videoEl) return;
+  
+  try {
+    // 停止之前可能存在的流
+    if (webRtcServers.value[index]) {
+      webRtcServers.value[index].disconnect();
+      webRtcServers.value[index] = null;
+    }
+    
+    // 创建新的WebRTC实例
+    webRtcServers.value[index] = new WebRtcStreamer(`video-${index}`, IP);
+    console.log(`创建视频${index}的WebRTC实例: ${video.name}`);
+    
+    // 连接视频流
+    if (webRtcServers.value[index]) {
+      webRtcServers.value[index].connect(video.streamUrl, null, "rtptransport=tcp&timeout=60", null, null);
+      console.log(`视频${index}的WebRTC流已连接: ${video.streamUrl}`);
+    }
+  } catch (err) {
+    console.error(`播放视频${index}失败:`, err);
+  }
+}
+
+// 停止所有视频播放
+function stopAllVideos() {
+  // 停止网格中的所有视频
+  webRtcServers.value.forEach((server, index) => {
+    if (server) {
+      try {
+        server.disconnect();
+        console.log(`停止视频${index}的播放`);
+      } catch (err) {
+        console.error(`停止视频${index}播放失败:`, err);
+      }
+      webRtcServers.value[index] = null;
+    }
+  });
+  
+  // 清空数组
+  webRtcServers.value = [];
+}
+
+// 关闭所有视频并打开模态框
+function closeAllVideosAndOpenModal(video) {
+  // 关闭网格中所有视频的播放
+  stopAllVideos();
+  
   // 打开模态框播放当前视频
   selectedVideo.value = video
   isModalOpen.value = true
-  fDriveid.value = video.deviceId
+  
   // 等待模态框完全渲染后初始化视频元素并自动播放
   setTimeout(() => {
     if (videoElement.value) {
@@ -161,13 +199,8 @@ function closeAllVideosAndOpenModal(video) {
   }, 100)
 }
 
-
-
 // 关闭视频播放模态框
 function closeModal() {
-  // 先触发截图并上传
-  captureAndUploadSnapshot();
-  
   // 停止视频播放
   if (videoElement.value) {
     videoElement.value.pause()
@@ -178,100 +211,11 @@ function closeModal() {
   
   isModalOpen.value = false
   selectedVideo.value = null
-}
-
-// 截图并上传图片
-async function captureAndUploadSnapshot() {
-  try {
-    if (!videoElement.value || !isModalOpen.value) return;
-    
-    const video = videoElement.value;
-    
-    // 检查视频是否有有效画面
-    if (!video.videoWidth || !video.videoHeight) {
-      console.warn('视频无有效画面，跳过截图');
-      return;
-    }
-    
-    // 创建canvas用于截图
-    const canvas = document.createElement('canvas');
-    
-    // 设置canvas尺寸与视频一致
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    
-    try {
-      // 绘制视频当前帧到canvas
-      const ctx = canvas.getContext('2d');
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      
-      // 将canvas转换为Blob
-      canvas.toBlob(async (blob) => {
-        if (!blob) {
-          console.warn('创建截图失败');
-          return;
-        }
-        console.log('截图创建成功，大小:', blob.size);
-        try {
-          // 创建FormData用于上传，添加文件名参数
-          const formData = new FormData();
-          // 为文件添加文件名参数，格式为：监控截图_时间戳.jpg
-          const fileName = `监控截图_${Date.now()}.jpg`;
-          formData.append('file', blob, fileName);
-          
-          // 上传图片到指定接口
-          const response = await axios.post(import.meta.env.VITE_APP_BASE_API +'/file/uploadFile', formData, {
-            headers: {
-              'Content-Type': 'multipart/form-data',
-              'fSource':2,
-              'token':getToken()
-            },
-            timeout: 10000 // 设置10秒超时
-          });
-          
-          console.log('截图上传成功:', response.data);
-          // 上传成功后保存图片路径到设备信息
-          if (response.data && response.data.data && response.data.data[0]) {
-            const fFileurl = response.data.data[0].fFileurl;
-            // 获取当前设备ID
-           
-            
-            // 调用更新设备信息接口保存图片路径
-            try {
-              if (!fDriveid.value) {
-                console.warn('设备ID为空，无法保存图片路径');
-                return;
-              }
-              await axios.post(import.meta.env.VITE_APP_BASE_API + 'tbasedriveinfo/updateDriveInfo', {
-                data: {
-                  fDriveid: fDriveid.value,
-                  fImg: fFileurl,
-                }
-              }, {
-                headers: {
-                  'Content-Type': 'application/json',
-                  'token': getToken(),
-                  'fSource':2
-                }
-              });
-              fDriveid.value = ''
-              fetchDriveInfoList()
-              console.log('图片路径保存成功');
-            } catch (saveError) {
-              console.error('图片路径保存失败:', saveError.message || saveError);
-            }
-          }
-
-        } catch (uploadError) {
-          console.error('截图上传失败:', uploadError.message || uploadError);
-        }
-      }, 'image/jpeg', 0.8); // 质量参数0.8，平衡文件大小和图像质量
-    } catch (drawError) {
-      console.error('绘制视频帧失败:', drawError);
-    }
-  } catch (err) {
-    console.error('截图失败:', err.message || err);
-  }
+  
+  // 重新加载所有视频
+  setTimeout(() => {
+    playAllVideos();
+  }, 100);
 }
 
 // 初始化并尝试播放视频流
@@ -296,65 +240,13 @@ async function initAndPlayStream() {
       
       // 初始化WebRTC实例
       if (!modalWebRtcServer.value) {
-        modalWebRtcServer.value = new WebRtcStreamer("video", WEBRTC_CONFIG.server);
+        modalWebRtcServer.value = new WebRtcStreamer("video", IP);
         console.log('模态框WebRTC实例创建成功')
-        
-        // 添加错误处理和状态监听
-        modalWebRtcServer.value.onStateChange = (state) => {
-          console.log('模态框视频状态变化:', state);
-          // 当连接断开时尝试重连
-          if (state === 'DISCONNECTED' && isModalOpen.value && selectedVideo.value) {
-            console.log('模态框视频连接已断开，将在3秒后尝试重连');
-            setTimeout(() => {
-              if (modalWebRtcServer.value && selectedVideo.value && selectedVideo.value.streamUrl) {
-                console.log('尝试重新连接模态框视频');
-                try {
-                  modalWebRtcServer.value.connect(
-                    selectedVideo.value.streamUrl, 
-                    null, 
-                    WEBRTC_CONFIG.connectParams, 
-                    null, 
-                    null
-                  );
-                } catch (reconnectErr) {
-                  console.error('模态框视频重连失败:', reconnectErr);
-                }
-              }
-            }, WEBRTC_CONFIG.reconnectDelay);
-          }
-        };
       }
       
-      // 设置连接超时处理
-      if (!modalConnectTimeout) {
-        modalConnectTimeout = setTimeout(() => {
-          if (modalWebRtcServer.value && modalWebRtcServer.value.state !== 'STREAMING') {
-            console.warn('模态框视频连接超时，尝试重连');
-            try {
-              modalWebRtcServer.value.disconnect();
-              modalWebRtcServer.value.connect(
-                streamUrl, 
-                null, 
-                WEBRTC_CONFIG.connectParams, 
-                  null, 
-                  null
-              );
-            } catch (timeoutErr) {
-              console.error('模态框视频超时重连失败:', timeoutErr);
-            }
-          }
-        }, WEBRTC_CONFIG.timeoutDelay);
-      }
-      
-      // 连接视频流，使用更可靠的参数
+      // 连接视频流
       if (modalWebRtcServer.value) {
-        modalWebRtcServer.value.connect(
-          streamUrl, 
-          null, 
-          WEBRTC_CONFIG.connectParams, 
-          null, 
-          null
-        );
+        modalWebRtcServer.value.connect(streamUrl, null , "rtptransport=tcp&timeout=60", null,null);
         console.log('WebRTC视频流已连接');
       }
     } else {
@@ -364,10 +256,12 @@ async function initAndPlayStream() {
     }
   } catch (err) {
     console.error('启动视频流失败:', err);
-    // 错误后立即尝试重连
-    setTimeout(() => {
-      initAndPlayStream();
-    }, 2000);
+    // 尝试播放默认视频作为后备
+    try {
+      await playDefaultVideo();
+    } catch (fallbackErr) {
+      console.error('播放默认视频也失败:', fallbackErr);
+    }
   }
 }
 
@@ -391,15 +285,7 @@ async function playDefaultVideo() {
 // 销毁模态框视频实例
 const destroyModalVideo = () => {
   try {
-    // 清除模态框连接超时定时器
-    if (modalConnectTimeout) {
-      clearTimeout(modalConnectTimeout);
-      modalConnectTimeout = null;
-    }
-    
     if (modalWebRtcServer.value) {
-      // 移除事件监听
-      modalWebRtcServer.value.onStateChange = null;
       modalWebRtcServer.value.disconnect()
       modalWebRtcServer.value = null
       console.log('模态框WebRTC实例已销毁')
@@ -412,14 +298,15 @@ const destroyModalVideo = () => {
 // 组件挂载时初始化
 onMounted(() => {
   fetchDriveInfoList();
-})
-  // 移除自动播放逻辑，改为点击时播放
+});
 
 // 组件卸载时清理资源
 onUnmounted(() => {
+  // 停止所有视频播放
+  stopAllVideos();
   // 销毁模态框视频实例
   destroyModalVideo();
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -484,58 +371,19 @@ onUnmounted(() => {
       }
       
       .video-thumbnail {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            border-radius: 4px;
-            overflow: hidden;
-            border: 1px solid rgba(7, 185, 255, 0.6);
-            box-shadow: 0 0 0 1px rgba(7, 185, 255, 0.2) inset;
-            
-            .video-thumbnail-img {
-              width: 100%;
-              height: 100%;
-              position: relative;
-              overflow: hidden;
-              background: linear-gradient(135deg, rgba(0, 30, 60, 0.8) 0%, rgba(0, 51, 102, 0.9) 100%);
-            }
-            
-            .camera-image {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              transition: transform 0.3s ease;
-            }
-            
-            .video-item:hover .camera-image {
-              transform: scale(1.05);
-            }
-            
-            .play-indicator {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              opacity: 0.8;
-              transition: all 0.3s ease;
-              filter: drop-shadow(0 0 5px rgba(7, 185, 255, 0.5));
-              background: rgba(0, 0, 0, 0.3);
-              border-radius: 50%;
-              padding: 8px;
-            }
-            
-            .video-item:hover .play-indicator {
-              opacity: 1;
-              transform: translate(-50%, -50%) scale(1.1);
-              filter: drop-shadow(0 0 8px rgba(7, 185, 255, 0.8));
-              background: rgba(0, 0, 0, 0.5);
-            }
-            
-            video {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
+        width: 100%;
+        height: 100%;
+        position: relative;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid rgba(7, 185, 255, 0.6);
+        box-shadow: 0 0 0 1px rgba(7, 185, 255, 0.2) inset;
+        
+        video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
 
         .name-badge {
           position: absolute;
@@ -586,6 +434,7 @@ onUnmounted(() => {
     height: 72vh;
     background-image: url('@/assets/bj2.png');
     background-size: 100% 100%;
+    background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     border-radius: 6px;
@@ -598,7 +447,7 @@ onUnmounted(() => {
       flex: 1;
       display: flex;
       flex-direction: column;
-      height: 100%;
+      
       .video-wrapper {
         position: relative;
         flex: 1;
@@ -611,7 +460,7 @@ onUnmounted(() => {
         .video-player {
           width: 100%;
           height: 100%;
-          object-fit: cover;
+          object-fit: contain;
           background: #000;
           cursor: pointer;
         }