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

Merge branch 'ww' into 'main_dev'

See merge request yunteng/thingskit-view!80

@@ -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",
@@ -32,6 +33,7 @@
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",
+    "flv.js": "^1.6.2",
     "gsap": "^3.11.3",
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",
@@ -45,6 +47,7 @@
     "screenfull": "^6.0.1",
     "three": "^0.145.0",
     "video.js": "^7.20.3",
+    "videojs-flvjs-es6": "^1.0.1",
     "vue": "^3.2.31",
     "vue-3d-loader": "^2.1.7",
     "vue-demi": "^0.13.1",

+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
+    }
+  });
+};

 <template>
   <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
-    <video 
-    crossOrigin="anonymous"
-     :id="`my-player${index}`" ref="videoRef" class="video-js my-video vjs-theme-city vjs-big-play-centered">
-      <source :src="sourceSrc" />
+    <video crossOrigin="anonymous" :id="`my-player${index}`" ref="videoRef"
+      class="video-js my-video vjs-theme-city vjs-big-play-centered">
     </video>
   </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: {
@@ -36,40 +40,117 @@ const props = defineProps({
   }
 })
 
+enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+  flv = 'video/x-flv',
+}
+
+const isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g;
+  return reg.test(url);
+};
+
+const getVideoTypeByUrl = (url = '') => {
+  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
+  }
+};
+
+
 // video标签
 const videoRef = ref<HTMLElement | null>(null)
 
 // video实例对象
 let videoPlayer: videojs.Player | null = null
 
+const fingerprintResult = ref<Nullable<GetResult>>(null)
+
 //options配置
-const options: VideoJsPlayerOptions = {
+const options: VideoJsPlayerOptions & Recordable = {
   language: 'zh-CN', // 设置语言
   controls: true, // 是否显示控制条
   preload: 'auto', // 预加载
   autoplay: true, // 是否自动播放
   fluid: false, // 自适应宽高
   poster: props?.avatar || '',
-  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
+  // src: getSource() || '', // 要嵌入的视频源的源 URL
+  sources: [],
   muted: true,
   userActions: {
     hotkeys: true
+  },
+  techOrder: ['html5', 'flvjs'],
+  flvjs: {
+    mediaDataSource: {
+      isLive: true,
+      cors: true,
+      withCredentials: false,
+      hasAudio: false,
+      autoCleanupSourceBuffer: true,
+      autoCleanupMaxBackwardDuration: 60,
+    },
+  },
+}
+
+
+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
+    }
+  ]
 }
 
 // 初始化videojs
-const initVideo = () => {
+const initVideo = async () => {
   if (videoRef.value) {
-    // 创建 video 实例
-    videoPlayer = videojs(videoRef.value, options)
+    // 创建 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)
+    }
   }
 }
 
 watch(
   () => props.sourceSrc,
-  (newData: any) => {
+  async (newData: any) => {
+    const result = await getSource()
     // props.sourceSrc = newData
-    videoPlayer?.src(newData) as any
+    videoPlayer?.src(result) as any
     videoPlayer?.play()
   },
   {
@@ -82,6 +163,9 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  if (props.sourceSrc) {
+    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
+  }
   handleVideoDispose()
 })
 
@@ -101,6 +185,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 };
+};