类型：开发

描述：

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
@@ -15,9 +16,9 @@
 </template>
 
 <script>
-  import Hls from 'hls.js'
+import Hls from 'hls.js'
-
+import mpegtsjs from 'mpegts.js'
-  export default {
+export default {
   name: 'HlsPlayer',
   props: {
     url: {
@@ -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()
@@ -314,24 +339,24 @@
     }
     this.fullCleanup()
   }
-  }
+}
 </script>
 
 <style scoped lang="scss">
-  .myVideo-container {
+.myVideo-container {
   position: relative;
   height: 100%;
-  }
+}
 
-  .myVideo {
+.myVideo {
   width: 100%;
   height: 100%;
   // aspect-ratio: 16/9;
   /* border: 1px solid #ccc; */
   // border-radius: vw(5);
-  }
+}
 
-  .loading-overlay {
+.loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -341,12 +366,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  }
+}
 
-  .loading-text {
+.loading-text {
   color: white;
   padding: vw(10);
   border-radius: vw(4);
   background: rgba(0, 0, 0, 0.6);
-  }
+}
 </style>

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>
@@ -61,22 +61,29 @@
 </template>
 
 <script setup>
-  import Hls from 'hls.js'
+import Hls from 'hls.js'
-  import { ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
-  import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
+import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
-  import { getColletDiyApi } from '@/api/home'
+import { getColletDiyApi } from '@/api/home'
-  import pubSub from 'pubsub-js'
+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' // 停止操作
-  let ACTION = '0'
+const Z00M_IN = 'zoomin' // 焦距变大
-  let command = ref('')
+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('')
 
-  const props = defineProps({
+const props = defineProps({
   src: {
     type: String,
     default: ''
@@ -93,28 +100,28 @@
     type: Number,
     default: 0
   }
-  })
+})
-  let modelValue = defineModel()
+let modelValue = defineModel()
-  let videoRef = ref()
+let videoRef = ref()
-  let webRtcServer = null
+let webRtcServer = null
-  let hlsRef = null
+let hlsRef = null
-  let colletCond = ref(props.isCollect)
+let colletCond = ref(props.isCollect)
-  let isDayCurr = ref(props.isDiy)
+let isDayCurr = ref(props.isDiy)
-  watch(
+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')
 
     },
     {
       immediate: true
     }
-  )
+)
-	const emit = defineEmits(['isDiyChange']);
+const emit = defineEmits(['isDiyChange']);
-  // 收藏
+// 收藏
-  const handleCollectAdd = async (id, status, index) => {
+const handleCollectAdd = async () => {
   await getColletDiyApi({
     cameraIndexCode:props.cameraIndexCode,
     isDiy: props.isDiy == 0 ? 1 : 0
@@ -129,9 +136,9 @@
   emit('isDiyChange', isDayCurr.value);
   pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
 
-  }
+}
-  // 关注
+// 关注
-  const handleCollect = async (id, status, index) => {
+const handleCollect = async (id, status, index) => {
   await postVideoCollectApi({
     cameraIndexCode:props.cameraIndexCode,
     isCollect: colletCond.value == 0 ? 1 : 0
@@ -145,10 +152,11 @@
   }
   pubSub.publish('videoCollect', props.cameraIndexCode)
 
-  }
+}
-  const handleAction = async (e) => {
+const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -165,15 +173,15 @@
     message: '操作成功',
     type: 'success'
   })
-  }
+}
-  const handleClose = () => {
+const handleClose = () => {
   if (hlsRef) {
     hlsRef.destroy()
     hlsRef = null
   }
   modelValue.value = false
-  }
+}
-  const init = () => {
+const init = () => {
   hlsRef = new Hls({
     enableWorker: false, // 禁用 Worker 来避免额外的线程
     enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
@@ -202,15 +210,15 @@
       }
     }
   })
-  }
+}
 
-  onMounted(()=>{
+onMounted(()=>{
 
-  })
+})
 </script>
 
 <style scoped lang="scss">
-	.video-follow,.video-unfollow {
+.video-follow,.video-unfollow {
   // cursor: pointer;
   // display: none;
   // position: absolute;
@@ -223,15 +231,15 @@
   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%;
-	}
+}
-	.video-item__follow {
+.video-item__follow {
   // background-image: url('@/assets/images/unfollow.png');
-	}
+}
-  .dialog {
+.dialog {
   z-index: 9999;
   .action {
     &-box {
@@ -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;
   }
@@ -302,5 +310,5 @@
     width: vw(60);
     z-index: 9999;
   }
-  }
+}
 </style>

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>
@@ -80,50 +80,58 @@
 </template>
 
 <script setup>
-	import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
+import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
-	import {
+import {
   getVideoTypeApi,
   getVideoRegionsApi,
   postVideoRemainApi,
   postVideoControlApi,
   postVideoCollectApi
-	} from '@/api/monitor'
+} from '@/api/monitor'
-	import draggable from 'vuedraggable';
+import draggable from 'vuedraggable';
-	import pubSub from 'pubsub-js'
+import pubSub from 'pubsub-js'
-	import Hls from 'hls.js'
+import Hls from 'hls.js'
-	import emptyIco from '@/assets/images/n-icon.png'
+import emptyIco from '@/assets/images/n-icon.png'
-	import { debounce } from 'lodash'
+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' // 右转
-	let cond = ref(false)
+// const STOP = 'STOP' // 停止操作
-	let ACTION = '0'
+const Z00M_IN = 'zoomin' // 焦距变大
-	let hlsRefs = []
+const Z00M_OUT = 'zoomout' // 焦距变小
-	let hlsRef = null
+const UP = 'up' // 上转
-	let timer = null
+const DOWN = 'down' // 下转
-	let videoLog = ref(1)
+const LEFT = 'left' // 左转
-	let videoList = ref([])
+const RIGHT = 'right' // 右转
-	let cameraIndexCode = ref('')
+const STOP = 'stop' // 停止操作
-	let videoRef = ref()
+let cond = ref(false)
-	let monitorChange = null
+let ACTION = '0'
-	let total = ref(0)
+let hlsRefs = []
-	let loading = ref(false)
+let hlsRef = null
-	let command = ref('')
+let timer = null
-	let cameraName = ref('')
+let videoLog = ref(1)
-	let regionList = ref()
+let videoList = ref([])
-	let params = reactive({
+let cameraIndexCode = ref('')
+let videoRef = ref()
+let monitorChange = null
+let total = ref(0)
+let loading = ref(false)
+let command = ref('')
+let cameraName = ref('')
+let regionList = ref()
+let params = reactive({
   businessScenicArea: "",
   cameraName: "",
   pageNum: 1,
   pageSize: 6,
-	})
+})
-	let grad = ref(3)
+let grad = ref(3)
-	let show = ref(false)
+let show = ref(false)
-	const onMonitorChange = () => {
+const onMonitorChange = () => {
   monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
     params.businessScenicArea = data.name
     params.pageNum = 1
@@ -132,9 +140,9 @@
     cond.value = false
     getRegionsList()
   })
-	}
+}
-	//弹窗收藏监听
+//弹窗收藏监听
-	const isDiyChange = (val)=>{
+const isDiyChange = (val)=>{
   console.log(val,11222)
   isDiy.value = val
   if(!val){
@@ -147,11 +155,11 @@
   // 		it.isDiy = val
   // 	}
   // })
-	}
+}
-	const onStart = (res)=>{
+const onStart = (res)=>{
 
-	}
+}
-	const onEnd = (evt)=>{
+const onEnd = (evt)=>{
   const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
   getVideCollectCateSort({
     key:videoList.value[itemIndex].key,
@@ -162,14 +170,13 @@
   })
   // postVideoRemain()
   initVideo()
-	}
+}
-	// 获取关注列表
+// 获取关注列表
-	const  getVideCollectCateList = async () => {
+const  getVideCollectCateList = async () => {
   clearHlsRefs()
   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){
@@ -181,9 +188,9 @@
   // total.value = res.total
 
   initVideo()
-	}
+}
-	// 收藏
+// 收藏
-	const handleCollect = async (id, status, index,element) => {
+const handleCollect = async (id, status, index,element) => {
   await getColletDiyApi({
     cameraIndexCode:id,
     isDiy: status == 0 ? 1 : 0
@@ -200,11 +207,12 @@
     show.value = false
   }
   // pubSub.publish('videoCollect', id)
-	}
+}
-	// 采集
+// 采集
-	const handleAction = async (e) => {
+const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -221,18 +229,18 @@
     message: '操作成功',
     type: 'success'
   })
-	}
+}
-	// 返回列表
+// 返回列表
-	const handleBack = () => {
+const handleBack = () => {
   videoLog.value = 1
   hlsRef.destroy()
   initVideo()
-	}
+}
-	let isCollect = ref(0)
+let isCollect = ref(0)
-	let isDiy = ref(0)
+let isDiy = ref(0)
-	let videoSrc = ref('')
+let videoSrc = ref('')
-	let diyIndex = ref(null)
+let diyIndex = ref(null)
-	const handleCamera = async (itemCode,resource,index) => {
+const handleCamera = async (itemCode,resource,index) => {
   diyIndex.value = index
   show.value = true
   let res = await getPreviewUrlApi({
@@ -243,25 +251,25 @@
   isCollect.value = resource.isCollect
   isDiy.value = resource.isDiy
   videoSrc.value = res.data.url
-	}
+}
-	//清除 hls
+//清除 hls
-	const clearHlsRefs = () => {
+const clearHlsRefs = () => {
   if (hlsRefs.length > 0) {
     hlsRefs.map((item) => {
       item.destroy()
     })
     hlsRefs = []
   }
-	}
+}
-	// 分页
+// 分页
-	const currentChange = (e) => {
+const currentChange = (e) => {
   clearHlsRefs()
   videoList.value = []
   getRegionsList()
-	}
+}
 
-	let thisVideo = ref(null)
+let thisVideo = ref(null)
-	const handleItemVideo = (url, type, code,item) => {
+const handleItemVideo = (url, type, code,item) => {
   thisVideo.value = item
   videoLog.value = 2
   cameraIndexCode.value = code
@@ -278,36 +286,88 @@
     })
     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)
     }
-	const initVideo = () => {
+    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(() => {
     videoList.value.forEach(async (it, i) => {
 
       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)
 
       })
 
     })
   })
-	}
+}
-	watch(
+watch(
     () => videoList.value,
     (val) => {
       if (val.length) {
@@ -315,28 +375,27 @@
       }
     },
     { immediate: true }
-	)
+)
-	// 更新视频
+// 更新视频
-	const postVideoRemain = async () => {
+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 () => {
+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
@@ -344,23 +403,23 @@
   })
   regionList.value[0].show = true
 
-	}
+}
-	const handleRegions = (e) => {
+const handleRegions = (e) => {
   regionList.value[e].show = !regionList.value[e].show
-	}
+}
-	const onInput = debounce((e) => {
+const onInput = debounce((e) => {
   getVideoRegions()
-	}, 500)
+}, 500)
-	let hotelChange = null;
+let hotelChange = null;
-	onMounted(()=>{
+onMounted(()=>{
   getVideCollectCateList()
   console.log(draggable,'draggable')
-	})
+})
-	onUnmounted(() => {
+onUnmounted(() => {
   if (timer) clearInterval(timer)
   clearHlsRefs()
 
-	})
+})
 </script>
 <style></style>
 <style scoped lang="scss">

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,48 +184,58 @@
 </template>
 
 <script setup>
-	import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
+import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
-	import {
+import {
   getVideoTypeApi,
   getVideoRegionsApi,
   postVideoRemainApi,
   postVideoControlApi,
   postVideoCollectApi
-	} from '@/api/monitor'
+} from '@/api/monitor'
-	import pubSub from 'pubsub-js'
+import draggable from 'vuedraggable';
-	import Hls from 'hls.js'
+import pubSub from 'pubsub-js'
-	import emptyIco from '@/assets/images/n-icon.png'
+import Hls from 'hls.js'
-	import { debounce } from 'lodash'
+import emptyIco from '@/assets/images/n-icon.png'
-	const Z00M_IN = 'ZOOM_IN' // 焦距变大
+import { debounce } from 'lodash'
-	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+import mpegtsjs from "mpegts.js";
-	const UP = 'UP' // 上转
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
-	const DOWN = 'DOWN' // 下转
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-	const LEFT = 'LEFT' // 左转
+// const UP = 'UP' // 上转
-	const RIGHT = 'RIGHT' // 右转
+// const DOWN = 'DOWN' // 下转
-	const STOP = 'STOP' // 停止操作
+// const LEFT = 'LEFT' // 左转
-	let cond = ref(false)
+// const RIGHT = 'RIGHT' // 右转
-	let ACTION = '0'
+// const STOP = 'STOP' // 停止操作
-	let hlsRefs = []
+const Z00M_IN = 'zoomin' // 焦距变大
-	let hlsRef = null
+const Z00M_OUT = 'zoomout' // 焦距变小
-	let timer = null
+const UP = 'up' // 上转
-	let videoLog = ref(1)
+const DOWN = 'down' // 下转
-	let videoList = ref([])
+const LEFT = 'left' // 左转
-	let cameraIndexCode = ref('')
+const RIGHT = 'right' // 右转
-	let videoRef = ref()
+const STOP = 'stop' // 停止操作
-	let monitorChange = null
+let cond = ref(false)
-	let total = ref(0)
+let ACTION = '0'
-	let loading = ref(false)
+let hlsRefs = []
-	let command = ref('')
+let hlsRef = null
-	let cameraName = ref('')
+let timer = null
-	let regionList = ref()
+let videoLog = ref(1)
-	let params = reactive({
+let videoList = ref([])
+let cameraIndexCode = ref('')
+let videoRef = ref()
+let monitorChange = null
+let total = ref(0)
+let loading = ref(false)
+let command = ref('')
+let cameraName = ref('')
+let regionList = ref()
+let params = reactive({
   businessScenicArea: "",
   cameraName: "",
   pageNum: 1,
   pageSize: 6,
-	})
+})
-	let show = ref(false)
+let grad = ref(3)
-	const onMonitorChange = () => {
+let show = ref(false)
+const onMonitorChange = () => {
   monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
     params.businessScenicArea = data.name
     params.pageNum = 1
@@ -234,27 +244,79 @@
     cond.value = false
     getRegionsList()
   })
+}
+//弹窗收藏监听
+const isDiyChange = (val)=>{
+  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) => {
-	const handleCollect = async (id, status, index) => {
+
-	  await postVideoCollectApi({
+  // 	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) => {
+const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -271,17 +333,19 @@
     message: '操作成功',
     type: 'success'
   })
-	}
+}
-	// 返回列表
+// 返回列表
-	const handleBack = () => {
+const handleBack = () => {
   videoLog.value = 1
   hlsRef.destroy()
   initVideo()
-	}
+}
-	let isCollect = ref(0)
+let isCollect = ref(0)
-	let isDiy = ref(0)
+let isDiy = ref(0)
-	let videoSrc = ref('')
+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',
@@ -291,84 +355,25 @@
   isCollect.value = resource.isCollect
   isDiy.value = resource.isDiy
   videoSrc.value = res.data.url
-	}
+}
-	//清除 hls
+//清除 hls
-	const clearHlsRefs = () => {
+const clearHlsRefs = () => {
   if (hlsRefs.length > 0) {
     hlsRefs.map((item) => {
       item.destroy()
     })
     hlsRefs = []
   }
-	}
+}
-	// 分页
+// 分页
-	const currentChange = (e) => {
+const currentChange = (e) => {
   clearHlsRefs()
   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)
-	let thisVideo = ref(null)
+const handleItemVideo = (url, type, code,item) => {
-	const handleItemVideo = (url, type, code,item) => {
   thisVideo.value = item
   videoLog.value = 2
   cameraIndexCode.value = code
@@ -385,27 +390,88 @@
     })
     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)
     }
-	const initVideo = () => {
+    else{
-	  clearHlsRefs()
+      const player = new Hls({
-	  nextTick(() => {
-	    videoList.value.forEach(async (item, index) => {
-	      const video = document.getElementById(`monitorVideo${index}`)
-	      const hls = 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;
           }
-	watch(
+        }
+      })
+      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)
+
+      })
+
+    })
+  })
+}
+watch(
     () => videoList.value,
     (val) => {
       if (val.length) {
@@ -413,16 +479,23 @@
       }
     },
     { immediate: true }
-	)
+)
-	// 更新视频
+// 更新视频
-	const postVideoRemain = async () => {
+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)
-	const getVideoRegions = async () => {
+  // 		  })
+  // 	  },1500)
+  //
+  //   })
+  //
+  // }, 1500)
+}
+const getVideoRegions = async () => {
   let res = await getVideoRegionsApi({
     cameraName: cameraName.value,
     businessScenicArea: params.businessScenicArea
@@ -435,30 +508,23 @@
   })
   regionList.value[0].show = true
 
-	}
+}
-	const handleRegions = (e) => {
+const handleRegions = (e) => {
   regionList.value[e].show = !regionList.value[e].show
-	}
+}
-	const onInput = debounce((e) => {
+const onInput = debounce((e) => {
   getVideoRegions()
-	}, 500)
+}, 500)
-	let hotelChange = null;
+let hotelChange = null;
-	onMounted(()=>{
+onMounted(()=>{
-		hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
+  getVideCollectCateList()
-			cameraName.value = ''
+  console.log(draggable,'draggable')
-			params.businessScenicArea = data.name
+})
-			getVideoRegions()
+onUnmounted(() => {
-		  
-		})
-		onMonitorChange()
-		
-	})
-	onUnmounted(() => {
-	  clearHlsRefs()
-	  if (hotelChange) pubSub.unsubscribe(hotelChange)
   if (timer) clearInterval(timer)
-	  pubSub.unsubscribe(monitorChange)
+  clearHlsRefs()
-	})
+
+})
 </script>
 <style></style>
 <style scoped lang="scss">