视频流优化

src/views/assetManage/monitor/deviceList.vue

@@ -203,7 +203,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <hkVideo ref="hkVideoRef" :hk-config="hkConfig" />
+        <hkVideo v-if="hkVideoVisible" ref="hkVideoRef" :hk-config="hkConfig" />
       </div>
     </el-dialog>
 
@@ -603,9 +603,7 @@ export default {
           }
 
           this.hkVideoVisible = true
-          this.$nextTick(() => {
-            this.$refs.hkVideoRef.initVideo()
-          })
+          // hkVideo 加了 v-if，会随 visible 重建并触发 mounted 中的 initVideo，无需手动调用
         }
       }).catch(err => {
         console.log('获取设备视频信息失败', err)

src/views/assetManage/monitor/index.vue

@@ -45,7 +45,9 @@
                       <p v-if="item.warehouse.administrator">{{ item.warehouse.administrator }}</p>
                       <p v-if="item.warehouse.contactPhone">&nbsp;{{ item.warehouse.contactPhone }}</p>
                     </div>
-                    <p v-if="item.warehouse.lastTime">最后同步时间: {{ item.warehouse.lastTime | parseTime }}</p>
+                    <el-tooltip class="item" effect="dark" content="最后同步时间" placement="top-end">
+                      <p v-if="item.warehouse.lastTime">{{ item.warehouse.lastTime | parseTime }}</p>
+                    </el-tooltip>
                   </div>
                 </div>
               </div>
@@ -115,7 +117,7 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <hkVideo ref="hkVideoRef" :hk-config="hkConfig" />
+        <hkVideo v-if="hkVideoVisible" ref="hkVideoRef" :hk-config="hkConfig" />
       </div>
     </el-dialog>
 
@@ -199,10 +201,10 @@ export default {
       warningScrollTasks: [],
       hkVideoVisible: false,
       hkConfig: {
-        username: null,
-        password: null,
-        ip: null,
-        port: null
+        'username': null,
+        'devicePassword': null,
+        'ip': null,
+        'port': null
       },
       // ==========历史报警弹窗新增data==========
       alarmDialogVisible: false,
@@ -417,14 +419,12 @@ export default {
         const finalPassword = pwdRes || detailRes.devicePassword
         this.hkConfig = {
           username: detailRes.deviceAccount,
-          password: finalPassword,
+          devicePassword: finalPassword,
           ip: detailRes.deviceIp,
           port: detailRes.devicePort
         }
         this.hkVideoVisible = true
-        this.$nextTick(() => {
-          this.$refs.hkVideoRef.initVideo()
-        })
+        // hkVideo 加了 v-if，会随 visible 重建并触发 mounted 中的 initVideo，无需手动调用
       } catch (err) {
         console.error('打开视频失败：', err)
         this.$message.error('获取监控设备信息失败')

src/views/components/hkVideo-old.vue

@@ -0,0 +1,71 @@
+<template>
+  <div style="width: 100%; height: 100%; overflow: hidden;">
+    <!-- <h1>海康威视视频流</h1> -->
+    <!-- <h3>400W</h3>
+    <VideoCom :rtsp="rtspurl1" ref="video1"></VideoCom>
+    <h3>800W</h3>
+    <VideoCom :rtsp="rtspurl2" ref="video2"></VideoCom> -->
+
+    <video id="video" controls autoplay muted width="100%" height="100%" />
+  </div>
+</template>
+
+<script>
+// import VideoCom  from '../components/video'
+// rtsp://admin:ftzn83560792@192.168.99.23:554/h264/ch1/main/av_stream
+// rtsp://admin:ftzn83560792@192.168.99.26:554/Streaming/Channels/101
+export default {
+  name: 'Home',
+  components: {
+    // VideoCom
+  },
+  props: {
+    hkConfig: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      webRtcServer: null,
+      camera_ip: '127.0.0.1:8000'
+    }
+  },
+  created() {
+    // this.controlVolume()
+  },
+  mounted() {
+
+  },
+  // 销毁视频流
+  beforeDestroy() {
+    this.webRtcServer.disconnect()
+    this.webRtcServer = null
+  },
+  methods: {
+    controlVolume() {
+      this.$nextTick(() => {
+        this.$refs.video1.volume = 0
+        this.$refs.video2.volume = 0
+      })
+    },
+    initVideo() {
+      // video：需要绑定的video控件ID
+    // 127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
+      const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiWebRtcServerUrl : process.env.VUE_APP_WEBRTCSTREAMER_API
+      this.camera_ip = linkSrc
+      console.log('hkConfig', this.hkConfig)
+      // eslint-disable-next-line no-undef
+      this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
+      // 需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
+      this.webRtcServer.connect('rtsp://' + this.hkConfig.username + ':' + this.hkConfig.devicePassword + '@' + this.hkConfig.ip + ':' + this.hkConfig.port + '/h264/ch1/main/av_stream')
+      // 测试用
+      // this.webRtcServer.connect('rtsp://admin:ftzn83560792@192.168.99.120:554/h264/1/1')
+      // this.webRtcServer.connect(rtsp_url)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/components/hkVideo.vue

@@ -1,24 +1,12 @@
 <template>
-  <div style="width: 100%; height: 100%; overflow: hidden;">
-    <!-- <h1>海康威视视频流</h1> -->
-    <!-- <h3>400W</h3>
-    <VideoCom :rtsp="rtspurl1" ref="video1"></VideoCom>
-    <h3>800W</h3>
-    <VideoCom :rtsp="rtspurl2" ref="video2"></VideoCom> -->
-
+  <div style="width: 100%; height: 700px; overflow: hidden;">
     <video id="video" controls autoplay muted width="100%" height="100%" />
   </div>
 </template>
 
 <script>
-// import VideoCom  from '../components/video'
-// rtsp://admin:ftzn83560792@192.168.99.23:554/h264/ch1/main/av_stream
-// rtsp://admin:ftzn83560792@192.168.99.26:554/Streaming/Channels/101
 export default {
   name: 'Home',
-  components: {
-    // VideoCom
-  },
   props: {
     hkConfig: {
       type: Object,
@@ -28,44 +16,99 @@ export default {
   data() {
     return {
       webRtcServer: null,
-      camera_ip: '127.0.0.1:8000'
+      camera_ip: '127.0.0.1:8000',
+      iceDisconnectTimer: null,
+      pcReadyTimer: null,
+      reconnectTimer: null,
+      isReconnecting: false,
+      pc: null
     }
   },
-  created() {
-    // this.controlVolume()
-  },
   mounted() {
-
+    this.initVideo()
   },
-  // 销毁视频流
   beforeDestroy() {
+    // 清理所有定时器
+    clearTimeout(this.iceDisconnectTimer)
+    clearTimeout(this.pcReadyTimer)
+    clearTimeout(this.reconnectTimer)
+    // 移除事件监听
+    if (this.pc) {
+      this.pc.removeEventListener('iceconnectionstatechange', this.handleIceStateChange)
+      this.pc = null
+    }
+    // 断开 webrtc 连接
+    if (this.webRtcServer) {
       this.webRtcServer.disconnect()
       this.webRtcServer = null
+    }
+    this.isReconnecting = false
   },
   methods: {
-    controlVolume() {
-      this.$nextTick(() => {
-        this.$refs.video1.volume = 0
-        this.$refs.video2.volume = 0
-      })
-    },
     initVideo() {
-      // video：需要绑定的video控件ID
-    // 127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
-      const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiWebRtcServerUrl : process.env.VUE_APP_WEBRTCSTREAMER_API
+      const linkSrc = process.env.NODE_ENV === 'production'
+        ? window.g.ApiWebRtcServerUrl
+        : process.env.VUE_APP_WEBRTCSTREAMER_API
       this.camera_ip = linkSrc
-      console.log('hkConfig', this.hkConfig)
+
       // eslint-disable-next-line no-undef
       this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
-      // 需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
-      this.webRtcServer.connect('rtsp://' + this.hkConfig.username + ':' + this.hkConfig.devicePassword + '@' + this.hkConfig.ip + ':' + this.hkConfig.port + '/h264/ch1/main/av_stream')
-      // 测试用
-      // this.webRtcServer.connect('rtsp://admin:ftzn83560792@192.168.99.120:554/h264/1/1')
-      // this.webRtcServer.connect(rtsp_url)
+
+      // 重置 pc 引用
+      this.pc = null
+      // 【重点】等待pc初始化完成，再监听事件，不能立即监听！
+      const waitPcReady = () => {
+        if (!this.webRtcServer || !this.webRtcServer.pc) {
+          this.pcReadyTimer = setTimeout(waitPcReady, 100)
+          return
+        }
+        this.pc = this.webRtcServer.pc
+        this.pc.addEventListener('iceconnectionstatechange', this.handleIceStateChange)
+      }
+      waitPcReady()
+
+      // 海康子码流102
+      const streamNo = 1 * 100 + 2
+      const rtspUrl = `rtsp://${this.hkConfig.username}:${this.hkConfig.devicePassword}@${this.hkConfig.ip}:${this.hkConfig.port}/Streaming/Channels/${streamNo}`
+      console.log('rtspUrl:', rtspUrl)
+      this.webRtcServer.connect(rtspUrl)
+    },
+
+    // ICE 连接状态变化处理（抽成方法便于移除监听）
+    handleIceStateChange() {
+      if (!this.pc) return
+      const state = this.pc.iceConnectionState
+      console.log('iceConnectionState:', state)
+      if (state === 'disconnected') {
+        this.iceDisconnectTimer = setTimeout(() => {
+          if (!this.isReconnecting) {
+            this.isReconnecting = true
+            console.warn('ICE长时间disconnected，执行重连')
+            this.reConnectStream()
+          }
+        }, 5000)
+      } else if (state === 'connected') {
+        clearTimeout(this.iceDisconnectTimer)
+        this.isReconnecting = false
+      } else if (state === 'failed') {
+        clearTimeout(this.iceDisconnectTimer)
+        this.reConnectStream()
+      }
+    },
+
+    reConnectStream() {
+      // 清理旧 pc 上的监听
+      if (this.pc) {
+        this.pc.removeEventListener('iceconnectionstatechange', this.handleIceStateChange)
+        this.pc = null
+      }
+      if (this.webRtcServer) {
+        this.webRtcServer.disconnect()
+      }
+      this.reconnectTimer = setTimeout(() => {
+        this.initVideo()
+      }, 300)
     }
   }
 }
 </script>
-
-<style lang="scss">
-</style>