gx

src/view/dialog/dialogCamera.vue

@@ -53,17 +53,9 @@
             controls
             playsinline
             autoplay="autoplay"
-            width="1080px"
           >
             <source :src="attachmentLink" type="application/x-mpegURL" />
           </video>
-
-          <!-- <video width="1080" ref="video" controls>
-           <source
-              src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"
-              type="video/mp4"
-            /> 
-          </video> -->
         </div>
       </div>
     </el-dialog>
@@ -72,17 +64,7 @@
 <script setup>
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
-
+import { ref, reactive, onMounted, defineProps, watch, nextTick } from "vue";
-import {
-  ref,
-  reactive,
-  onMounted,
-  defineProps,
-  onBeforeMount,
-  onBeforeUnmount,
-  watch,
-  nextTick,
-} from "vue";
 import { CircleCloseFilled } from "@element-plus/icons-vue";
 const props = defineProps({
   cameraShow: {
@@ -91,24 +73,12 @@ const props = defineProps({
       return false;
     },
   },
-  // columns: {
+  hlsUriSsl: {
-  //   type: Array,
+    type: String,
-  //   default: () => {
+    default: () => {
-  //     return [];
+      return '';
-  //   },
+    },
-  // },
+  },
-  // tableData: {
-  //   type: Array,
-  //   default: () => {
-  //     return [];
-  //   },
-  // },
-  // title: {
-  //   type: String,
-  //   default: () => {
-  //     return "";
-  //   },
-  // },
 });
 const emit = defineEmits(["close"]);
 
@@ -120,38 +90,27 @@ const data = reactive({
   tableData: [],
 });
 
-// const videoElement = video.value;
-// const videoSrc = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
-
 const gridData = [];
 // 监听
 watch(
   () => props.cameraShow,
   (newVal, oldVal) => {
     cameraShow.value = newVal;
+    attachmentLink.value=props.hlsUriSsl;
+    nextTick(() => {
       loadVideo();
-    // data.columns = props.columns;
+    });
   }
 );
-// watch(
-//   () => props.tableData,
-//   (newVal, oldVal) => {
-//     data.tableData = props.tableData;
-//   }
-// );
-// const video = ref(null);
-// // 创建对 videoPlayer 的引用
-// const videoPlayer = ref(null);
-// let player = null;
 
 const dp = ref(null);
 const videoElement = ref(null);
 const attachmentLink = ref(
-  "https://test-streams.mux.dev/x36xhzz/url_6/193039199_mp4_h264_aac_hq_7.m3u8"
+  ""
 );
 const options = {
-  playbackRates: [0.7, 1.0, 1.5, 2.0],
+  playbackRates: [0.5, 1.0, 1.5, 2.0],
-  aspectRatio: "16:9",
+  aspectRatio: "10:5",
   notSupportedMessage: "此视频暂无法播放，请稍后再试",
   autoplay: false,
   muted: true,
@@ -160,41 +119,22 @@ const options = {
 };
 
 const loadVideo = () => {
-  if (videoElement.value) {
+  dp.value = videojs("videoPlayer", options);
-    dp.value = videojs(videoElement.value, options);
-  }
 };
 // 使用生命钩子
 onMounted(() => {
   cameraShow.value = props.cameraShow;
-
-  loadVideo();
-
-  // data.columns = props.columns;
-  // data.title = props.title;
-  // data.tableData = props.tableData;
 });
-// onBeforeUnmount(() => {
-//   // if (player) {
-//   //   player.dispose(); // 销毁播放器实例，释放资源
-//   // }
-//   if (dp.value) {
-//     dp.value.dispose();
-//   }
-// });
 const closeDialog = () => {
   cameraShow.value = false;
+  if (dp.value) {
+    dp.value.dispose(); // dispose()会直接删除Dom元素
+  }
   emit("close");
 };
 </script>
 
 <style lang="scss" scoped>
-.video-box {
-  width: 100%;
-  max-width: 500px;
-  max-height: 500px;
-}
-
 // 暂停播放按钮居中
 ::v-deep .video-js .vjs-big-play-button {
   top: 50%;
@@ -208,7 +148,7 @@ const closeDialog = () => {
 
 :deep(.el-dialog) {
   --el-dialog-bg-color: none;
-  --el-dialog-width: 76% !important;
+  --el-dialog-width: 50% !important;
 }
 
 .my-header {

src/view/person/index.vue

@@ -329,7 +329,12 @@
       @handle="handlePaginationDialog"
     >
     </Dialog>
-    <DialogCamera :cameraShow="cameraShow" @close="close1"> </DialogCamera>
+    <DialogCamera
+      :cameraShow="camera.show"
+      :hlsUriSsl="camera.hlsUriSsl"
+      @close="close1"
+    >
+    </DialogCamera>
   </div>
 </template>
 
@@ -503,7 +508,11 @@ const paginationDialog = reactive({
 });
 const baseInfo = ref({});
 const dialogShow = ref(false);
-const cameraShow = ref(false);
+const camera = reactive({
+  show: false,
+  deviceCode: "",
+  hlsUriSsl: "",
+});
 const tableType = reactive({
   url: "",
   //特殊标签
@@ -792,7 +801,7 @@ const close = () => {
   dialogShow.value = false;
 };
 const close1 = () => {
-  cameraShow.value = false;
+  camera.show = false;
 };
 //右侧表格分页
 const handlePagination = (currentPage) => {
@@ -841,7 +850,20 @@ const oneCardSolution = () => {
 };
 // 打开摄像头
 const openCamera = () => {
-  cameraShow.value = true;
+  getCameraUrl();
+  camera.show = true;
+};
+//获取摄像头地址
+const getCameraUrl = () => {
+  // camera.deviceCode = dataMyTag.camera.sbbm;
+  camera.deviceCode = "3KSCP274757F2JU";
+  http
+    .get(`/api/ggfwyth/ysyzt/getPlayAddress?deviceCode=${camera.deviceCode}`)
+    .then((res) => {
+      if (res.code == 200) {
+        camera.hlsUriSsl = res.data.hlsUriSsl;
+      }
+    });
 };
 const back = () => {
   if (jump.value == "detail") {
@@ -859,6 +881,7 @@ watch(
     onClickTag2("出生", "出生");
     jump.value = "map";
     getshs();
+    getCameraUrl();
   }
 );
 onMounted(() => {
@@ -871,6 +894,7 @@ onMounted(() => {
     }
     onClickTag2("出生", "出生");
     getshs();
+    getCameraUrl();
   } else {
     jump.value = "map";
   }