Merge branch 'fix/multiple-camera-loading-play' into 'main_dev'

fix: 修复多个摄像头播放问题

See merge request yunteng/thingskit-view!211

 <template>
 <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"
-    ></video>
-  </div>
+  <n-spin size="medium" :show="showLoading"
+    :style="{background: '#000',width: baseSize?.w + 'px', height: baseSize?.h + 'px' }">
+    <template #description> 视频正在努力加载中...... </template>
+    <div>
+      <div ref="playerContainerElRef" class="go-content-box"
+        :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px', background: '#000' }">
+
+      </div>
+    </div>
+  </n-spin>
 </template>
 </template>
 <script setup lang="ts" name="VideoPlay">
 <script setup lang="ts" name="VideoPlay">
-import { onMounted, ref, onUnmounted, watch, unref, nextTick } from 'vue'
+import { onMounted, ref, onUnmounted, watch, unref, PropType,  shallowRef } from 'vue'
 import videojs from 'video.js'
 import videojs from 'video.js'
 import 'videojs-flvjs-es6'
 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'
 import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
 import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
 import { isShareMode } from '@/views/share/hook'
 import { isShareMode } from '@/views/share/hook'
-import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
+import { getOpenFlvPlayUrl, closeFlvPlay, getVideoControlStart } from '@/api/external/flvPlay'
 import { useFingerprint } from '@/utils/external/useFingerprint'
 import { useFingerprint } from '@/utils/external/useFingerprint'
 import { GetResult } from '@fingerprintjs/fingerprintjs'
 import { GetResult } from '@fingerprintjs/fingerprintjs'
-import { VideoPlayerType } from '../config'
+import { AccessModeEnum, VideoPlayerType } from '../config'
+import { getVideoUrl } from '@/api/external/common'
 
 
 const props = defineProps({
 const props = defineProps({
   sourceSrc: {
   sourceSrc: {
     type: String
     type: String
   },
   },
+  option: {
+    type: Object
+  },
+
+  baseSize: {
+    type: Object as PropType<{ w: number; h: number }>
+  },
   autoPlay: {
   autoPlay: {
     type: Boolean
     type: Boolean
   },
   },
@@ -47,13 +57,27 @@ const props = defineProps({
   }
   }
 })
 })
 
 
+
+const { getResult } = useFingerprint()
+
+const showLoading = ref<boolean>(false)
+
+const sourceSrc = ref<string | null>(props.sourceSrc || '')
+
+
+// video实例对象
+const videoPlayer = shallowRef<videojs.Player | null>(null)
+const playerContainerElRef = shallowRef<HTMLElement | null>(null)
+
+const fingerprintResult = ref<Nullable<GetResult>>(null)
+
 const isRtspProtocol = (url: string) => {
 const isRtspProtocol = (url: string) => {
   const reg = /^rtsp:\/\//g
   const reg = /^rtsp:\/\//g
   return reg.test(url)
   return reg.test(url)
 }
 }
 
 
 const getVideoTypeByUrl = (url = '') => {
 const getVideoTypeByUrl = (url = '') => {
-  if(!url) return;
+  if (!url) return;
   try {
   try {
     const { protocol, pathname } = new URL(url)
     const { protocol, pathname } = new URL(url)
     if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
     if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
@@ -68,13 +92,6 @@ const getVideoTypeByUrl = (url = '') => {
   }
   }
 }
 }
 
 
-// video标签
-const videoRef = ref<HTMLElement | null>(null)
-
-// video实例对象
-let videoPlayer: videojs.Player | null = null
-
-const fingerprintResult = ref<Nullable<GetResult>>(null)
 
 
 //options配置
 //options配置
 const options: VideoJsPlayerOptions & Recordable = {
 const options: VideoJsPlayerOptions & Recordable = {
@@ -103,88 +120,130 @@ const options: VideoJsPlayerOptions & Recordable = {
   }
   }
 }
 }
 
 
-const { getResult } = useFingerprint()
 
 
 async function getSource() {
 async function getSource() {
   fingerprintResult.value = await getResult()
   fingerprintResult.value = await getResult()
-  let src = props.sourceSrc || ''
-  if (isRtspProtocol(props.sourceSrc!)) {
+  let src = unref(sourceSrc) || ''
+  if (isRtspProtocol(unref(sourceSrc)!)) {
     src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
     src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
   }
   }
   return [
   return [
     {
     {
-      type: getVideoTypeByUrl(props.sourceSrc),
+      type: getVideoTypeByUrl(src),
       src
       src
     }
     }
   ]
   ]
 }
 }
 
 
+//针对萤石云或者海康威视，根据视频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
+}
+
+
+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
 // 初始化videojs
-const initVideo = async () => {
-  await nextTick()
-  try {
-    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()}`
-              }
-            }
-          }
-        }
-        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 createVideoPlayer = async () => {
+  if (unref(videoPlayer)) dispose()
+
+  options.sources = await getSource()
+
+  if (isRtspProtocol(unref(sourceSrc) || '')) {
+    options.flvjs = {
+      ...(options.flvjs || {}),
+      config: {
+        headers: {
+          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
         }
         }
       }
       }
     }
     }
-  } catch (e) {
-    console.log(e)
   }
   }
+  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!)
+const getVideosUrl = async () => {
+  try {
+    showLoading.value = true
+    videoPlayer.value?.src('');
+    const { option } = props || {}
+    const { accessMode, id, channelId, deviceId, customUrl } = option || {}
+    if (accessMode === AccessModeEnum.Streaming) {
+      return await getVideoUrlById(id)
+    } else if (accessMode === AccessModeEnum.GBT28181) {
+      return await getVideoControlList(deviceId, channelId)
+    } else {
+      return await getCustomUrl(customUrl)
     }
     }
-    videoPlayer?.src('');
-    initVideo()
-    videoPlayer?.src({
-      type: getVideoTypeByUrl(props.sourceSrc),
-      src: props.sourceSrc!
-    })
-    videoPlayer?.load()
-    videoPlayer?.play()
-  },
-  {
-    immediate: true
+  } finally {
+    showLoading.value = false
   }
   }
-)
+}
+
+
+watch(() => props.option, async () => {
+  console.log(props, 'prop')
+  dispose()
+  sourceSrc.value = await getVideosUrl()
+  createVideoPlayer()
+})
+
+
+
+// 销毁
+function dispose() {
+  unref(videoPlayer)?.dispose()
+  videoPlayer.value = null
+}
 
 
 watch(
 watch(
   () => props.autoPlay,
   () => props.autoPlay,
@@ -192,13 +251,15 @@ watch(
     if (newData) {
     if (newData) {
       handleVideoPlay()
       handleVideoPlay()
     } else {
     } else {
-      videoPlayer?.pause()
+      videoPlayer.value?.pause()
     }
     }
   }
   }
 )
 )
 
 
-onMounted(() => {
-  initVideo()
+onMounted(async () => {
+  dispose()
+  sourceSrc.value = await getVideosUrl()
+  createVideoPlayer()
 })
 })
 
 
 onUnmounted(() => {
 onUnmounted(() => {
@@ -209,14 +270,15 @@ onUnmounted(() => {
 })
 })
 
 
 //播放
 //播放
-const handleVideoPlay = () => videoPlayer?.play()
+const handleVideoPlay = () => videoPlayer.value?.play()
 
 
 //暂停和销毁
 //暂停和销毁
-const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+const handleVideoDispose = () => videoPlayer.value?.dispose() && videoPlayer.value?.pause()
 
 
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+
 .go-content-box {
 .go-content-box {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
@@ -229,3 +291,8 @@ const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
   }
   }
 }
 }
 </style>
 </style>
+<style>
+.vjs-poster {
+  background-size: 100% !important;
+}
+</style>

@@ -64,7 +64,8 @@ export const option = {
       url: null,
       url: null,
       sourceType: sourceTypeEnum.CUSTOM,
       sourceType: sourceTypeEnum.CUSTOM,
       organization: '',
       organization: '',
-      autoPlay: true
+      autoPlay: true,
+      accessMode:'', channelId:'', deviceId:'', customUrl:''
     }
     }
   ],
   ],
 }
 }

@@ -176,13 +176,10 @@ const handleChecked = ({ target }: Recordable, _: object, index: number) => {
 
 
 const handleSelect = (_: string, e: videoList, index: number) => {
 const handleSelect = (_: string, e: videoList, index: number) => {
   const { accessMode, id, channelId, deviceId, customUrl } = e
   const { accessMode, id, channelId, deviceId, customUrl } = e
-  if (accessMode === AccessModeEnum.Streaming) {
-    getVideoUrlById(e, id, index)
-  } else if (accessMode === AccessModeEnum.GBT28181) {
-    getVideoControlList(deviceId, channelId, index)
-  } else {
-    getCustomUrl(customUrl, index)
-  }
+  props.optionData.dataset[index] = {
+    ...props.optionData.dataset[index],
+    accessMode, id, channelId, deviceId, customUrl,url:''
+  } as any
 }
 }
 
 
 onMounted(() => {
 onMounted(() => {

@@ -4,12 +4,12 @@
       <div v-for="(item, index) in option.dataset" :key="index" :class="item.className" :style="item.sty">
       <div v-for="(item, index) in option.dataset" :key="index" :class="item.className" :style="item.sty">
         <VideoPlay
         <VideoPlay
           :autoPlay="item.autoPlay"
           :autoPlay="item.autoPlay"
+          :option="item"
           :name="item.name"
           :name="item.name"
           :avatar="item.avatar"
           :avatar="item.avatar"
           :key="item + index"
           :key="item + index"
           :sourceSrc="item.url"
           :sourceSrc="item.url"
-          :w="w"
-          :h="h"
+          :baseSize="{w,h}"
           :index="index"
           :index="index"
         />
         />
         <span class="video-title">{{ item.name }}</span>
         <span class="video-title">{{ item.name }}</span>
@@ -188,7 +188,7 @@ const handleMouseleave = () => (isShowSvg.value = false)
       left: 10%;
       left: 10%;
       transform: translateX(-50%);
       transform: translateX(-50%);
       transition: 0.5s;
       transition: 0.5s;
-      box-shadow: 0 0 4px black;
+      // box-shadow: 0 0 4px black;
       .video-title {
       .video-title {
         width: v-bind('w+"px"');
         width: v-bind('w+"px"');
         font-size: 30px;
         font-size: 30px;