feat:完善监控播放器

src/components/VideoDialog/index.vue

@@ -8,11 +8,13 @@
       :z-index="9999"
       destroy-on-close
     >
-      <div v-if="src" class="dialog-box">
-        <video class="video" ref="videoRef" muted autoplay controls>
+      <div class="dialog-box">
+        <div class="video">
+          <HlsPlayer :url="src" />
+        </div>
+        <!-- <video class="video" ref="videoRef" muted autoplay controls>
           <source type="application/x-mpegURL" />
-        </video>
-
+        </video> -->
         <div class="action-box">
           <div class="action-item">
             <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
@@ -33,7 +35,6 @@
           </div>
         </div>
       </div>
-      <p v-else class="none">暂无信号</p>
       <img class="close" src="@/assets/images/close.png" @click="handleClose" />
     </el-dialog>
   </div>
@@ -71,19 +72,19 @@
   let webRtcServer = null
   let hlsRef = null
 
-  watch(
-    () => modelValue.value,
-    (val) => {
-      if (val) {
-        setTimeout(() => {
-          init()
-        }, 1000)
-      }
-    },
-    {
-      immediate: true
-    }
-  )
+  // watch(
+  //   () => modelValue.value,
+  //   (val) => {
+  //     if (val) {
+  //       setTimeout(() => {
+  //         init()
+  //       }, 1000)
+  //     }
+  //   },
+  //   {
+  //     immediate: true
+  //   }
+  // )
 
   const handleAction = async (e) => {
     if (e == STOP) {
@@ -106,8 +107,10 @@
     })
   }
   const handleClose = () => {
-    hlsRef.destroy()
-    hlsRef = null
+    if (hlsRef) {
+      hlsRef.destroy()
+      hlsRef = null
+    }
     modelValue.value = false
   }
   const init = () => {
@@ -179,6 +182,8 @@
       position: absolute;
       left: 50%;
       top: 50%;
+      width: vw(1814);
+      height: vw(980);
       color: #fff;
       font-weight: bold;
       font-size: vw(30);