摄像头

src/view/dialog/dialogCamera.vue

@@ -39,6 +39,7 @@
           </div>
         </div>
         <div
+          id="videoBox"
           style="
             width: 100%;
             height: calc(100% - 110px);
@@ -76,7 +77,7 @@ const props = defineProps({
   hlsUriSsl: {
     type: String,
     default: () => {
-      return '';
+      return "";
     },
   },
 });
@@ -89,25 +90,52 @@ const data = reactive({
   columns: [],
   tableData: [],
 });
-
+const num = ref(false);
+const hlsUriSslNow = ref("");
 const gridData = [];
 // 监听
 watch(
   () => props.cameraShow,
   (newVal, oldVal) => {
-    cameraShow.value = newVal;
-    attachmentLink.value=props.hlsUriSsl;
-    nextTick(() => {
-      loadVideo();
-    });
+    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(() => {
+        loadVideo();
+      });
+    }
   }
 );
-
+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 videoElement = ref(null);
-const attachmentLink = ref(
-  ""
-);
+const videohtml = ref("");
+const attachmentLink = ref("");
 const options = {
   playbackRates: [0.5, 1.0, 1.5, 2.0],
   aspectRatio: "10:5",
@@ -129,6 +157,8 @@ const closeDialog = () => {
   cameraShow.value = false;
   if (dp.value) {
     dp.value.dispose(); // dispose()会直接删除Dom元素
+    // dp.value.pause();
+    dp.value = null;
   }
   emit("close");
 };

src/view/person/index.vue

@@ -103,7 +103,7 @@
           <p>返回</p>
         </div>
         <!-- v-if="dataMyTag.camera" -->
-        <div class="videoCamera" v-if="true" @click="openCamera()">
+        <div class="videoCamera" v-if="dataMyTag.camera" @click="openCamera()">
           <img src="@/assets/images/sxt_detail.png" alt="" />
         </div>
       </div>
@@ -850,13 +850,12 @@ const oneCardSolution = () => {
 };
 // 打开摄像头
 const openCamera = () => {
-  getCameraUrl();
   camera.show = true;
 };
 //获取摄像头地址
 const getCameraUrl = () => {
-  // camera.deviceCode = dataMyTag.camera.sbbm;
-  camera.deviceCode = "3KSCP274757F2JU";
+  camera.deviceCode = dataMyTag.camera.sbbm;
+  // camera.deviceCode = "3KSCP274757F2JU";
   http
     .get(`/api/ggfwyth/ysyzt/getPlayAddress?deviceCode=${camera.deviceCode}`)
     .then((res) => {
@@ -881,7 +880,9 @@ watch(
     onClickTag2("出生", "出生");
     jump.value = "map";
     getshs();
-    getCameraUrl();
+    if (dataMyTag.camera) {
+      getCameraUrl();
+    }
   }
 );
 onMounted(() => {
@@ -894,7 +895,9 @@ onMounted(() => {
     }
     onClickTag2("出生", "出生");
     getshs();
-    getCameraUrl();
+    if (dataMyTag.camera) {
+      getCameraUrl();
+    }
   } else {
     jump.value = "map";
   }