feat(src/packages): 修改信息下的单个摄像头，如果是rtsp,则调用接口进行播放

 <template>
 <template>
-  <div class="videoPlay">
+  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
     <video
     <video
-      style="object-fit: cover"
-      :poster="poster"
       crossOrigin="anonymous"
       crossOrigin="anonymous"
+      :id="`my-player`"
       ref="videoRef"
       ref="videoRef"
-      class="video-js vjs-default-skin vjs-big-play-centered"
-      controls
-    >
-      <source :src="path" />
-    </video>
+      class="video-js my-video vjs-theme-city vjs-big-play-centered"
+    ></video>
   </div>
   </div>
 </template>
 </template>
-<script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, watch, toRefs } from 'vue'
-import videojs, { VideoJsPlayer } from 'video.js'
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch, unref } from 'vue'
+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.css'
-import zh from 'video.js/dist/lang/zh-CN.json'
-
-const props = withDefaults(
-  defineProps<{
-    path: string
-    autoPlay?: boolean
-    h?: number
-    poster?: string
-  }>(),
-  { autoPlay: false }
-)
+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 videoRef = ref()
-
-let player: VideoJsPlayer
-
-const initPlay = async () => {
-  videojs.addLanguage('zh-CN', zh)
-  await nextTick()
-  const options: VideoJsPlayerOptions = {
-    muted: true,
-    controls: true,
-    autoplay: props.autoPlay,
-    src: props?.path,
-    poster: props?.poster,
-    language: 'zh-CN',
-    techOrder: ['html5'],
-    preload: 'none'
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  autoplay: {
+    type: Boolean
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  w: {
+    type: Number,
+    default: 300
+  },
+  h: {
+    type: Number,
+    default: 300
   }
   }
-  player = videojs(videoRef.value, options, () => {
-    videojs.log('Video is reading')
-    if (props.autoPlay) {
-      player.play()
+})
+
+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 & Recordable = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  // src: getSource() || '', // 要嵌入的视频源的源 URL
+  sources: [],
+  muted: true,
+  userActions: {
+    hotkeys: true
+  },
+  techOrder: ['html5', 'flvjs'],
+  flvjs: {
+    mediaDataSource: {
+      isLive: true,
+      cors: true,
+      withCredentials: false,
+      hasAudio: false
+    },
+    config: {
+      autoCleanupSourceBuffer: true
     }
     }
-    player.on('ended', () => {
-      videojs.log('Play end')
-    })
-    player.on('error', () => {
-      player.errorDisplay.close()
-      videojs.log('Play parse error')
-    })
-  })
+  }
 }
 }
 
 
-onMounted(() => {
-  initPlay()
-})
+const { getResult } = useFingerprint()
+async function getSource() {
+  fingerprintResult.value = await getResult()
+  let src = props.sourceSrc || ''
 
 
-//直接改变路径测试
-watch(
-  () => props.path,
-  () => {
-    if (props.path && props.autoPlay) {
-      try {
-        player?.pause()
-        player?.load()
-        player?.src(props.path)
-        player?.play()
-      } catch (e) {
-        console.log(e)
+  if (isRtspProtocol(props.sourceSrc!)) {
+    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
+  }
+
+  return [
+    {
+      type: getVideoTypeByUrl(props.sourceSrc),
+      src
+    }
+  ]
+}
+
+// 初始化videojs
+const initVideo = async () => {
+  if (videoRef.value) {
+    // 创建 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,
+  async (newData: any) => {
+    const result = await getSource()
+    // props.sourceSrc = newData
+    videoPlayer?.src(result) as any
+    videoPlayer?.play()
   },
   },
   {
   {
     immediate: true
     immediate: true
   }
   }
 )
 )
 
 
-onBeforeUnmount(() => {
-  player?.dispose()
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  if (props.sourceSrc) {
+    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
+  }
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
 })
 })
 </script>
 </script>
-<style>
-.vjs-poster {
-  background-size: cover !important;
-}
-</style>
+
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-.videoPlay {
-  flex: 1;
-  height: v-bind('`${h}px`');
-  .video-js {
-    height: 100%;
-    width: 100%;
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .my-video {
+    width: 100% !important;
+    height: 100% !important;
+    position: relative;
   }
   }
 }
 }
 </style>
 </style>

 <template>
 <template>
   <div>
   <div>
-    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" :poster="option.poster" />
+    <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="autoplay" :avatar="option.poster" />
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
@@ -16,7 +16,7 @@ const props = defineProps({
   }
   }
 })
 })
 
 
-const { h } = toRefs(props.chartConfig.attr)
+const { w, h } = toRefs(props.chartConfig.attr)
 
 
 const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)
 const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)