feat: 实现监控视频rtsp协议播放

@@ -19,6 +19,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@amap/amap-jsapi-types": "^0.0.8",
+    "@fingerprintjs/fingerprintjs": "^3.4.1",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",

+import { defHttp } from "@/utils/external/http/axios";
+import { useGlobSetting } from '@/hooks/external/setting';
+enum Api {
+  OPEN_FLV = '/rtsp/openFlv',
+  CLOSE_FLV = '/rtsp/closeFlv'
+}
+
+export const getOpenFlvPlayUrl = (url: string, browserId: string) => {
+  const { urlPrefix, apiUrl } = useGlobSetting()
+  return `${apiUrl || ''}${urlPrefix || ''}${Api.OPEN_FLV}?url=${encodeURIComponent(url)}&browserId=${browserId}`;
+};
+
+export const closeFlvPlay = (url: string, browserId: string) => {
+  return defHttp.get({
+    url: Api.CLOSE_FLV,
+    params: {
+      url: encodeURIComponent(url),
+      browserId
+    }
+  });
+};

@@ -6,11 +6,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch } from 'vue'
+import { onMounted, ref, onUnmounted, watch, unref } from 'vue'
 import videojs from 'video.js'
 import 'videojs-flvjs-es6'
 import type { VideoJsPlayerOptions } from 'video.js'
 import 'video.js/dist/video-js.min.css'
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
+import { isShareMode } from '@/views/share/hook'
+import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
+import { useFingerprint } from '@/utils/external/useFingerprint'
+import { GetResult } from '@fingerprintjs/fingerprintjs'
 
 const props = defineProps({
   sourceSrc: {
@@ -48,11 +53,10 @@ const isRtspProtocol = (url: string) => {
 };
 
 const getVideoTypeByUrl = (url = '') => {
-
   try {
     const { protocol, pathname } = new URL(url)
 
-    if (isRtspProtocol(protocol)) return VideoPlayerType.flv
+    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
 
     const reg = /[^.]\w*$/
     const mathValue = pathname.match(reg) || []
@@ -72,6 +76,8 @@ const videoRef = ref<HTMLElement | null>(null)
 // video实例对象
 let videoPlayer: videojs.Player | null = null
 
+const fingerprintResult = ref<Nullable<GetResult>>(null)
+
 //options配置
 const options: VideoJsPlayerOptions & Recordable = {
   language: 'zh-CN', // 设置语言
@@ -92,16 +98,24 @@ const options: VideoJsPlayerOptions & Recordable = {
       isLive: true,
       cors: true,
       withCredentials: false,
-    }
+    },
   },
 }
 
 
+const { getResult } = useFingerprint()
 async function getSource() {
+  fingerprintResult.value = await getResult()
+  let src = props.sourceSrc || ''
+
+  if (isRtspProtocol(props.sourceSrc!)) {
+    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
+  }
+
   return [
     {
       type: getVideoTypeByUrl(props.sourceSrc),
-      src: props.sourceSrc || ''
+      src
     }
   ]
 }
@@ -112,6 +126,17 @@ const initVideo = async () => {
     // 创建 video 实例   
     options.sources = await getSource()
     if (options.sources && options.sources.length) {
+
+      if (isRtspProtocol(props.sourceSrc || '')) {
+        options.flvjs = {
+          ...(options.flvjs || {}),
+          config: {
+            headers: {
+              'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+            }
+          }
+        }
+      }
       videoPlayer = videojs(videoRef.value, options)
     }
   }
@@ -135,6 +160,9 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  if (props.sourceSrc) {
+    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
+  }
   handleVideoDispose()
 })
 
@@ -154,6 +182,7 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: center;
+
   .my-video {
     width: 100% !important;
     height: 100% !important;

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