feat: 视频配置实现支持flv视频播放

ww
1 parent 5d526eda
Showing 6 changed files with 56 additions and 31 deletions
.vscode/settings.json
package.json
src/components/Video/src/VideoPlay.vue
src/components/Video/src/utils.ts
src/views/camera/manage/DialogPreviewVideo.vue
src/views/camera/manage/SplitScreenMode.vue
--- a/.vscode/settings.json
View file @0f31669
+++ b/.vscode/settings.json
View file @0f31669
@@ -7,15 +7,18 @@
   "cSpell.words": [
     "COAP",
     "edrx",
-    "EFENTO",
+    "EFENTO", 
+    "flvjs",
     "inited",
+    "liveui",
     "MQTT",
     "notif",
-    "PROTOBUF",
+    "PROTOBUF", 
     "SCADA",
     "SNMP",
     "unref",
     "vben",
+    "videojs",
     "VITE",
     "windicss"
   ]
--- a/package.json
View file @0f31669
+++ b/package.json
View file @0f31669
@@ -49,6 +49,7 @@
     "cropperjs": "^1.5.12",
     "crypto-js": "^4.1.1",
     "echarts": "^5.1.2",
+    "flv.js": "^1.6.2",
     "hls.js": "^1.0.10",
     "intro.js": "^4.1.0",
     "jsoneditor": "^9.7.2",
@@ -65,6 +66,7 @@
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
     "video.js": "^7.20.3",
+    "videojs-flvjs-es6": "^1.0.1",
     "vue": "3.2.31",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
--- a/src/components/Video/src/VideoPlay.vue
View file @0f31669
+++ b/src/components/Video/src/VideoPlay.vue
View file @0f31669
@@ -4,7 +4,7 @@
   import 'video.js/dist/video-js.css';
   import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
-
+  import 'videojs-flvjs-es6';
   const { prefixCls } = useDesign('basic-video-play');
   const props = defineProps<{
@@ -21,11 +21,20 @@
   const getOptions = computed(() => {
     const { options } = props;
-    const defaultOptions: VideoJsPlayerOptions = {
+    const defaultOptions: VideoJsPlayerOptions & Recordable = {
       language: 'zh',
       muted: true,
       liveui: true,
       controls: true,
+      techOrder: ['html5', 'flvjs'],
+      flvjs: {
+        mediaDataSource: {
+          isLive: true,
+          cors: true,
+          hasAudio: false,
+          withCredentials: false,
+        },
+      },
     };
     return { ...defaultOptions, ...options };
   });
@@ -58,7 +67,9 @@
     <video
       ref="videoPlayEl"
       class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-full !h-full"
-    ></video>
+      muted
+    >
+    </video>
   </div>
 </template>
--- a/src/components/Video/src/utils.ts
View file @0f31669
+++ b/src/components/Video/src/utils.ts
View file @0f31669
-export enum VideoPlayerType {
-  m3u8 = 'application/x-mpegURL',
-  mp4 = 'video/mp4',
-  webm = 'video/webm',
-}
-
-export const getVideoTypeByUrl = (url: string) => {
-  const splitExtReg = /(?:.*)(?<=\.)/;
-  const type = url.replace(splitExtReg, '');
-  /**
-   * https://vcsplay.scjtonline.cn:8200/live/HD_1569b634-4789-11eb-ab67-3cd2e55e0b20.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
-   * 如果是这种格式的m3u8，则截取的是这一部分.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
-   */
-  if (type.startsWith('m3u8')) return VideoPlayerType.m3u8;
-  if (type.startsWith('mp4')) return VideoPlayerType.mp4;
-  if (type.startsWith('webm')) return VideoPlayerType.webm;
-  return;
-};
+export enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+  flv = 'video/x-flv',
+}
+
+export const getVideoTypeByUrl = (url: string) => {
+  try {
+    const { pathname } = new URL(url);
+
+    const reg = /[^.]\w*$/;
+    const mathValue = pathname.match(reg) || [];
+    const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm';
+    const type = VideoPlayerType[ext];
+    return type ? type : VideoPlayerType.webm;
+  } catch (error) {
+    console.error(error);
+    return VideoPlayerType.webm;
+  }
+};
--- a/src/views/camera/manage/DialogPreviewVideo.vue
View file @0f31669
+++ b/src/views/camera/manage/DialogPreviewVideo.vue
View file @0f31669
@@ -11,9 +11,9 @@
       @cancel="handleCancel"
     >
       <div
-        class="flex items-center justify-center bg-dark-900 w-full h-full min-h-52 video-container"
+        class="flex items-center justify-center bg-dark-900 w-full h-full min-h-96 video-container"
       >
-        <BasicVideoPlay v-if="showVideo" :options="options" />
+        <BasicVideoPlay v-if="showVideo" :options="(options as any)" />
       </div>
     </BasicModal>
   </div>
@@ -31,7 +31,7 @@
   const showVideo = ref(false);
   const options = reactive<VideoJsPlayerOptions>({
     width: '100%' as unknown as number,
-    height: '100%' as unknown as number,
+    height: 384 as unknown as number,
     autoplay: true,
   });
--- a/src/views/camera/manage/SplitScreenMode.vue
View file @0f31669
+++ b/src/views/camera/manage/SplitScreenMode.vue
View file @0f31669
 <script setup lang="ts">
   import { PageWrapper } from '/@/components/Page';
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
-  import { onMounted, reactive, ref, unref, watch } from 'vue';
+  import { onMounted, reactive, Ref, ref, unref, watch } from 'vue';
   import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
@@ -84,12 +84,14 @@
   const beforeVideoPlay = async (record: CameraRecordItem) => {
     if (record.accessMode === AccessMode.ManuallyEnter) {
       if (record.videoUrl) {
+        const type = getVideoTypeByUrl(record.videoUrl);
+
         (record as CameraRecordItem).videoPlayerOptions = {
           ...basicVideoPlayOptions,
           sources: [
             {
               src: record.videoUrl,
-              type: getVideoTypeByUrl(record.videoUrl),
+              type,
             },
           ],
         };
@@ -112,7 +114,7 @@
                   type: getVideoTypeByUrl(url),
                 },
               ],
-            },
+            } as any,
             isTransform: true,
           };
         }
@@ -134,7 +136,7 @@
     getCameraList();
   };
-  const { enter, isFullscreen } = useFullscreen(videoContainer);
+  const { enter, isFullscreen } = useFullscreen(videoContainer as Ref<HTMLDivElement>);
   const handleFullScreen = () => {
     enter();
@@ -244,7 +246,7 @@
             :loading="loading"
             :data-source="cameraList"
             class="bg-light-50 w-full h-full dark:bg-dark-900 split-mode-list"
-            :grid="gridLayout"
+            :grid="(gridLayout as any)"
             :style="{ '--height': `${100 / pagination.colNumber}%` }"
           >
             <template #renderItem="{ item }">
@@ -316,6 +318,10 @@
   .split-mode-list:deep(.ant-row) {
     width: 100%;
     height: 100%;
+
+    > div {
+      height: var(--height);
+    }
   }
   .split-mode-list:deep(.ant-list-item) {