feat: 实现视频组件rtsp协议播放

ww
1 parent 0f31669d
Showing 8 changed files with 120 additions and 15 deletions
.vscode/settings.json
package.json
src/api/camera/cameraManager.ts
src/components/Video/src/VideoPlay.vue
src/components/Video/src/utils.ts
src/utils/useFingerprint.ts
src/views/camera/manage/DialogPreviewVideo.vue
src/views/camera/manage/SplitScreenMode.vue
--- a/.vscode/settings.json
View file @51190fd
+++ b/.vscode/settings.json
View file @51190fd
@@ -8,12 +8,15 @@
     "COAP",
     "edrx",
     "EFENTO", 
+    "fingerprintjs",
+    "flvjs",
     "flvjs",
     "inited",
     "liveui",
     "MQTT",
     "notif",
-    "PROTOBUF", 
+    "PROTOBUF",
+    "rtsp",
     "SCADA",
     "SNMP",
     "unref",
--- a/package.json
View file @51190fd
+++ b/package.json
View file @51190fd
@@ -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",
--- a/src/api/camera/cameraManager.ts
View file @51190fd
+++ b/src/api/camera/cameraManager.ts
View file @51190fd
@@ -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}`,
+  });
+};
--- a/src/components/Video/src/VideoPlay.vue
View file @51190fd
+++ b/src/components/Video/src/VideoPlay.vue
View file @51190fd
@@ -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,7 +24,7 @@
   const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
   const getOptions = computed(() => {
-    const { options } = props;
+    const { options, withToken } = props;
     const defaultOptions: VideoJsPlayerOptions & Recordable = {
       language: 'zh',
       muted: true,
@@ -34,8 +38,18 @@
           hasAudio: false,
           withCredentials: false,
         },
+        config: {
+          headers: {
+            ...(withToken
+              ? {
+                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+                }
+              : {}),
+          },
+        },
       },
     };
+
     return { ...defaultOptions, ...options };
   });
@@ -59,6 +73,7 @@
   onUnmounted(() => {
     unref(videoPlayInstance)?.dispose();
     videoPlayInstance.value = null;
+    emit('onUnmounted');
   });
 </script>
--- a/src/components/Video/src/utils.ts
View file @51190fd
+++ b/src/components/Video/src/utils.ts
View file @51190fd
@@ -5,9 +5,15 @@ export enum VideoPlayerType {
   flv = 'video/x-flv',
 }
+export const isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g;
+  return reg.test(url);
+};
+
 export const getVideoTypeByUrl = (url: string) => {
   try {
-    const { pathname } = new URL(url);
+    const { protocol, pathname } = new URL(url);
+    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv;
     const reg = /[^.]\w*$/;
     const mathValue = pathname.match(reg) || [];
--- a/src/utils/useFingerprint.ts 0 → 100644
View file @51190fd
+++ b/src/utils/useFingerprint.ts 0 → 100644
View file @51190fd
+import { load } from '@fingerprintjs/fingerprintjs';
+export const useFingerprint = () => {
+  const getResult = async () => {
+    const fp = await load();
+    const result = await fp.get();
+    return result;
+  };
+
+  return { getResult };
+};
--- a/src/views/camera/manage/DialogPreviewVideo.vue
View file @51190fd
+++ b/src/views/camera/manage/DialogPreviewVideo.vue
View file @51190fd
@@ -13,56 +13,87 @@
       <div
         class="flex items-center justify-center bg-dark-900 w-full h-full min-h-96 video-container"
       >
-        <BasicVideoPlay v-if="showVideo" :options="(options as any)" />
+        <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: 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>
--- a/src/views/camera/manage/SplitScreenMode.vue
View file @51190fd
+++ b/src/views/camera/manage/SplitScreenMode.vue
View file @51190fd
@@ -3,7 +3,7 @@
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.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,16 +90,24 @@
     }
   };
-  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,
+              src: record.playSourceUrl,
               type,
             },
           ],
@@ -106,6 +123,7 @@
           const oldRecord = unref(cameraList).at(index)!;
           unref(cameraList)[index] = {
             ...oldRecord,
+
             videoPlayerOptions: {
               ...basicVideoPlayOptions,
               sources: [
@@ -162,6 +180,12 @@
     });
   };
+  const handleCloseFlvPlayUrl = async (record: CameraRecordItem) => {
+    if (isRtspProtocol(record.videoUrl)) {
+      closeFlvPlay(record.videoUrl, unref(fingerprintResult)!.visitorId!);
+    }
+  };
+
   onMounted(() => {
     getCameraList();
   });
@@ -265,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)"