feat: 监控视频组件实现flv协议播放

@@ -32,6 +32,7 @@
     "echarts-liquidfill": "^3.1.0",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",
     "echarts-wordcloud": "^2.0.0",
+    "flv.js": "^1.6.2",
     "gsap": "^3.11.3",
     "gsap": "^3.11.3",
     "highlight.js": "^11.5.0",
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",
     "html2canvas": "^1.4.1",
@@ -44,6 +45,7 @@
     "screenfull": "^6.0.1",
     "screenfull": "^6.0.1",
     "three": "^0.145.0",
     "three": "^0.145.0",
     "video.js": "^7.20.3",
     "video.js": "^7.20.3",
+    "videojs-flvjs-es6": "^1.0.1",
     "vue": "^3.2.31",
     "vue": "^3.2.31",
     "vue-demi": "^0.13.1",
     "vue-demi": "^0.13.1",
     "vue-i18n": "^9.2.2",
     "vue-i18n": "^9.2.2",

 <template>
 <template>
   <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
   <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>
     </video>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
 import { onMounted, ref, onUnmounted, watch } from 'vue'
 import { onMounted, ref, onUnmounted, watch } from 'vue'
 import videojs from 'video.js'
 import videojs from 'video.js'
+import 'videojs-flvjs-es6'
 import type { VideoJsPlayerOptions } from 'video.js'
 import type { VideoJsPlayerOptions } from 'video.js'
 import 'video.js/dist/video-js.min.css'
 import 'video.js/dist/video-js.min.css'
 
 
@@ -36,6 +35,37 @@ 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 (isRtspProtocol(protocol)) 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标签
 // video标签
 const videoRef = ref<HTMLElement | null>(null)
 const videoRef = ref<HTMLElement | null>(null)
 
 
@@ -43,33 +73,56 @@ const videoRef = ref<HTMLElement | null>(null)
 let videoPlayer: videojs.Player | null = null
 let videoPlayer: videojs.Player | null = null
 
 
 //options配置
 //options配置
-const options: VideoJsPlayerOptions = {
+const options: VideoJsPlayerOptions & Recordable = {
   language: 'zh-CN', // 设置语言
   language: 'zh-CN', // 设置语言
   controls: true, // 是否显示控制条
   controls: true, // 是否显示控制条
   preload: 'auto', // 预加载
   preload: 'auto', // 预加载
   autoplay: true, // 是否自动播放
   autoplay: true, // 是否自动播放
   fluid: false, // 自适应宽高
   fluid: false, // 自适应宽高
   poster: props?.avatar || '',
   poster: props?.avatar || '',
-  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
+  // src: getSource() || '', // 要嵌入的视频源的源 URL
+  sources: [],
   muted: true,
   muted: true,
   userActions: {
   userActions: {
     hotkeys: true
     hotkeys: true
-  }
+  },
+  techOrder: ['html5', 'flvjs'],
+  flvjs: {
+    mediaDataSource: {
+      isLive: true,
+      cors: true,
+      withCredentials: false,
+    }
+  },
+}
+
+
+async function getSource() {
+  return [
+    {
+      type: getVideoTypeByUrl(props.sourceSrc),
+      src: props.sourceSrc || ''
+    }
+  ]
 }
 }
 
 
 // 初始化videojs
 // 初始化videojs
-const initVideo = () => {
+const initVideo = async () => {
   if (videoRef.value) {
   if (videoRef.value) {
-    // 创建 video 实例
-    videoPlayer = videojs(videoRef.value, options)
+    // 创建 video 实例   
+    options.sources = await getSource()
+    if (options.sources && options.sources.length) {
+      videoPlayer = videojs(videoRef.value, options)
+    }
   }
   }
 }
 }
 
 
 watch(
 watch(
   () => props.sourceSrc,
   () => props.sourceSrc,
-  (newData: any) => {
+  async (newData: any) => {
+    const result = await getSource()
     // props.sourceSrc = newData
     // props.sourceSrc = newData
-    videoPlayer?.src(newData) as any
+    videoPlayer?.src(result) as any
     videoPlayer?.play()
     videoPlayer?.play()
   },
   },
   {
   {