ss

index.html

@@ -8,7 +8,7 @@
     <script type="text/javascript" src="/js/base64.min.js"></script>
     <script src="https://api.map.baidu.com/api?v=3.0&ak=c0crhdxQ5H7WcqbcazGr7mnHrLa4GmO0"></script>
 
-    <script src="/js/jessibuca-pro/jessibuca-pro.js"></script>
+    <!-- <script src="/js/jessibuca-pro/jessibuca-pro.js"></script> -->
     <!-- <script type="text/javascript" src="/js/EasyWasmPlayer.js"></script> -->
     <!-- <script type="text/javascript" src="/js/EasyPlayer/EasyPlayer-pro.js"></script> -->
     <meta charset="UTF-8" />

src/views/pms/video_center/sip/components/player/easy.vue

@@ -32,6 +32,10 @@ const props = defineProps({
   height: {
     type: String,
     default: '630px'
+  },
+  uid: {
+    type: String,
+    default: ''
   }
 })
 const playing = ref(false)
@@ -70,7 +74,7 @@ const playCreate = async () => {
   const container = easyPlayerRef.value
   if (!container) return
 
-  const uid = route.params._uid || Date.now() // 使用时间戳作为唯一标识
+  const uid = props.uid || route.params._uid || Date.now() // 使用时间戳作为唯一标识
 
   easyplayer[uid] = new EasyPlayerPro(container, {
     isLive: config.isLive,
@@ -124,7 +128,7 @@ const playCreate = async () => {
 // 播放视频
 async function play(url) {
   await loadEasyPlayer()
-  const uid = route.params._uid || Date.now()
+  const uid = props.uid || route.params._uid || Date.now() // 使用时间戳作为唯一标识
 
   // 确保容器已准备就绪
   if (!easyPlayerRef.value) {
@@ -158,7 +162,7 @@ async function play(url) {
 }
 
 const pause = () => {
-  const uid = route.params._uid || Date.now()
+  const uid = props.uid || route.params._uid || Date.now() // 使用时间戳作为唯一标识
 
   if (easyplayer[uid]) {
     easyplayer[uid].pause()
@@ -168,7 +172,7 @@ const pause = () => {
 
 // 截图
 const screenshot = () => {
-  const uid = route.params._uid || Date.now()
+  const uid = props.uid || route.params._uid || Date.now() // 使用时间戳作为唯一标识
 
   if (easyplayer[uid]) {
     easyplayer[uid].screenshot()
@@ -177,7 +181,7 @@ const screenshot = () => {
 }
 
 const destroy = async () => {
-  const uid = route.params._uid || Date.now()
+  const uid = props.uid || route.params._uid || Date.now() // 使用时间戳作为唯一标识
 
   if (easyplayer[uid]) {
     await easyplayer[uid].destroy().then(() => {
@@ -200,7 +204,7 @@ const onMute = () => {
   //   playInfo.value.setMute(true)
   // }
 
-  const uid = route.params._uid || Date.now()
+  const uid = props.uid || route.params._uid || Date.now() // 使用时间戳作为唯一标识
 
   if (easyplayer[uid]) {
     easyplayer[uid].setMute(true)
@@ -302,8 +306,8 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  if (easyplayer[route.params._uid]) {
-    easyplayer[route.params._uid].destroy()
+  if (easyplayer[props.uid || route.params._uid || Date.now()]) {
+    easyplayer[props.uid || route.params._uid || Date.now()].destroy()
   }
   playing.value = false
 })

src/views/pms/video_center/sip/components/player/easyplayer.vue

@@ -36,6 +36,22 @@ const config = reactive({
   WCS: false
 })
 
+// 动态加载 EasyPlayer
+function loadEasyPlayer() {
+  return new Promise((resolve, reject) => {
+    if (window.EasyPlayerPro) {
+      resolve(window.EasyPlayerPro)
+      return
+    }
+
+    const script = document.createElement('script')
+    script.src = '/js/EasyPlayer/EasyPlayer-pro.js'
+    script.onload = () => resolve(window.EasyPlayerPro)
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+}
+
 // 方法定义
 const play = async (url) => {
   console.log('EasyPlayer 播放视频 url: ', url)
@@ -172,7 +188,8 @@ const handlePtz = (arrow) => {
   }
 }
 
-const playCreate = () => {
+const playCreate = async () => {
+  await loadEasyPlayer()
   const container = easyPlayerRef.value
   if (!container) return
 

src/views/pms/video_center/sip/components/player/player.vue

@@ -7,13 +7,19 @@
       <div class="jb-pro-ptz-btns">
         <div class="jb-pro-ptz-btn">
           <div class="jb-pro-ptz-expand jb-pro-ptz-icon">
-            <div class="jb-pro-ptz-expand-icon-fangda icon" onclick="handlePtzScale('fangda')"></div>
+            <div
+              class="jb-pro-ptz-expand-icon-fangda icon"
+              onclick="handlePtzScale('fangda')"
+            ></div>
             <span class="icon-title-tips">
               <span class="icon-title">放大</span>
             </span>
           </div>
           <div class="jb-pro-ptz-narrow jb-pro-ptz-icon">
-            <div class="jb-pro-ptz-narrow-icon-suoxiao icon" onclick="handlePtzScale('suoxiao')"></div>
+            <div
+              class="jb-pro-ptz-narrow-icon-suoxiao icon"
+              onclick="handlePtzScale('suoxiao')"
+            ></div>
             <span class="icon-title-tips">
               <span class="icon-title">缩小</span>
             </span>
@@ -49,7 +55,10 @@
             </span>
           </div>
           <div class="jb-pro-ptz-focus-near jb-pro-ptz-icon">
-            <div class="jb-pro-ptz-focus-icon-jujiao- icon" onclick="handlePtzScale('jujiao-')"></div>
+            <div
+              class="jb-pro-ptz-focus-icon-jujiao- icon"
+              onclick="handlePtzScale('jujiao-')"
+            ></div>
             <span class="icon-title-tips">
               <span class="icon-title">聚焦-</span>
             </span>
@@ -132,7 +141,8 @@ onBeforeUnmount(() => {
 const currentInstanceId = ref(`player_${Date.now()}_${Math.floor(Math.random() * 10000)}`)
 
 // 初始化
-const init = () => {
+const init = async () => {
+  await loadJessibuca()
   var isSupportWebgpu = 'gpu' in navigator
   if (isSupportWebgpu) {
     console.log('支持webGPU')
@@ -152,6 +162,22 @@ const init = () => {
   })
 }
 
+// 动态加载 Jessibuca
+function loadJessibuca() {
+  return new Promise((resolve, reject) => {
+    if (window.Jessibuca) {
+      resolve(window.Jessibuca)
+      return
+    }
+
+    const script = document.createElement('script')
+    script.src = '/js/jessibuca-pro/jessibuca-pro.js'
+    script.onload = () => resolve(window.Jessibuca)
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+}
+
 // 初始化播放器
 const initplayer = () => {
   isPlaybackPause.value = false

src/views/pms/video_center/sip/splitview.vue

@@ -84,6 +84,7 @@
                 v-if="videoUrl[i - 1]"
                 :ref="(el) => setPlayerRef(el, i - 1)"
                 :videourl="videoUrl[i - 1]"
+                :uid="playerUids[i - 1]"
                 :playerInfo="
                   playerInfo.filter(
                     (item) =>
@@ -122,6 +123,9 @@ const route = useRoute()
 // refs
 const playerRefs = ref([])
 
+// 为每个播放器生成稳定的 UID
+const playerUids = ref([])
+
 // 数据状态
 const videoUrl = ref([''])
 const spilt = ref(1) //分屏
@@ -291,17 +295,39 @@ const destroyAllPlayersAsync = async () => {
   }
 }
 
+// watch(
+//   () => spilt.value,
+//   async (newSplit, oldSplit) => {
+//     playerUids.value = Array.from({ length: newSplit }, (_, i) => `player_${i}`)
+//     // 先销毁所有现有播放器，确保资源释放
+//     await destroyAllPlayersAsync()
+//     // 如果当前有选中的设备
+//     if (currentDevice.value && availableChannels.value.length > 0) {
+//       await nextTick()
+
+//       // 只加载新出现的播放器，不重新加载已有播放器
+//       await loadAdditionalChannelsForSplit(newSplit, oldSplit)
+//     }
+//   },
+//   { immediate: false }
+// )
+
 watch(
   () => spilt.value,
   async (newSplit, oldSplit) => {
-    // 先销毁所有现有播放器，确保资源释放
-    await destroyAllPlayersAsync()
-    // 如果当前有选中的设备
+    playerUids.value = Array.from({ length: newSplit }, (_, i) => `player_${i}`)
+
+    // 直接重新加载所有视频
     if (currentDevice.value && availableChannels.value.length > 0) {
+      await destroyAllPlayersAsync()
       await nextTick()
 
-      // 只加载新出现的播放器，不重新加载已有播放器
-      await loadAdditionalChannelsForSplit(newSplit, oldSplit)
+      // 重新分配所有通道
+      await assignChannelsToPlayers(availableChannels.value)
+    } else {
+      // 清空所有位置
+      videoUrl.value = Array(newSplit).fill('')
+      playerRefs.value = []
     }
   },
   { immediate: false }
@@ -373,6 +399,7 @@ const handleFullscreenChange = () => {
 // 生命周期钩子
 onMounted(() => {
   checkPlayByParam()
+  playerUids.value = Array.from({ length: spilt.value }, (_, i) => `player_${i}`)
   document.addEventListener('fullscreenchange', handleFullscreenChange)
   document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
   document.addEventListener('mozfullscreenchange', handleFullscreenChange)