perf: 优化当摄像头组件逻辑

 <template>
-  <div class="go-content-box" :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px' }">
-    <video
-      crossOrigin="anonymous"
-      :id="`my-player`"
-      ref="videoRef"
-      class="video-js my-video vjs-theme-city vjs-big-play-centered"
-    ></video>
+  <div ref="playerContainerElRef" class="go-content-box"
+    :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px', background: '#000' }">
+
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch, unref, PropType, nextTick } from 'vue'
+import { ref, onUnmounted, watch, unref, PropType, shallowRef } from 'vue'
 import videojs from 'video.js'
 import 'videojs-flvjs-es6'
 import type { VideoJsPlayerOptions } from 'video.js'
@@ -45,7 +41,7 @@ const isRtspProtocol = (url: string) => {
 }
 
 const getVideoTypeByUrl = (url = '') => {
-  if(!url) return;
+  if (!url) return;
   try {
     const { protocol, pathname } = new URL(url)
     if (protocol.startsWith('rtsp:')) return VideoPlayerTypeEnum.flv
@@ -60,11 +56,9 @@ const getVideoTypeByUrl = (url = '') => {
   }
 }
 
-// video标签
-const videoRef = ref<HTMLElement | null>(null)
-
 // video实例对象
-let videoPlayer: videojs.Player | null = null
+const videoPlayer = shallowRef<videojs.Player | null>(null)
+const playerContainerElRef = shallowRef<HTMLElement | null>(null)
 
 const fingerprintResult = ref<Nullable<GetResult>>(null)
 
@@ -72,11 +66,11 @@ const fingerprintResult = ref<Nullable<GetResult>>(null)
 const options: VideoJsPlayerOptions & Recordable = {
   language: 'zh-CN', // 设置语言
   controls: true, // 是否显示控制条
-  autoplay: props.autoPlay ? true : false, // 是否自动播放
+  autoplay: !!props.autoPlay, // 是否自动播放
   fluid: false, // 自适应宽高
   poster: props?.avatar || '',
   sources: [],
-  muted: props.autoPlay ? true : false,
+  muted: !!props.autoPlay,
   userActions: {
     hotkeys: true
   },
@@ -110,68 +104,74 @@ async function getSource() {
   ]
 }
 
+function createVideoElement() {
+  if (!unref(playerContainerElRef)) return
+  unref(playerContainerElRef)!.innerHTML = ''
+  const video = document.createElement('video')
+  video.setAttribute('crossOrigin', 'anonymous')
+  video.style.setProperty('width', '100%')
+  video.style.setProperty('height', '100%')
+  video.classList.add('video-js', 'my-video', 'vjs-theme-city', 'vjs-big-play-centered')
+  unref(playerContainerElRef)?.appendChild(video)
+  return video
+}
+
 
 // 初始化videojs
-const initVideo = async () => {
-  await nextTick()
-  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()}`
-            }
-          }
+const createVideoPlayer = async () => {
+  if (unref(videoPlayer)) dispose()
+
+  options.sources = await getSource()
+
+  if (isRtspProtocol(props.sourceSrc || '')) {
+    options.flvjs = {
+      ...(options.flvjs || {}),
+      config: {
+        headers: {
+          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
         }
       }
-      if (options.sources.at(-1)?.src){
-        videoPlayer = videojs(videoRef.value, options) //fix 修复videojs解决直播延时的问题
-        videoPlayer?.on('timeupdate', function () {
-          // 计算表最新推流的时间和现在播放器播放推流的时间
-          let differTime =
-            (videoPlayer as any as videojs.Player)?.buffered()?.end(0) -
-            (videoPlayer as any as videojs.Player)?.currentTime() // 差值小于1.5s时根据1倍速进行播放
-          if (differTime < 1.5) {
-            videoPlayer?.playbackRate(1)
-          } // 差值大于1.5s小于10s根据1.2倍速进行播放
-          if (differTime < 10 && differTime > 1.5) {
-            videoPlayer?.playbackRate(1.2)
-          } // 差值大于10s时进行重新加载直播流
-          if (differTime > 10) {
-            initVideo()
-          }
-        }) //
-      }
     }
   }
+  const video = createVideoElement()
+  if (!video) return
+
+  videoPlayer.value = videojs(video!, options) //fix 修复videojs解决直播延时的问题
+
+  videoPlayer.value?.on('timeupdate', function () {
+    // 计算表最新推流的时间和现在播放器播放推流的时间
+    let differTime =
+      (unref(videoPlayer))!.buffered()?.end(0) -
+      (unref(videoPlayer))!.currentTime() // 差值小于1.5s时根据1倍速进行播放
+    if (differTime < 1.5) {
+      videoPlayer.value?.playbackRate(1)
+    } // 差值大于1.5s小于10s根据1.2倍速进行播放
+    if (differTime < 10 && differTime > 1.5) {
+      videoPlayer.value?.playbackRate(1.2)
+    } // 差值大于10s时进行重新加载直播流
+    if (differTime > 10) {
+      createVideoPlayer()
+    }
+  })
 }
 
-watch(
-  () => props.sourceSrc,
-  async () => {
-    (props as any ).sourceSrc = ''
-    if(!props.sourceSrc) return;
-    await nextTick();
-    if(unref(fingerprintResult)!.visitorId!) {
-       closeFlvPlay(props.sourceSrc!, unref(fingerprintResult)!.visitorId!)
-    }
-    videoPlayer?.src('');
-    initVideo()
-    videoPlayer?.src({
-      type: getVideoTypeByUrl(props.sourceSrc),
-      src: props.sourceSrc!
-    });
-    videoPlayer?.load();
-    videoPlayer?.play();
-  },
-  {
-    immediate: true
-  }
-)
+// watch(
+//   () => props.sourceSrc,
+//   async () => {
+//     (props as any ).sourceSrc = ''
+//     if(!props.sourceSrc) return;
+//     await nextTick();
+//     if(unref(fingerprintResult)!.visitorId!) {
+//        closeFlvPlay(props.sourceSrc!, unref(fingerprintResult)!.visitorId!)
+//     }
+//     videoPlayer.value?.src('');
+//     createVideoPlayer() 
+
+//     if (props.sourceSrc) {
+//       reloadSource({ src: props.sourceSrc, type: getVideoTypeByUrl(props.sourceSrc) })
+//     }
+//   }
+// )
 
 watch(
   () => props.autoPlay,
@@ -179,14 +179,14 @@ watch(
     if (newData) {
       handleVideoPlay()
     } else {
-      videoPlayer?.pause()
+      videoPlayer.value?.pause()
     }
   },
 )
 
-onMounted(() => {
-  initVideo()
-})
+// onMounted(() => {
+//   createVideoPlayer()
+// })
 
 onUnmounted(() => {
   if (props.sourceSrc) {
@@ -195,11 +195,35 @@ onUnmounted(() => {
   handleVideoDispose()
 })
 
+
+function anewInit() {
+  createVideoPlayer()
+}
+
+function reloadSource(sources: string | videojs.Tech.SourceObject | videojs.Tech.SourceObject[]) {
+  if (!unref(videoPlayer)) return
+  unref(videoPlayer)?.pause()
+  unref(videoPlayer)?.src(sources)
+  unref(videoPlayer)?.load()
+  unref(videoPlayer)?.play()
+}
+
+function dispose() {
+  unref(videoPlayer)?.dispose()
+  videoPlayer.value = null
+}
+
 //播放
-const handleVideoPlay = () => videoPlayer?.play()
+const handleVideoPlay = () => videoPlayer.value?.play()
 
 //暂停和销毁
-const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+const handleVideoDispose = () => videoPlayer.value?.dispose()
+
+defineExpose({
+  dispose,
+  reloadSource,
+  anewInit,
+})
 
 </script>
 

@@ -46,8 +46,17 @@ export enum AccessMode {
   GBT28181 = 2 //GBT28181
 }
 
+export interface Dataset {
+  accessMode: AccessMode
+  channelId?: string
+  customUrl?: string
+  deviceId?: string
+  id?: string
+  value?: string
+}
+
 export const option = {
-  dataset: '',
+  dataset: {} as Dataset,
   autoplay: true,
   poster: '',
   sourceType: sourceTypeEnum.CUSTOM,

@@ -91,7 +91,7 @@ const getOriginationList = async () => {
 }
 
 const handleUpdateTreeValue = (value: string) => {
-  props.optionData.dataset = ''
+  props.optionData.dataset = {}
   getVideoLists(value)
 }
 
@@ -147,13 +147,23 @@ const handleChecked = (value: string) => {
 const handleSelect = (_: string, e: videoListInterface) => {
   const { accessMode, id, customUrl, channelId, deviceId, value } = e
   props.optionData.videoId = value as any
-  if (accessMode === AccessMode.Streaming) {
-    getVideoUrlById(id)
-  } else if (accessMode === AccessMode.GBT28181) {
-    getVideoControlList(deviceId, channelId)
-  } else {
-    getCustomUrl(customUrl)
+
+  props.optionData.dataset = {
+    accessMode,
+    id,
+    customUrl,
+    channelId,
+    deviceId,
+    value
   }
+
+  // if (accessMode === AccessMode.Streaming) {
+  //   getVideoUrlById(id)
+  // } else if (accessMode === AccessMode.GBT28181) {
+  //   getVideoControlList(deviceId, channelId)
+  // } else {
+  //   getCustomUrl(customUrl)
+  // }
 }
 
 onMounted(() => {

@@ -3,12 +3,8 @@
     <n-spin size="medium" :show="showLoading" :content-style="{ background: 'red' }">
       <template #description> 视频正在努力加载中...... </template>
       <div>
-        <VideoPlay
-          :baseSize="{ w, h }"
-          :sourceSrc="option.dataset"
-          :autoPlay="option.autoplay"
-          :avatar="option.poster"
-        />
+        <VideoPlay ref="videoPlayerRef" :baseSize="{ w, h }" :sourceSrc="sourceUrl" :autoPlay="option.autoplay"
+          :avatar="option.poster" />
       </div>
     </n-spin>
   </div>
@@ -16,8 +12,10 @@
 <script setup lang="ts">
 import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { option as configOption } from './config'
+import { AccessMode, Dataset, option as configOption } from './config'
 import { VideoPlay } from './components'
+import { getVideoControlStart } from '@/api/external/flvPlay'
+import { getVideoUrl } from '@/api/external/common'
 
 const props = defineProps({
   chartConfig: {
@@ -26,7 +24,7 @@ const props = defineProps({
   }
 })
 
-const showLoading = ref(true)
+const showLoading = ref(false)
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
@@ -38,20 +36,57 @@ const option = shallowReactive({
   autoplay: configOption.autoplay
 })
 
-const loadTime = (time: number, status: boolean) => {
-  setTimeout(() => {
-    showLoading.value = status
-  }, time)
+const sourceUrl = ref('')
+const videoPlayerRef = ref<InstanceType<typeof VideoPlay> | null>()
+
+// 针对萤石云或者海康威视，根据视频id获取播放流地址
+const getVideoUrlById = async (id: string) => {
+  const res = await getVideoUrl(id)
+  if (!res) return
+  const { url } = res.data
+  return url
+}
+
+// 针对gbt28181，根据设备id和通道号获取播放流地址
+const getVideoControlList = async (deviceId: string, channelId: string) => {
+  const {
+    data: { flv }
+  } = await getVideoControlStart({
+    deviceId,
+    channelId
+  })
+  return flv
+}
+
+// 针对自定义地址，直接获取地址
+const getCustomUrl = (url: string) => {
+  return url
+}
+
+
+async function getPlaySource(params: Dataset) {
+  try {
+    showLoading.value = true
+
+    const { accessMode, id, deviceId, channelId, customUrl } = params
+    if (accessMode === AccessMode.Streaming && id) {
+      return await getVideoUrlById(id!)
+    } else if (accessMode === AccessMode.GBT28181 && deviceId && channelId) {
+      return await getVideoControlList(deviceId!, channelId!)
+    } else {
+      return getCustomUrl(customUrl!)
+    }
+  } finally {
+    showLoading.value = false
+  }
 }
 
 watch(
   () => dataset?.value,
-  (newData: string) => {
-    loadTime(800, true)
-    if (newData) {
-      loadTime(2000, false)
-    }
-    option.dataset = newData
+  async (newData) => {
+    videoPlayerRef.value?.dispose()
+    sourceUrl.value = await getPlaySource(newData)
+    videoPlayerRef.value?.anewInit()
   },
   {
     immediate: true
@@ -70,4 +105,5 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+</style>