类型：开发

描述：

src/components/HlsPlayer/index.vue

@@ -2,6 +2,7 @@
   <div v-show="isActive" class="myVideo-container">
     <video
         class="myVideo"
+        id="video"
         ref="videoElement"
         muted
         playsinline
@@ -16,7 +17,7 @@
 
 <script>
 import Hls from 'hls.js'
-
+import mpegtsjs from 'mpegts.js'
 export default {
   name: 'HlsPlayer',
   props: {
@@ -162,6 +163,28 @@
       if (this.hls) {
         this.immediateCleanup()
       }
+      if(this.url.startsWith('ws')){
+        const videoElement = document.getElementById('video')
+        const player = mpegtsjs.createPlayer({
+          url: this.url,
+          type: 'flv',
+          isLive: true,
+          hasAudio: false
+        })
+        player.attachMediaElement(videoElement)
+        player.load()
+        player.play()
+
+        // 错误处理和重连机制
+        player.on('error', (err) => {
+          player.unload()
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 3000)
+        })
+      }else{
         this.hls = new Hls({
           // 内存优化配置
           maxBufferSize: 0, // 降低缓冲区大小（15MB）
@@ -211,6 +234,8 @@
         this.hls.on(Hls.Events.BUFFER_EOS, () => {
           this.cleanupNetworkResources()
         })
+      }
+
     },
     initVideo() {
       this.beforeDestroy()

src/components/VideoDialog/index.vue

@@ -49,8 +49,8 @@
 
           </div>
           <div class="action-item">
-		    <div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDiy==0">收藏</div>
+            <div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
-			<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDiy==1">取消收藏</div>
+            <div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
           </div>
 
         </div>
@@ -66,13 +66,20 @@
 import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
 import { getColletDiyApi } from '@/api/home'
 import pubSub from 'pubsub-js'
-  const Z00M_IN = 'ZOOM_IN' // 焦距变大
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
-  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-  const UP = 'UP' // 上转
+// const UP = 'UP' // 上转
-  const DOWN = 'DOWN' // 下转
+// const DOWN = 'DOWN' // 下转
-  const LEFT = 'LEFT' // 左转
+// const LEFT = 'LEFT' // 左转
-  const RIGHT = 'RIGHT' // 右转
+// const RIGHT = 'RIGHT' // 右转
-  const STOP = 'STOP' // 停止操作
+// const STOP = 'STOP' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
 let ACTION = '0'
 let command = ref('')
 
@@ -103,8 +110,8 @@
 watch(
     () =>modelValue.value,
     (val) => {
-		// colletCond.value = props.isCollect
+      colletCond.value = props.isCollect
-		// isDayCurr.value = props.isDiy
+      isDayCurr.value = props.isDiy
       console.log(props.isDiy,'val[0].value')
 
     },
@@ -114,7 +121,7 @@
 )
 const emit = defineEmits(['isDiyChange']);
 // 收藏
-  const handleCollectAdd = async (id, status, index) => {
+const handleCollectAdd = async () => {
   await getColletDiyApi({
     cameraIndexCode:props.cameraIndexCode,
     isDiy: props.isDiy == 0 ? 1 : 0
@@ -149,6 +156,7 @@
 const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -223,7 +231,7 @@
   text-align: center;
   // line-height: vh(24);
   font-weight: 400;
-	  font-size: font-vw(18);
+  font-size: vw(16);
   color: #ffffff;
   // background-image: url('@/assets/images/unfollow.png');
   background-size: 100% 100%;
@@ -255,7 +263,7 @@
       > span {
         margin: 0 vw(16);
         font-weight: 400;
-          font-size: font-vw(16);
+        font-size: vw(16);
         color: #ffffff;
       }
       .pause {
@@ -271,7 +279,7 @@
     height: vw(980);
     color: #fff;
     font-weight: bold;
-      font-size: font-vw(30);
+    font-size: vw(30);
     transform: translate(-50%, -50%);
     z-index: 999;
   }

src/layout/components/CoreVideo/allList.vue

@@ -12,7 +12,7 @@
           @click="handleItem(item)"
         >
           <div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
-          <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
+          <video class="item-video" :id="'videoall' + index" muted autoplay :controls="false">
             <source type="application/x-mpegURL" />
           </video>
           <p>
@@ -36,13 +36,14 @@
 </template>
 
 <script setup>
-  import { getVideoListApi,getColletListApi } from '@/api/home'
+  import { getPreviewUrlApi,getColletListApi } from '@/api/home'
   import { postVideoCollectApi } from '@/api/monitor'
 
   import primary from '@/assets/images/item-primary.png'
 
   import Hls from 'hls.js'
   import pubSub from 'pubsub-js'
+  import mpegtsjs from "mpegts.js";
 
   let modelValue = defineModel()
   let isCollect = ref(0)
@@ -110,27 +111,78 @@
     list.value = []
     getVideoList()
   }
+  const createPlayer = (cameraIndexCode,videoElement) => {
+    getPreviewUrlApi({
+      type: 'hls',
+      cameraIndexCode: cameraIndexCode
+    }).then(res=>{
+      const url = res.data.url;
+      if(url.startsWith('ws')){
+        const player = mpegtsjs.createPlayer({
+          url: url,
+          type: 'flv',
+          isLive: true,
+          hasAudio: false
+        })
+        player.attachMediaElement(videoElement)
+        player.load()
+        player.play()
+        // 错误处理和重连机制
+        player.on(mpegtsjs.Events.ERROR, (err) => {
+          player.unload();
+          player.destroy();
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            console.error('重新加载【'+cameraIndexCode+'】' )
+            createPlayer(cameraIndexCode,videoElement);
+          }, 3000)
+        })
+
+        hlsRefs.push(player)
+      }
+      else{
+        const player = new Hls({
+          maxBufferLength: 10, // 最大缓冲长度（秒）
+          maxMaxBufferLength: 15, // 缓冲区长度的上限
+          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
+        player.loadSource(url)
+        player.attachMedia(videoElement)
+        player.on(Hls.Events.MANIFEST_PARSED, () => {
+          videoElement.play()
+        })
+        player.on(Hls.Events.ERROR, (event, data) => {
+          // 根据错误类型进行处理
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.ErrorTypes.NETWORK_ERROR:
+                console.log('网络错误，尝试重新加载');
+                player.startLoad();
+                break;
+              case Hls.ErrorTypes.MEDIA_ERROR:
+                console.log('媒体错误，尝试修复');
+                player.recoverMediaError();
+                break;
+              default:
+                console.log('无法恢复的错误，销毁播放器');
+                // hls.destroy();
+                break;
+            }
+          }
+        })
+        hlsRefs.push(player)
+      }
+    })
+  }
   const getVideoList = async () => {
     let res = await getColletListApi(params)
     list.value = res.data
     total.value = res.total
     nextTick(() => {
       list.value.forEach(async (item, index) => {
-        var video = document.getElementById(`video${index}`)
+        var video = document.getElementById(`videoall${index}`)
-        const hls = new Hls({
+        createPlayer(item.cameraIndexCode,video);
-          enableWorker: false, // 禁用 Worker 来避免额外的线程
-          enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
-          cache: true, // 启用缓存
-          maxBufferLength: 10, // 最大缓冲长度（秒）
-          maxMaxBufferLength: 15, // 缓冲区长度的上限
-          maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
-        })
-        hls.loadSource(item.hlsUrl)
-        hls.attachMedia(video)
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          video.play()
-        })
-        hlsRefs.push(hls)
       })
     })
   }

src/layout/components/CoreVideo/index.vue

@@ -82,12 +82,12 @@ let isCollect = ref(0)
   }
 
   const postVideoRemain = () => {
-    timer = setInterval(() => {
+    // timer = setInterval(() => {
-		if(!list.value.length) return false;
+		// if(!list.value.length) return false;
-      postVideoRemainApi({
+    //   postVideoRemainApi({
-        cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
+    //     cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
-      })
+    //   })
-    }, 1500)
+    // }, 1500)
   }
 
   const getPreviewUrl = async (code) => {

src/layout/components/Header/index.vue

@@ -471,6 +471,7 @@
     }
 	.btn-all{
 		position: absolute;
+    cursor: pointer;
 		left: vw(140);
 		top: vh(30);
 		min-width: vw(180);

src/views/collect/components/video-box.vue

@@ -42,7 +42,7 @@
 									:controls="false"
 								/>
 								<p class="video-item__title--primary">
-									{{ element.cameraName || element.scenicAreaId }}
+									{{ element.cameraName || element.cameraIndexCode }}
 								</p>
 							</div>
 						</div>
@@ -93,13 +93,21 @@
 import Hls from 'hls.js'
 import emptyIco from '@/assets/images/n-icon.png'
 import { debounce } from 'lodash'
-	const Z00M_IN = 'ZOOM_IN' // 焦距变大
+import mpegtsjs from "mpegts.js";
-	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
-	const UP = 'UP' // 上转
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-	const DOWN = 'DOWN' // 下转
+// const UP = 'UP' // 上转
-	const LEFT = 'LEFT' // 左转
+// const DOWN = 'DOWN' // 下转
-	const RIGHT = 'RIGHT' // 右转
+// const LEFT = 'LEFT' // 左转
-	const STOP = 'STOP' // 停止操作
+// const RIGHT = 'RIGHT' // 右转
+// const STOP = 'STOP' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
 let cond = ref(false)
 let ACTION = '0'
 let hlsRefs = []
@@ -169,7 +177,6 @@
   params.businessVideoDisplayPosition = ''
   let res = await getVideCollectCate(params)
   videoList.value = res.data
-	  console.log(res,videoList.value.length,'ressssssssssssss')
   if(videoList.value.length<=3){
     grad.value = 3
   }else if(videoList.value.length<=6){
@@ -205,6 +212,7 @@
 const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -279,6 +287,70 @@
     if (type == 100) initVideo()
   }, 1000)
 }
+const createPlayer = (cameraIndexCode,videoElement) => {
+  getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode: cameraIndexCode
+  }).then(res=>{
+    const url = res.data.url;
+    if(url.startsWith('ws')){
+      const player = mpegtsjs.createPlayer({
+        url: url,
+        type: 'flv',
+        isLive: true,
+        hasAudio: false
+      })
+      player.attachMediaElement(videoElement)
+      player.load()
+      player.play()
+      // 错误处理和重连机制
+      player.on(mpegtsjs.Events.ERROR, (err) => {
+        player.unload();
+        player.destroy();
+        console.error('播放器错误:', err)
+        // 3 秒后尝试重新加载
+        setTimeout(() => {
+          console.error('重新加载【'+cameraIndexCode+'】' )
+          createPlayer(cameraIndexCode,videoElement);
+        }, 3000)
+      })
+
+      hlsRefs.push(player)
+    }
+    else{
+      const player = new Hls({
+        maxBufferLength: 10, // 最大缓冲长度（秒）
+        maxMaxBufferLength: 15, // 缓冲区长度的上限
+        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+      })
+      player.loadSource(url)
+      player.attachMedia(videoElement)
+      player.on(Hls.Events.MANIFEST_PARSED, () => {
+        videoElement.play()
+      })
+      player.on(Hls.Events.ERROR, (event, data) => {
+        // 根据错误类型进行处理
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              console.log('网络错误，尝试重新加载');
+              player.startLoad();
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              console.log('媒体错误，尝试修复');
+              player.recoverMediaError();
+              break;
+            default:
+              console.log('无法恢复的错误，销毁播放器');
+              // hls.destroy();
+              break;
+          }
+        }
+      })
+      hlsRefs.push(player)
+    }
+  })
+}
 const initVideo = () => {
   clearHlsRefs()
   nextTick(() => {
@@ -286,20 +358,8 @@
 
       it.videos.forEach((item,index)=>{
         setTimeout(() => {
-					const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
+          const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
-					if(item.hlsUrl){
+          createPlayer(item.cameraIndexCode,video);
-						const hls = new Hls({
-						  maxBufferLength: 10, // 最大缓冲长度（秒）
-						  maxMaxBufferLength: 15, // 缓冲区长度的上限
-						  maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-						})
-						hls.loadSource(item.hlsUrl)
-						hls.attachMedia(video)
-						hls.on(Hls.Events.MANIFEST_PARSED, () => {
-						  video.play()
-						})
-						hlsRefs.push(hls) 
-					} 
         }, 1000)
 
       })
@@ -318,25 +378,24 @@
 )
 // 更新视频
 const postVideoRemain = async () => {
-	  timer = setInterval(() => {
+  // timer = setInterval(() => {
-		clearInterval(timer)
+  // clearInterval(timer)
-		  videoList.value.forEach((items,index)=>{
+  //   videoList.value.forEach((items,index)=>{
-			  setTimeout(()=>{
+  // 	  setTimeout(()=>{
-				  postVideoRemainApi({
+  // 		  postVideoRemainApi({
-				    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
+  // 		    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
-				  })
+  // 		  })
-			  },1500)
+  // 	  },1500)
-			
+  //
-		  })
+  //   })
-	   
+  //
-	  }, 1500)
+  // }, 1500)
 }
 const getVideoRegions = async () => {
   let res = await getVideoRegionsApi({
     cameraName: cameraName.value,
     businessScenicArea: params.businessScenicArea
   })
-	  console.log(res,11111111111111)
   regionList.value = res.data
   regionList.value.forEach((item,index)=>{
     // item.show = true

src/views/hotel/components/video-box.vue

@@ -78,7 +78,7 @@
 	          </div>
 	          <video
 	            class="video-item__video"
-	            :id="'monitorVideo' + index"
+	            :id="'hotelmonitorVideo' + index"
 	            preload="auto"
 	            muted
 	            autoplay
@@ -154,7 +154,7 @@
 	            </p>
 	            <video
 	              class="item-img"
-	              :id="'monitorVideo' + index"
+	              :id="'hotelmonitorVideo' + index"
 	              muted
 	              autoplay
 	              :controls="false"
@@ -184,7 +184,7 @@
 </template>
 
 <script setup>
-	import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
+import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
 import {
   getVideoTypeApi,
   getVideoRegionsApi,
@@ -192,17 +192,26 @@
   postVideoControlApi,
   postVideoCollectApi
 } from '@/api/monitor'
+import draggable from 'vuedraggable';
 import pubSub from 'pubsub-js'
 import Hls from 'hls.js'
 import emptyIco from '@/assets/images/n-icon.png'
 import { debounce } from 'lodash'
-	const Z00M_IN = 'ZOOM_IN' // 焦距变大
+import mpegtsjs from "mpegts.js";
-	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
-	const UP = 'UP' // 上转
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-	const DOWN = 'DOWN' // 下转
+// const UP = 'UP' // 上转
-	const LEFT = 'LEFT' // 左转
+// const DOWN = 'DOWN' // 下转
-	const RIGHT = 'RIGHT' // 右转
+// const LEFT = 'LEFT' // 左转
-	const STOP = 'STOP' // 停止操作
+// const RIGHT = 'RIGHT' // 右转
+// const STOP = 'STOP' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
 let cond = ref(false)
 let ACTION = '0'
 let hlsRefs = []
@@ -224,6 +233,7 @@
   pageNum: 1,
   pageSize: 6,
 })
+let grad = ref(3)
 let show = ref(false)
 const onMonitorChange = () => {
   monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
@@ -235,26 +245,78 @@
     getRegionsList()
   })
 }
-	// 关注
+//弹窗收藏监听
-	const handleCollect = async (id, status, index) => {
+const isDiyChange = (val)=>{
-	  await postVideoCollectApi({
+  console.log(val,11222)
+  isDiy.value = val
+  if(!val){
+    show.value = false
+    videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
+  }
+  // videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
+
+  // 	if(it.cameraIndexCode == cameraIndexCode.value){
+  // 		it.isDiy = val
+  // 	}
+  // })
+}
+const onStart = (res)=>{
+
+}
+const onEnd = (evt)=>{
+  const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
+  getVideCollectCateSort({
+    key:videoList.value[itemIndex].key,
+    cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
+  }).then((ress)=>{
+
+    // getVideCollectCateList()
+  })
+  // postVideoRemain()
+  initVideo()
+}
+// 获取关注列表
+const  getVideCollectCateList = async () => {
+  clearHlsRefs()
+  params.businessVideoDisplayPosition = ''
+  let res = await getVideCollectCate(params)
+  videoList.value = res.data
+  if(videoList.value.length<=3){
+    grad.value = 3
+  }else if(videoList.value.length<=6){
+    grad.value = 2
+  }else{
+    grad.value = 1
+  }
+  postVideoRemain()
+  // total.value = res.total
+
+  initVideo()
+}
+// 收藏
+const handleCollect = async (id, status, index,element) => {
+  await getColletDiyApi({
     cameraIndexCode:id,
-	    isCollect: status == 0 ? 1 : 0
+    isDiy: status == 0 ? 1 : 0
   })
   if (status == 0) {
-		  thisVideo.value.isCollect=1
+
-	    videoList.value[index].isCollect = 1
+    element.isDiy = 1
 
   } else {
-		  thisVideo.value.isCollect=0
+
-	    videoList.value[index].isCollect = 0
+    videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
+    console.log('取消收藏',)
+    element.isDiy = 0
+    show.value = false
   }
-	  pubSub.publish('videoCollect', id)
+  // pubSub.publish('videoCollect', id)
 }
 // 采集
 const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -281,7 +343,9 @@
 let isCollect = ref(0)
 let isDiy = ref(0)
 let videoSrc = ref('')
-	const handleCamera = async (itemCode,resource) => {
+let diyIndex = ref(null)
+const handleCamera = async (itemCode,resource,index) => {
+  diyIndex.value = index
   show.value = true
   let res = await getPreviewUrlApi({
     type: 'hls',
@@ -307,66 +371,7 @@
   videoList.value = []
   getRegionsList()
 }
-	//获取酒店视频列表
-	const getRegionsList = async()=>{
-		clearHlsRefs()
-		videoLog.value = 1
-		try {
-		    if (loading.value) return
-			let res = await getRegionsListApi({...params})
-		    if (res.data.length > 0) {
-			   videoList.value = res.data
-			   cond.value = true
-			   total.value = res.total
-			   nextTick(() => {
-				   if(!videoList.value.length) return false
-			     videoList.value.forEach(async (x, index) => {
-			       const video = document.getElementById(`monitorVideo${index}`)
-			       const hls = new Hls({
-			         maxBufferLength: 10, // 最大缓冲长度（秒）
-			         maxMaxBufferLength: 15, // 缓冲区长度的上限
-			         maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-			       })
-			       hls.loadSource(x.hlsUrl)
-			       hls.attachMedia(video)
-			       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-			         video.play()
-			       })
-				   hls.on(Hls.Events.ERROR, (event, data) => {
-					 console.error('HLS 播放器遇到错误:', data);
-					   // 根据错误类型进行处理
-					   // initVideo()
-					  if (data.fatal) {
-						switch (data.type) {
-						  case Hls.ErrorTypes.NETWORK_ERROR:
-							console.log('网络错误，尝试重新加载');
-							hls.startLoad();
-							break;
-						  case Hls.ErrorTypes.MEDIA_ERROR:
-							console.log('媒体错误，尝试修复');
-							hls.recoverMediaError();
-							break;
-						  default:
-							console.log('无法恢复的错误，销毁播放器');
-							// hls.destroy();
-							break;
-						}
-					  }
-				   })
-			       hlsRefs.push(hls)
-			     })
-			   })
-		    } else {
-				videoList.value = []
-				cond.value = true
-			  if (timer) clearInterval(timer)
-			}
-			loading.value = false
-	    }catch (error) {
-			loading.value = false
-		}
 
-	}
 let thisVideo = ref(null)
 const handleItemVideo = (url, type, code,item) => {
   thisVideo.value = item
@@ -386,22 +391,83 @@
     if (type == 100) initVideo()
   }, 1000)
 }
-	const initVideo = () => {
+const createPlayer = (cameraIndexCode,videoElement) => {
-	  clearHlsRefs()
+  getPreviewUrlApi({
-	  nextTick(() => {
+    type: 'hls',
-	    videoList.value.forEach(async (item, index) => {
+    cameraIndexCode: cameraIndexCode
-	      const video = document.getElementById(`monitorVideo${index}`)
+  }).then(res=>{
-	      const hls = new Hls({
+    const url = res.data.url;
+    if(url.startsWith('ws')){
+      const player = mpegtsjs.createPlayer({
+        url: url,
+        type: 'flv',
+        isLive: true,
+        hasAudio: false
+      })
+      player.attachMediaElement(videoElement)
+      player.load()
+      player.play()
+      // 错误处理和重连机制
+      player.on(mpegtsjs.Events.ERROR, (err) => {
+        player.unload();
+        player.destroy();
+        console.error('播放器错误:', err)
+        // 3 秒后尝试重新加载
+        setTimeout(() => {
+          console.error('重新加载【'+cameraIndexCode+'】' )
+          createPlayer(cameraIndexCode,videoElement);
+        }, 3000)
+      })
+
+      hlsRefs.push(player)
+    }
+    else{
+      const player = new Hls({
         maxBufferLength: 10, // 最大缓冲长度（秒）
         maxMaxBufferLength: 15, // 缓冲区长度的上限
         maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
       })
-	      hls.loadSource(item.hlsUrl)
+      player.loadSource(url)
-	      hls.attachMedia(video)
+      player.attachMedia(videoElement)
-	      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      player.on(Hls.Events.MANIFEST_PARSED, () => {
-	        video.play()
+        videoElement.play()
       })
-	      hlsRefs.push(hls)
+      player.on(Hls.Events.ERROR, (event, data) => {
+        // 根据错误类型进行处理
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              console.log('网络错误，尝试重新加载');
+              player.startLoad();
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              console.log('媒体错误，尝试修复');
+              player.recoverMediaError();
+              break;
+            default:
+              console.log('无法恢复的错误，销毁播放器');
+              // hls.destroy();
+              break;
+          }
+        }
+      })
+      hlsRefs.push(player)
+    }
+  })
+}
+const initVideo = () => {
+  clearHlsRefs()
+  nextTick(() => {
+    videoList.value.forEach(async (it, i) => {
+
+      it.videos.forEach((item,index)=>{
+        setTimeout(() => {
+          const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
+          createPlayer(item.cameraIndexCode,video);
+        }, 1000)
+
+      })
+
     })
   })
 }
@@ -416,11 +482,18 @@
 )
 // 更新视频
 const postVideoRemain = async () => {
-	  timer = setInterval(() => {
+  // timer = setInterval(() => {
-	    postVideoRemainApi({
+  // clearInterval(timer)
-	      cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+  //   videoList.value.forEach((items,index)=>{
-	    })
+  // 	  setTimeout(()=>{
-	  }, 1500)
+  // 		  postVideoRemainApi({
+  // 		    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
+  // 		  })
+  // 	  },1500)
+  //
+  //   })
+  //
+  // }, 1500)
 }
 const getVideoRegions = async () => {
   let res = await getVideoRegionsApi({
@@ -444,20 +517,13 @@
 }, 500)
 let hotelChange = null;
 onMounted(()=>{
-		hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
+  getVideCollectCateList()
-			cameraName.value = ''
+  console.log(draggable,'draggable')
-			params.businessScenicArea = data.name
-			getVideoRegions()
-		  
-		})
-		onMonitorChange()
-		
 })
 onUnmounted(() => {
-	  clearHlsRefs()
-	  if (hotelChange) pubSub.unsubscribe(hotelChange)
   if (timer) clearInterval(timer)
-	  pubSub.unsubscribe(monitorChange)
+  clearHlsRefs()
+
 })
 </script>
 <style></style>