bug修复

src/utils/WebSocketUtil.js

@@ -36,7 +36,7 @@ const WebSocketUtil = {
         this.dispatchEvent('open', event);
       },
       onMessage: (data, event) => {
-        console.log('WebSocket收到消息:', data);
+        // console.log('WebSocket收到消息:', data);
         this.dispatchEvent('message', { data, event });
       },
       onError: (event) => {

src/utils/websocket.js

@@ -185,7 +185,7 @@ class WebSocketClient {
           data: 'ping',
           timestamp: new Date().getTime()
         });
-        console.log('发送心跳消息');
+        // console.log('发送心跳消息');
       } else {
         // 如果连接已断开，清除心跳定时器
         this.clearHeartbeat();

src/views/DroneOperation.vue

@@ -57,6 +57,8 @@ export default {
       flvPlayer: null,
       flightTaskUuid: null,
       reconnectNum: 0, // 直播重连次数
+      videoTimer: null, // 直播定时器
+      reconnectTimer: null,  // 直播重连定时器
     };
   },
   computed: {
@@ -126,7 +128,10 @@ export default {
             console.log("Error detail:", detail);
             if (eventType == "NetworkError") {
               this.flvPlayer.pause();
-              // this.retryConnect(5000);
+              this.flvPlayer.unload(); // 停止拉流并清理相关资源
+              this.flvPlayer.detachMediaElement(); // 可选，从DOM中分离视频元素
+              this.flvPlayer.destroy(); // 销毁播放器实例，清理资源
+              this.retryConnect(5000);
             }
           });
           flvPlayer.on(flvjs.Events.LOADING_COMPLETE, (eventType, detail) => {
@@ -152,7 +157,8 @@ export default {
         return;
       }
       this.reconnectNum++;
-      setTimeout(() => {
+      this.reconnectTimer = setTimeout(() => {
+        this.reconnectTimer = null;
         // console.log("Retrying connection...");
         this.initPlayer(); // 尝试重新连接
       }, delay);
@@ -169,7 +175,6 @@ export default {
         flightTaskUuid: this.$route.query.flightTaskUuid,
       })
         .then((res) => {
-          loading.clear();
           if (res.code == 200 && res.data) {
             this.info = res.data;
             if (
@@ -178,8 +183,14 @@ export default {
             ) {
               this.liveUrl = res.data.startStreamConvert.videoUrl;
               try {
-                this.initPlayer();
+                this.videoTimer = setTimeout(()=>{
+                  loading.clear();
+                  this.videoTimer = null;
+                  this.initPlayer();
+                }, 5000)
               } catch {}
+            }else{
+              loading.clear();
             }
           }
         })
@@ -218,9 +229,17 @@ export default {
     if (this.timer) {
       clearInterval(this.timer);
     }
+    if (this.videoTimer) {
+      clearTimeout(this.videoTimer);
+    }
+    if(this.reconnectTimer){
+      clearTimeout(this.reconnectTimer);
+    }
     if (this.flvPlayer) {
       // console.log("销毁播放器===》》》");
       this.flvPlayer.pause();
+      this.flvPlayer.unload(); // 停止拉流并清理相关资源
+      this.flvPlayer.detachMediaElement(); // 可选，从DOM中分离视频元素
       this.flvPlayer.destroy(); // 销毁播放器实例，清理资源
       this.flvPlayer = null;
     }