Merge branch 'feat/video-component-support-rtsp-protocol' into 'main'

Feat/video component support rtsp protocol

See merge request yunteng/thingskit-front!651

@@ -7,15 +7,21 @@
   "cSpell.words": [
     "COAP",
     "edrx",
-    "EFENTO",
+    "EFENTO", 
+    "fingerprintjs",
+    "flvjs",
+    "flvjs",
     "inited",
+    "liveui",
     "MQTT",
     "notif",
     "PROTOBUF",
+    "rtsp",
     "SCADA",
     "SNMP",
     "unref",
     "vben",
+    "videojs",
     "VITE",
     "windicss"
   ]

@@ -35,6 +35,7 @@
     "gen:iconfont": "esno ./build/generate/iconfont/index.ts"
   },
   "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^3.4.1",
     "@iconify/iconify": "^2.0.3",
     "@logicflow/core": "^0.6.9",
     "@logicflow/extension": "^0.6.9",
@@ -49,6 +50,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 +67,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",

@@ -101,3 +101,13 @@ export const getStreamingPlayUrl = (entityId: string) => {
     url: `${CameraManagerApi.STREAMING_PLAY_GET_URL}/${entityId}`,
   });
 };
+
+export const getFlvPlayUrl = (url: string, browserId: string) => {
+  return `/api/yt/rtsp/openFlv?url=${encodeURIComponent(url)}&browserId=${browserId}`;
+};
+
+export const closeFlvPlay = (url: string, browserId: string) => {
+  return defHttp.get({
+    url: `/rtsp/closeFlv?url=${encodeURIComponent(url)}&browserId=${browserId}`,
+  });
+};

@@ -4,15 +4,19 @@
   import 'video.js/dist/video-js.css';
   import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
-
+  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+  import { isShareMode } from '/@/views/sys/share/hook';
+  import 'videojs-flvjs-es6';
   const { prefixCls } = useDesign('basic-video-play');
 
   const props = defineProps<{
     options?: VideoJsPlayerOptions;
+    withToken?: boolean;
   }>();
 
   const emit = defineEmits<{
     (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
+    (event: 'onUnmounted'): void;
   }>();
 
   const videoPlayEl = ref<HTMLVideoElement>();
@@ -20,13 +24,34 @@
   const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
 
   const getOptions = computed(() => {
-    const { options } = props;
-    const defaultOptions: VideoJsPlayerOptions = {
+    const { options, withToken } = props;
+    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,
+          autoCleanupSourceBuffer: true,
+          autoCleanupMaxBackwardDuration: 60,
+        },
+        config: {
+          headers: {
+            ...(withToken
+              ? {
+                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+                }
+              : {}),
+          },
+        },
+      },
     };
+
     return { ...defaultOptions, ...options };
   });
 
@@ -50,6 +75,7 @@
   onUnmounted(() => {
     unref(videoPlayInstance)?.dispose();
     videoPlayInstance.value = null;
+    emit('onUnmounted');
   });
 </script>
 
@@ -58,7 +84,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>
 

-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 isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g;
+  return reg.test(url);
+};
+
+export const getVideoTypeByUrl = (url: string) => {
+  try {
+    const { protocol, pathname } = new URL(url);
+    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv;
+
+    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;
+  }
+};

+import { load } from '@fingerprintjs/fingerprintjs';
+export const useFingerprint = () => {
+  const getResult = async () => {
+    const fp = await load();
+    const result = await fp.get();
+    return result;
+  };
+
+  return { getResult };
+};

@@ -11,58 +11,89 @@
       @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)"
+          :withToken="withToken"
+          @on-unmounted="handleCloseFlvPlayUrl"
+        />
       </div>
     </BasicModal>
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
   import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
   import { AccessMode } from './config.data';
-  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
   import { VideoJsPlayerOptions } from 'video.js';
+  import { useFingerprint } from '/@/utils/useFingerprint';
+  import { GetResult } from '@fingerprintjs/fingerprintjs';
 
   const heightNum = ref(800);
   const showVideo = ref(false);
+
+  const playUrl = ref('');
+
+  const withToken = ref(false);
+
+  const fingerprintResult = ref<Nullable<GetResult>>(null);
+
   const options = reactive<VideoJsPlayerOptions>({
     width: '100%' as unknown as number,
-    height: '100%' as unknown as number,
+    height: 384 as unknown as number,
     autoplay: true,
   });
 
-  const setSources = (url: string) => {
+  const setSources = (url: string, fingerprintResult: GetResult) => {
+    const flag = isRtspProtocol(url);
     options.sources = [
       {
-        src: url,
+        src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
         type: getVideoTypeByUrl(url),
       },
     ];
   };
 
+  const { getResult } = useFingerprint();
   const [register] = useModalInner(
     async (data: { record: CameraModel | StreamingManageRecord }) => {
       const { record } = data;
+      const result = await getResult();
+      fingerprintResult.value = result;
       if (record.accessMode === AccessMode.ManuallyEnter) {
         if ((record as CameraModel).videoUrl) {
-          setSources((record as CameraModel).videoUrl);
+          if (isRtspProtocol((record as CameraModel).videoUrl)) {
+            playUrl.value = (record as CameraModel).videoUrl;
+            closeFlvPlay(unref(playUrl), result.visitorId);
+            withToken.value = true;
+          }
+          setSources((record as CameraModel).videoUrl, result);
         }
       } else {
         try {
           const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-          setSources(url);
+          setSources(url, result);
         } catch (error) {}
       }
       showVideo.value = true;
     }
   );
 
+  const handleCloseFlvPlayUrl = () => {
+    if (isRtspProtocol(unref(playUrl))) {
+      closeFlvPlay(unref(playUrl)!, unref(fingerprintResult)!.visitorId!);
+    }
+  };
+
   const handleCancel = () => {
     showVideo.value = false;
+    withToken.value = false;
   };
 </script>
 

 <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 { cameraPage, closeFlvPlay, getFlvPlayUrl } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
@@ -16,11 +16,16 @@
   import { VideoJsPlayerOptions } from 'video.js';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import { Authority } from '/@/components/Authority';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
+  import { useFingerprint } from '/@/utils/useFingerprint';
+  import { GetResult } from '@fingerprintjs/fingerprintjs';
 
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
     isTransform?: boolean;
+    withToken?: boolean;
     videoPlayerOptions?: VideoJsPlayerOptions;
+    playSourceUrl?: string;
   };
 
   const basicVideoPlayOptions: VideoJsPlayerOptions = {
@@ -43,6 +48,8 @@
     total: 0,
   });
 
+  const fingerprintResult = ref<Nullable<GetResult>>(null);
+
   // 树形选择器
   const handleSelect = (orgId: string) => {
     organizationId.value = orgId;
@@ -60,12 +67,14 @@
       });
       pagination.total = total;
 
+      const result = await getResult();
+      fingerprintResult.value = result;
       for (const item of items) {
         (item as CameraRecordItem).isTransform = false;
         (item as CameraRecordItem).videoPlayerOptions = {
           ...basicVideoPlayOptions,
         };
-        beforeVideoPlay(item);
+        beforeVideoPlay(item, result);
       }
       if (items.length < pagination.pageSize) {
         const fillArr: any = Array.from({ length: pagination.pageSize - items.length }).map(() => ({
@@ -81,15 +90,25 @@
     }
   };
 
-  const beforeVideoPlay = async (record: CameraRecordItem) => {
+  const { getResult } = useFingerprint();
+  const beforeVideoPlay = async (record: CameraRecordItem, fingerprintResult: GetResult) => {
     if (record.accessMode === AccessMode.ManuallyEnter) {
       if (record.videoUrl) {
+        const isFlvPlay = isRtspProtocol(record.videoUrl);
+        const type = getVideoTypeByUrl(record.videoUrl);
+        record.playSourceUrl = record.videoUrl;
+        if (isFlvPlay) {
+          // handleFlvPlayerUnload(record, fingerprintResult!.visitorId);
+          record.playSourceUrl = getFlvPlayUrl(record.videoUrl, fingerprintResult.visitorId);
+          record.withToken = true;
+        }
+
         (record as CameraRecordItem).videoPlayerOptions = {
           ...basicVideoPlayOptions,
           sources: [
             {
-              src: record.videoUrl,
-              type: getVideoTypeByUrl(record.videoUrl),
+              src: record.playSourceUrl,
+              type,
             },
           ],
         };
@@ -104,6 +123,7 @@
           const oldRecord = unref(cameraList).at(index)!;
           unref(cameraList)[index] = {
             ...oldRecord,
+
             videoPlayerOptions: {
               ...basicVideoPlayOptions,
               sources: [
@@ -112,7 +132,7 @@
                   type: getVideoTypeByUrl(url),
                 },
               ],
-            },
+            } as any,
             isTransform: true,
           };
         }
@@ -134,7 +154,7 @@
     getCameraList();
   };
 
-  const { enter, isFullscreen } = useFullscreen(videoContainer);
+  const { enter, isFullscreen } = useFullscreen(videoContainer as Ref<HTMLDivElement>);
 
   const handleFullScreen = () => {
     enter();
@@ -160,6 +180,12 @@
     });
   };
 
+  const handleCloseFlvPlayUrl = async (record: CameraRecordItem) => {
+    if (isRtspProtocol(record.videoUrl)) {
+      closeFlvPlay(record.videoUrl, unref(fingerprintResult)!.visitorId!);
+    }
+  };
+
   onMounted(() => {
     getCameraList();
   });
@@ -244,7 +270,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 }">
@@ -263,7 +289,12 @@
                       v-show="!item.isTransform"
                       :spinning="!item.isTransform"
                     />
-                    <BasicVideoPlay v-if="item.isTransform" :options="item.videoPlayerOptions" />
+                    <BasicVideoPlay
+                      v-if="item.isTransform"
+                      :options="item.videoPlayerOptions"
+                      :with-token="item.withToken"
+                      @on-unmounted="handleCloseFlvPlayUrl(item)"
+                    />
                     <div
                       class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
@@ -316,6 +347,10 @@
   .split-mode-list:deep(.ant-row) {
     width: 100%;
     height: 100%;
+
+    > div {
+      height: var(--height);
+    }
   }
 
   .split-mode-list:deep(.ant-list-item) {