Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai

package.json

@@ -106,6 +106,7 @@
     "fabric": "^4.6.0",
     "fast-xml-parser": "^5.2.5",
     "file-saver": "^2.0.5",
+    "flv.js": "^1.6.2",
     "highlight.js": "^11.9.0",
     "js-base64": "3.7.7",
     "js-md5": "^0.8.3",

src/views/demo/workmanagement/inspection/src/VideoStreamComponent copy.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="video-stream-container">
+    <div class="original-video">
+      <div class="title">
+        <VideoCameraOutlined />
+        原始视频流
+        <RedoOutlined title="刷新" @click="reloadLive" />
+      </div>
+      <div class="player">
+        <video
+          id="player-container-original-live"
+          width="480"
+          height="340"
+          preload="auto"
+          playsinline
+          webkit-playsinline
+        >
+        </video>
+      </div>
+    </div>
+    <div class="testing-video">
+      <div class="title">
+        <VideoCameraOutlined />
+        检测后视频流
+        <RedoOutlined title="刷新" @click="reloadTestingLive" />
+      </div>
+      <div class="player">
+        <video
+          id="player-container-testing-live"
+          width="480"
+          height="340"
+          preload="auto"
+          playsinline
+          webkit-playsinline
+        >
+        </video>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import TCPlayer from 'tcplayer.js';
+  import 'tcplayer.js/dist/tcplayer.min.css'; //引入插件和样式文件
+  import { airPortStore } from '@/store/modules/airport';
+  import { onMounted, watch, onBeforeUnmount } from 'vue';
+  import { VideoCameraOutlined, RedoOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps({
+    statisData: {
+      type: Array,
+      default: () => [],
+    },
+  });
+
+  const airPortStoreVal = airPortStore();
+  const live_info = airPortStoreVal.getLiveInfo;
+  // 原始流
+  let player;
+  const liveCode = live_info.url + '7.flv';
+  const playVideo = () => {
+    player = TCPlayer('player-container-original-live', {
+      sources: [
+        {
+          src: liveCode, // 播放地址
+        },
+      ],
+      licenseUrl: liveCode, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+    });
+  };
+
+  // 检测后流
+  let playerTesting;
+  const testingCode = live_info.url + '11.flv';
+  const testingPlayVideo = () => {
+    player = TCPlayer('player-container-testing-live', {
+      sources: [
+        {
+          src: testingCode, // 播放地址
+        },
+      ],
+      licenseUrl: testingCode, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+    });
+  };
+
+  const reloadLive = () => {
+    player.src(liveCode);
+    player.play();
+  };
+  const reloadTestingLive = () => {
+    if (playerTesting) {
+      playerTesting.src(testingCode);
+      playerTesting.play();
+    }
+  };
+  onMounted(() => {
+    playVideo();
+    testingPlayVideo();
+    setTimeout(() => {
+      if (player) {
+        player.play();
+      }
+      if (playerTesting) {
+        playerTesting.play();
+      }
+    }, 1000);
+  });
+  watch(
+    () => props.statisData,
+    (val) => {
+      reloadLive();
+      reloadTestingLive();
+    },
+  );
+  // 销毁视频控件
+  onBeforeUnmount(() => {
+    if (player) {
+      player.dispose();
+      player = null;
+    }
+    if (playerTesting) {
+      playerTesting.dispose();
+      playerTesting = null;
+    }
+  });
+</script>
+<style lang="scss" scoped>
+  .video-stream-container {
+    width: 500px;
+    margin-left: 20px;
+    .original-video {
+      height: 40vh;
+      background: linear-gradient(180deg, rgba(13, 25, 45, 0.87) 0%, #182f4e 100%);
+      box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
+      border-radius: 6px;
+      backdrop-filter: blur(3.62969752520624px);
+    }
+    .testing-video {
+      margin-top: 10px;
+      height: 40vh;
+      background: linear-gradient(180deg, rgba(13, 25, 45, 0.87) 0%, #182f4e 100%);
+      box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
+      border-radius: 6px;
+      backdrop-filter: blur(3.62969752520624px);
+    }
+    .title {
+      color: #fff;
+      padding: 10px 0;
+      margin: 0 20px;
+      border-bottom: 1px solid #4e5778;
+    }
+    .player {
+      height: 80%;
+      video {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>

src/views/demo/workmanagement/inspection/src/VideoStreamComponent.vue

@@ -7,15 +7,9 @@
         <RedoOutlined title="刷新" @click="reloadLive" />
       </div>
       <div class="player">
-        <video
-          id="player-container-original-live"
-          width="480"
-          height="340"
-          preload="auto"
-          playsinline
-          webkit-playsinline
-        >
-        </video>
+        <div class="video-content">
+          <video id="player-container-original-live" class="video-player" controls></video>
+        </div>
       </div>
     </div>
     <div class="testing-video">
@@ -25,25 +19,18 @@
         <RedoOutlined title="刷新" @click="reloadTestingLive" />
       </div>
       <div class="player">
-        <video
-          id="player-container-testing-live"
-          width="480"
-          height="340"
-          preload="auto"
-          playsinline
-          webkit-playsinline
-        >
-        </video>
+        <div class="video-content">
+          <video id="player-container-testing-live" class="video-player" controls></video>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import TCPlayer from 'tcplayer.js';
-  import 'tcplayer.js/dist/tcplayer.min.css'; //引入插件和样式文件
   import { airPortStore } from '@/store/modules/airport';
   import { onMounted, watch, onBeforeUnmount } from 'vue';
   import { VideoCameraOutlined, RedoOutlined } from '@ant-design/icons-vue';
+  import flvjs from 'flv.js';
 
   const props = defineProps({
     statisData: {
@@ -58,38 +45,57 @@
   let player;
   const liveCode = live_info.url + '7.flv';
   const playVideo = () => {
-    player = TCPlayer('player-container-original-live', {
-      sources: [
-        {
-          src: liveCode, // 播放地址
-        },
-      ],
-      licenseUrl: liveCode, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+    var originalElement = document.getElementById('player-container-original-live');
+    var player = flvjs.createPlayer({
+      type: 'flv',
+      url: liveCode,
     });
+    player.attachMediaElement(originalElement);
+    player.load();
+    player.play();
   };
 
   // 检测后流
   let playerTesting;
   const testingCode = live_info.url + '11.flv';
   const testingPlayVideo = () => {
-    player = TCPlayer('player-container-testing-live', {
-      sources: [
-        {
-          src: testingCode, // 播放地址
-        },
-      ],
-      licenseUrl: testingCode, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+    var testingElement = document.getElementById('player-container-testing-live');
+    var playerTesting = flvjs.createPlayer({
+      type: 'flv',
+      url: testingCode,
     });
+    playerTesting.attachMediaElement(testingElement);
+    playerTesting.load();
+    playerTesting.play();
   };
 
   const reloadLive = () => {
-    player.src(liveCode);
-    player.play();
+    var originalElement = document.getElementById('player-container-original-live');
+    if (player) {
+      player.detachMediaElement(); // 断开当前元素
+      player.destroy(); // 销毁播放器实例
+      player = flvjs.createPlayer({
+        type: 'flv',
+        url: liveCode,
+      });
+      player.attachMediaElement(originalElement); // 重新绑定 video 元素
+      player.load(); // 加载视频
+      player.play(); // 播放视频
+    }
   };
   const reloadTestingLive = () => {
+    var testingElement = document.getElementById('player-container-testing-live');
+
     if (playerTesting) {
-      playerTesting.src(testingCode);
-      playerTesting.play();
+      playerTesting.detachMediaElement(); // 断开当前元素
+      player.destroy(); // 销毁播放器实例
+      playerTesting = flvjs.createPlayer({
+        type: 'flv',
+        url: testingCode,
+      });
+      playerTesting.attachMediaElement(testingElement); // 重新绑定 video 元素
+      playerTesting.load(); // 加载视频
+      playerTesting.play(); // 播放视频
     }
   };
   onMounted(() => {
@@ -155,4 +161,9 @@
       }
     }
   }
+  .video-player {
+    margin: 6px;
+    width: 100%;
+    height: 32vh;
+  }
 </style>