gx

src/view/dialog/dialogCamera.vue

@@ -39,7 +39,7 @@
           </div>
         </div>
         <div
-          id="videoBox"
+          id="videoBox2"
           style="
             width: 100%;
             height: calc(100% - 110px);
@@ -49,7 +49,7 @@
           "
         >
           <video
-            id="videoPlayer"
+            id="videoPlayerInside"
             class="video-js vjs-default-skin"
             controls
             playsinline
@@ -70,15 +70,11 @@ import { CircleCloseFilled } from "@element-plus/icons-vue";
 const props = defineProps({
   cameraShow: {
     type: Boolean,
-    default: () => {
+    default: false,
-      return false;
-    },
   },
   hlsUriSsl: {
     type: String,
-    default: () => {
+    default: "",
-      return "";
-    },
   },
 });
 const emit = defineEmits(["close"]);
@@ -87,57 +83,15 @@ const emit = defineEmits(["close"]);
 const cameraShow = ref();
 const data = reactive({
   title: "摄像头",
-  columns: [],
+  // columns: [],
-  tableData: [],
+  // tableData: [],
 });
+// const gridData = [];
 const num = ref(false);
 const hlsUriSslNow = ref("");
-const gridData = [];
-// 监听
-watch(
-  () => props.cameraShow,
-  (newVal, oldVal) => {
-    if (newVal) {
-      if (hlsUriSslNow.value == "") {
-        num.value = false;
-      } else {
-        num.value = true;
-      }
-      // if (hlsUriSslNow.value != "" && props.hlsUriSsl != hlsUriSslNow.value)
-      cameraShow.value = newVal;
-      hlsUriSslNow.value = props.hlsUriSsl;
-      attachmentLink.value = hlsUriSslNow.value;
-      dp.value = null;
-      //当摄像头第二次打开时，要先创建dom
-      if (num.value) {
-        console.log(22222, document.getElementById("videoBox"));
-        insertVideo();
-      }
-      nextTick(() => {
-        setTimeout(() => {
-          loadVideo();
-        }, 1000);
-      });
-    }
-  }
-);
-const insertVideo = () => {
-  const videoElement = document.createElement("video");
-  videoElement.id = "videoPlayer";
-  videoElement.className = "video-js vjs-default-skin";
-  videoElement.controls = true;
-  videoElement.crossOrigin = "anonymous";
-  videoElement.playsinline = true;
-  videoElement.autoplay = true;
-  const sourceElement = document.createElement("source");
-  sourceElement.src = attachmentLink.value;
-  sourceElement.type = "application/x-mpegURL";
-  videoElement.appendChild(sourceElement);
-  document.getElementById("videoBox").appendChild(videoElement);
-};
 const dp = ref(null);
-const videohtml = ref("");
 const attachmentLink = ref("");
+
 const options = {
   playbackRates: [1.0],
   aspectRatio: "10:5",
@@ -147,11 +101,176 @@ const options = {
   preload: "auto",
   controls: true,
 };
+// 监听 cameraShow 变化
+// watch(
+//   () => props.cameraShow,
+//   (newVal) => {
+//     if (newVal) {
+//       if (hlsUriSslNow.value == "") {
+//         num.value = false;
+//       } else {
+//         num.value = true;
+//       }
+//       // if (hlsUriSslNow.value != "" && props.hlsUriSsl != hlsUriSslNow.value)
+//       cameraShow.value = newVal;
+//       hlsUriSslNow.value = props.hlsUriSsl;
+//       attachmentLink.value = hlsUriSslNow.value;
+//       dp.value = null;
+//       //当摄像头第二次打开时，要先创建dom
+//       if (num.value) {
+//         // console.log(22222, document.getElementById("videoBox"));
+//         console.log("VideoBox element before insertion:", document.getElementById("videoBox"));
+//         insertVideo();
+//       }
+//       nextTick(() => {
+//         setTimeout(() => {
+//           loadVideo();
+//         }, 1500);
+//       });
+//     }
+//   }
+// );
+watch(
+  () => props.cameraShow,
+  (newVal) => {
+    if (newVal) {
+      // 打开时执行
+      initializeVideo();
+    } else {
+      // 关闭时执行
+      disposeVideo();
+    }
+  }
+);
+const initializeVideo = () => {
+  if (hlsUriSslNow.value === "") {
+    num.value = false;
+  } else {
+    num.value = true;
+  }
+
+  cameraShow.value = props.cameraShow;
+  hlsUriSslNow.value = props.hlsUriSsl;
+  attachmentLink.value = hlsUriSslNow.value;
+
+  if (num.value) {
+    console.log("插入前的VideoBox元素：", document.getElementById("videoBox"));
+    insertVideo();
+  }
+
+  nextTick(() => {
+    setTimeout(() => {
+      loadVideo();
+    }, 1500);
+  });
+};
+const insertVideo = () => {
+  const videoBox = document.getElementById("videoBox2");
+
+  if (!videoBox) {
+    console.error("找不到videoBox元素。确保元素存在于DOM中。");
+    return;
+  }
+
+  // 清除现有的视频元素
+  videoBox.innerHTML = "";
+
+  const videoElement = document.createElement("video");
+  videoElement.id = "videoPlayerInside";
+  videoElement.className = "video-js vjs-default-skin";
+  videoElement.controls = true;
+  videoElement.crossOrigin = "anonymous";
+  videoElement.playsinline = true;
+  videoElement.autoplay = true;
+
+  const sourceElement = document.createElement("source");
+  sourceElement.src = attachmentLink.value;
+  sourceElement.type = "application/x-mpegURL";
+
+  videoElement.appendChild(sourceElement);
+  videoBox.appendChild(videoElement);
+
+  console.log("插入视频元素:", videoElement);
+};
+// const insertVideo = () => {
+//   const videoElement = document.createElement("video");
+//   videoElement.id = "videoPlayer";
+//   videoElement.className = "video-js vjs-default-skin";
+//   videoElement.controls = true;
+//   videoElement.crossOrigin = "anonymous";
+//   videoElement.playsinline = true;
+//   videoElement.autoplay = true;
+//   const sourceElement = document.createElement("source");
+//   sourceElement.src = attachmentLink.value;
+//   sourceElement.type = "application/x-mpegURL";
+//   videoElement.appendChild(sourceElement);
+//   document.getElementById("videoBox").appendChild(videoElement);
+// };
+// const insertVideo = () => {
+//   const videoBox = document.getElementById("videoBox");
+
+//   if (!videoBox) {
+//     console.error("videoBox element not found. Ensure the element exists in the DOM.");
+//     return;
+//   }
+
+//   // Clear any existing video element inside videoBox
+//   videoBox.innerHTML = "";
+
+//   const videoElement = document.createElement("video");
+//   videoElement.id = "videoPlayer";
+//   videoElement.className = "video-js vjs-default-skin";
+//   videoElement.controls = true;
+//   videoElement.crossOrigin = "anonymous";
+//   videoElement.playsinline = true;
+//   videoElement.autoplay = true;
+
+//   const sourceElement = document.createElement("source");
+//   sourceElement.src = attachmentLink.value;
+//   sourceElement.type = "application/x-mpegURL";
+
+//   videoElement.appendChild(sourceElement);
+//   videoBox.appendChild(videoElement);
+
+//   console.log("插入视频元素:", videoElement);
+// };
+// const dp = ref(null);
+// const videohtml = ref("");
+// const attachmentLink = ref("");
+// const options = {
+//   playbackRates: [1.0],
+//   aspectRatio: "10:5",
+//   notSupportedMessage: "此视频暂无法播放，请稍后再试",
+//   autoplay: false,
+//   muted: true,
+//   preload: "auto",
+//   controls: true,
+// };
 
 const loadVideo = () => {
-  if (videoPlayer) {
+  // if (videoPlayer) {
-    dp.value = videojs("videoPlayer", options);
+  //   dp.value = videojs("videoPlayer", options);
+  // }
+  if (dp.value) {
+    console.log("正在销毁之前的video.js实例。");
+    dp.value.dispose();
   }
+
+  dp.value = videojs("videoPlayerInside", options);
+  console.log("Video.js播放器已加载：", dp.value);
+};
+const disposeVideo = () => {
+  if (dp.value) {
+    dp.value.dispose(); // dispose()会直接删除Dom元素
+    dp.value = null;
+    console.log("Video.js播放器已处理。");
+  }
+  // 清空 videoBox 内的内容
+  // const videoBox = document.getElementById("videoBox");
+  // if (videoBox) {
+  //   videoBox.innerHTML = "";
+  //   console.log("videoBox内容已清除。");
+  // }
 };
 // 使用生命钩子
 onMounted(() => {
@@ -159,11 +278,7 @@ onMounted(() => {
 });
 const closeDialog = () => {
   cameraShow.value = false;
-  if (dp.value) {
+  disposeVideo();
-    dp.value.dispose(); // dispose()会直接删除Dom元素
-    // dp.value.pause();
-    dp.value = null;
-  }
   emit("close");
 };
 </script>

src/view/dialog/dialogCameras.vue

@@ -54,7 +54,6 @@
             controls
             playsinline
             autoplay="autoplay"
-            style="width: 100%; height: auto;"
           >
             <source :src="attachmentLink" type="application/x-mpegURL" />
           </video>
@@ -111,13 +110,12 @@ watch(
         num.value = true;
       }
       // if (hlsUriSslNow.value != "" && props.hlsUriSsl != hlsUriSslNow.value)
+      data.title = props.sxtname; 
       cameraShow.value = newVal;
       hlsUriSslNow.value = props.hlsUriSsl;
-      data.title = props.sxtname;
-      console.log(hlsUriSslNow.value, props.sxtname, 5555);
-
       attachmentLink.value = hlsUriSslNow.value;
       dp.value = null;
+      // console.log(hlsUriSslNow.value, props.sxtname, 5555);
       //当摄像头第二次打开时，要先创建dom
       if (num.value) {
         console.log(22222, document.getElementById("videoBox"));
@@ -178,6 +176,8 @@ const closeDialog = () => {
 };
 </script>
 
+
+
 <style lang="scss" scoped>
 // 暂停播放按钮居中
 ::v-deep .video-js .vjs-big-play-button {

src/view/person/index.vue

@@ -902,7 +902,7 @@ watch(
   }
 );
 onMounted(() => {
-  // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
+  tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
   if (routers.query.type) {
     errorMessage.value = "";
     dataMyTag.identNo = routers.query.identNo;

src/view/sy_map.vue

@@ -3423,7 +3423,7 @@ const reset_font2 = () => {
     "scale(" + width / 1920 + "," + height / 1080 + ")";
 };
 onMounted(async () => {
-  // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
+  tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
   loadingss.value = true;
   reset_font();
   initMap();