类型：开发

描述：

src/api/request.js

@@ -41,10 +41,11 @@ instance.interceptors.response.use(
     if (res.data.code == 200) {
       return res.data
     } else {
-      ElMessage({
+        console.error("接口请求错误："+res.data.msg)
-        message: res.data.msg,
+      // ElMessage({
-        type: 'error'
+      //   message: res.data.msg,
-      })
+      //   type: 'error'
+      // })
       return Promise.reject(res.data)
     }
   },

src/components/VideoDialog/index.vue

@@ -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('')
 
@@ -149,6 +156,7 @@
   const handleAction = async (e) => {
     if (e == STOP) {
       ACTION = '1'
+      command.value = e
     } else {
       ACTION = '0'
       command.value = e

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 {getVideoListApi, getColletListApi, getPreviewUrlApi} 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)
@@ -75,9 +76,13 @@
   	  getVideoList()
     })
   }
-  const handleItem = (item) => {
+  const handleItem = async (item) => {
     console.log(item, 'iscollect')
-    src.value = item.hlsUrl
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: item.cameraIndexCode,
+      type: 'hls'
+    })
+    src.value = res.data.url
     isCollect.value = item.isCollect
     isDiy.value = item.isDiy
     cameraIndexCode.value = item.cameraIndexCode
@@ -110,27 +115,77 @@
     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();
+        console.error('播放器错误:', err)
+        // 3 秒后尝试重新加载
+        setTimeout(() => {
+          player.load()
+          player.play()
+        }, 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

@@ -62,8 +62,12 @@ let isCollect = ref(0)
   let hlsRefs = []
   let timer = null
   let isDiy = ref(0)
-  const handleItem = (item) => {
+  const handleItem = async (item) => {
-    src.value = item.hlsUrl
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: item.cameraIndexCode,
+      type: 'hls'
+    })
+    src.value = res.data.url
     cameraIndexCode.value = item.cameraIndexCode
     isCollect.value = item.isCollect
     isDiy.value = item.isDiy
@@ -87,6 +91,69 @@ let isCollect = ref(0)
     src.value = res.data.url
     videoShow.value = true
   }
+  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();
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 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({
       pageNum: 1,
@@ -97,26 +164,7 @@ let isCollect = ref(0)
     nextTick(() => {
       list.value.forEach(async (item, index) => {
         var videoElement = document.getElementById(`video${index}`)
-        const player = mpegtsjs.createPlayer({
+        createPlayer(item.cameraIndexCode,videoElement);
-          url: item.hlsUrl,
-          type: 'flv',
-          isLive: true,
-          hasAudio: false
-        })
-        player.attachMediaElement(videoElement)
-        player.load()
-        player.play()
-
-        // 错误处理和重连机制
-        player.on('error', (err) => {
-          console.error('播放器错误:', err)
-          // 3 秒后尝试重新加载
-          setTimeout(() => {
-            player.load()
-            player.play()
-          }, 3000)
-        })
-        hlsRefs.push(player)
       })
     })
   }

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

@@ -35,14 +35,14 @@
 								</div>
 								<video
 									class="video-item__video"
-									:id="'monitorVideo' + element.cameraIndexCode"
+									:id="'collectmonitorVideo' + element.cameraIndexCode"
 									preload="auto"
 									muted
 									autoplay
 									:controls="false"
 								/>
 								<p class="video-item__title--primary">
-									{{ element.cameraName || element.scenicAreaId }}
+									{{ element.cameraName || element.cameraIndexCode }}
 								</p>
 							</div>
 						</div>
@@ -52,29 +52,7 @@
 			</div>
 
 	    </div>
-	   <!-- <div class="pagination">
-	      <el-pagination
-	        v-model:current-page="params.pageNum"
-	        :page-size="params.pageSize"
-	        :total="total"
-	        background
-	        layout="prev, pager, next"
-	        @current-change="currentChange"
-	      />
-	    </div> -->
 	  </div>
-
-   <!-- <ul class="videos">
-      <li class="video-item" v-for="item in 8" :key="item">
-        <img src="@/assets/images/sxzd.png" alt="" />
-        <p>
-          <span>核心路段：这是一条信息说明</span>
-        </p>
-      </li>
-    </ul> -->
-  <!--  <div class="pagination-box">
-      <el-pagination background layout="prev, pager, next" :total="1000" />
-    </div> -->
   </div>
   <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" @isDiyChange="isDiyChange" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
 </template>
@@ -94,13 +72,20 @@
 	import emptyIco from '@/assets/images/n-icon.png'
 	import { debounce } from 'lodash'
   import mpegtsjs from "mpegts.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 cond = ref(false)
 	let ACTION = '0'
 	let hlsRefs = []
@@ -170,7 +155,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){
@@ -206,6 +190,7 @@
 	const handleAction = async (e) => {
 	  if (e == STOP) {
 	    ACTION = '1'
+      command.value = e
 	  } else {
 	    ACTION = '0'
 	    command.value = e
@@ -280,6 +265,69 @@
 	    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();
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 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(() => {
@@ -287,42 +335,8 @@
 
 			it.videos.forEach((item,index)=>{
 				 setTimeout(() => {
-					const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
+					const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
-           if(item.hlsUrl.startsWith('ws')){
+           createPlayer(item.cameraIndexCode,video);
-             const player = mpegtsjs.createPlayer({
-               url: item.hlsUrl,
-               type: 'flv',
-               isLive: true,
-               hasAudio: false
-             })
-             player.attachMediaElement(video)
-             player.load()
-             player.play()
-
-             // 错误处理和重连机制
-             player.on('error', (err) => {
-               // 3 秒后尝试重新加载
-               setTimeout(() => {
-                 player.load()
-                 player.play()
-               }, 3000)
-             })
-           }else{
-             if(item.hlsUrl){
-               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)
 
 			})

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
@@ -87,7 +87,7 @@
 	            <source type="application/x-mpegURL" />
 	          </video>
 	          <p class="video-item__title--primary">
-	            {{ item.cameraName || item.scenicAreaId }}
+	            {{ item.cameraName || item.cameraIndexCode }}
 	          </p>
 	        </div>
 	      </div>
@@ -146,15 +146,15 @@
 	          class="item"
 	          v-for="(item, index) in videoList"
 	          :key="index"
-	          @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
+	          @click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
 	        >
 	          <div>
 	            <p class="item-title--primary">
-	              {{ item.cameraName || item.scenicAreaId }}
+	              {{ item.cameraName || item.cameraIndexCode }}
 	            </p>
 	            <video
 	              class="item-img"
-	              :id="'monitorVideo' + index"
+	              :id="'hotelmonitorVideo' + index"
 	              muted
 	              autoplay
 	              :controls="false"
@@ -197,13 +197,20 @@
 	import emptyIco from '@/assets/images/n-icon.png'
 	import { debounce } from 'lodash'
   import mpegtsjs from "mpegts.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 cond = ref(false)
 	let ACTION = '0'
 	let hlsRefs = []
@@ -259,6 +266,7 @@
 	const handleAction = async (e) => {
 	  if (e == STOP) {
 	    ACTION = '1'
+      command.value = e
 	  } else {
 	    ACTION = '0'
 	    command.value = e
@@ -311,6 +319,69 @@
 	  videoList.value = []
 	  getRegionsList()
 	}
+  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();
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 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 getRegionsList = async()=>{
 		clearHlsRefs()
@@ -325,59 +396,8 @@
 			   nextTick(() => {
 				   if(!videoList.value.length) return false
 			     videoList.value.forEach(async (x, index) => {
-             const video = document.getElementById(`monitorVideo${index}`)
+             const video = document.getElementById(`hotelmonitorVideo${index}`)
-             if(x.hlsUrl.startsWith('ws')){
+             createPlayer(x.cameraIndexCode,video);
-               const player = mpegtsjs.createPlayer({
-                 url: x.hlsUrl,
-                 type: 'flv',
-                 isLive: true,
-                 hasAudio: false
-               })
-               player.attachMediaElement(video)
-               player.load()
-               player.play()
-               // 错误处理和重连机制
-               player.on('error', (err) => {
-                 // 3 秒后尝试重新加载
-                 setTimeout(() => {
-                   player.load()
-                   player.play()
-                 }, 3000)
-               })
-             }else{
-               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 {
@@ -392,7 +412,12 @@
 
 	}
 	let thisVideo = ref(null)
-	const handleItemVideo = (url, type, code,item) => {
+	const handleItemVideo = async (url, type, code, item) => {
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: code,
+      type: 'hls'
+    })
+    url = res.data.url
     thisVideo.value = item
     videoLog.value = 2
     cameraIndexCode.value = code
@@ -436,40 +461,8 @@
 	  clearHlsRefs()
 	  nextTick(() => {
 	    videoList.value.forEach(async (item, index) => {
-	      const video = document.getElementById(`monitorVideo${index}`)
+	      const video = document.getElementById(`hotelmonitorVideo${index}`)
-        if(item.hlsUrl.startsWith('ws')){
+        createPlayer(item.cameraIndexCode,video);
-          var player = mpegtsjs.createPlayer({
-            url: item.hlsUrl,
-            type: 'flv',
-            isLive: true,
-            hasAudio: false
-          })
-          player.attachMediaElement(video)
-          player.load()
-          player.play()
-
-          // 错误处理和重连机制
-          player.on('error', (err) => {
-            // 3 秒后尝试重新加载
-            setTimeout(() => {
-              player.load()
-              player.play()
-            }, 3000)
-          })
-        }else{
-          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)
-        }
-
 	    })
 	  })
 	}

src/views/monitor/components/box-2.vue

@@ -93,16 +93,21 @@
                 @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
             >关注
             </div>
+            <view class="video-item__video">
               <video
-                class="video-item__video"
                   :id="'monitorVideo' + index"
                   preload="auto"
+                  class="video-item__video"
                   muted
                   autoplay
                   :controls="false"
               >
+
                 <source type="application/x-mpegURL"/>
               </video>
+            </view>
+
+
             <p class="video-item__title--primary">
               {{ item.cameraName || item.cameraIndexCode }}
             </p>
@@ -171,7 +176,7 @@
               class="item"
               v-for="(item, index) in videoList"
               :key="index"
-              @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
+              @click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
           >
             <div>
               <p class="item-title--primary">
@@ -212,13 +217,20 @@ import pubSub from 'pubsub-js'
 import Hls from 'hls.js'
 import HlsPlayer from "@/components/HlsPlayer/index.vue";
 
-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'
 
 const props = {
@@ -267,62 +279,7 @@ const initVideo = () => {
   nextTick(() => {
     videoList.value.forEach(async (item, index) => {
       const videoElement = document.getElementById(`monitorVideo${index}`)
-      if(item.hlsUrl.startsWith("ws")){
+      createPlayer(item.cameraIndexCode,videoElement);
-        const player = mpegtsjs.createPlayer({
-          url: item.hlsUrl,
-          type: 'flv',
-          isLive: true,
-          hasAudio: false
-        })
-        player.attachMediaElement(videoElement)
-        player.load()
-        player.play()
-
-        // 错误处理和重连机制
-        player.on('error', (err) => {
-          console.error('播放器错误:', err)
-          // 3 秒后尝试重新加载
-          setTimeout(() => {
-            player.load()
-            player.play()
-          }, 3000)
-        })
-        hlsRefs.push(player)
-      }else{
-        const player = new Hls({
-          maxBufferLength: 10, // 最大缓冲长度（秒）
-          maxMaxBufferLength: 15, // 缓冲区长度的上限
-          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-        })
-        player.loadSource(item.hlsUrl)
-        player.attachMedia(videoElement)
-        player.on(Hls.Events.MANIFEST_PARSED, () => {
-          videoElement.play()
-        })
-        player.on(Hls.Events.ERROR, (event, data) => {
-          // console.error('HLS 播放器遇到错误:', data);
-          // hls.startLoad();
-          // initVideo()
-          // 根据错误类型进行处理
-          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)
-      }
     })
   })
 }
@@ -388,7 +345,12 @@ const handleBack = () => {
   initVideo()
 }
 let thisVideo = ref(null)
-const handleItemVideo = (url, type, code, item) => {
+const handleItemVideo = async (url, type, code, item) => {
+  let res = await getPreviewUrlApi({
+    cameraIndexCode: code,
+    type: 'hls'
+  })
+  url = res.data.url
   thisVideo.value = item
   videoLog.value = 2
   cameraIndexCode.value = code
@@ -407,6 +369,7 @@ const handleItemVideo = (url, type, code, item) => {
       hlsRef.on('error', (err) => {
         console.error('播放器错误:', err)
         // 3 秒后尝试重新加载
+        hlsRef.unload()
         setTimeout(() => {
           hlsRef.load()
           hlsRef.play()
@@ -431,6 +394,7 @@ const handleItemVideo = (url, type, code, item) => {
 const handleAction = async (e) => {
   if (e == STOP) {
     ACTION = '1'
+    command.value = e
   } else {
     ACTION = '0'
     command.value = e
@@ -461,7 +425,6 @@ const handleCamera = async (itemCode, resource) => {
     type: 'hls',
     cameraIndexCode: itemCode
   })
-  console.log(res, 'rrrrrrrrrrrrrr')
   cameraIndexCode.value = itemCode;
   isCollect.value = resource.isCollect
   isDiy.value = resource.isDiy
@@ -510,29 +473,15 @@ watch(
     },
     {immediate: true}
 )
-const getVideoList = async (val) => {
+const createPlayer = (cameraIndexCode,videoElement) => {
-  try {
+  getPreviewUrlApi({
-    if (loading.value) return
+    type: 'hls',
-    loading.value = true
+    cameraIndexCode: cameraIndexCode
-    if (val == 3) {
+  }).then(res=>{
-      params.businessVideoDisplayPosition = ''
+    const url = res.data.url;
-    } else {
+    if(url.startsWith('ws')){
-      params.businessVideoDisplayPosition = navList.value[current.value]
-    }
-
-    let res = await getVideoListApi(params)
-    total.value = res.total
-    if (res.data.length > 0) {
-
-      videoList.value = res.data
-      // console.log(videoList.value,'1111111111111111111111')
-      // postVideoRemain()
-      nextTick(() => {
-        videoList.value.forEach(async (x, index) => {
-          const videoElement = document.getElementById(`monitorVideo${index}`)
-          if(x.hlsUrl.startsWith('ws')){
       const player = mpegtsjs.createPlayer({
-              url: x.hlsUrl,
+        url: url,
         type: 'flv',
         isLive: true,
         hasAudio: false
@@ -540,9 +489,9 @@ const getVideoList = async (val) => {
       player.attachMediaElement(videoElement)
       player.load()
       player.play()
-
       // 错误处理和重连机制
-            player.on('error', (err) => {
+      player.on(mpegtsjs.Events.ERROR, (err) => {
+        player.unload();
         console.error('播放器错误:', err)
         // 3 秒后尝试重新加载
         setTimeout(() => {
@@ -552,21 +501,19 @@ const getVideoList = async (val) => {
       })
 
       hlsRefs.push(player)
-          }else{
+    }
+    else{
       const player = new Hls({
         maxBufferLength: 10, // 最大缓冲长度（秒）
         maxMaxBufferLength: 15, // 缓冲区长度的上限
         maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
       })
-            player.loadSource(x.hlsUrl)
+      player.loadSource(url)
       player.attachMedia(videoElement)
       player.on(Hls.Events.MANIFEST_PARSED, () => {
         videoElement.play()
       })
       player.on(Hls.Events.ERROR, (event, data) => {
-              // console.error('HLS 播放器遇到错误:', data);
-              // hls.startLoad();
-              // initVideo()
         // 根据错误类型进行处理
         if (data.fatal) {
           switch (data.type) {
@@ -588,6 +535,26 @@ const getVideoList = async (val) => {
       hlsRefs.push(player)
     }
   })
+}
+const getVideoList = async (val) => {
+  try {
+    if (loading.value) return
+    loading.value = true
+    if (val == 3) {
+      params.businessVideoDisplayPosition = ''
+    } else {
+      params.businessVideoDisplayPosition = navList.value[current.value]
+    }
+
+    let res = await getVideoListApi(params)
+    total.value = res.total
+    if (res.data.length > 0) {
+      videoList.value = res.data
+      nextTick(() => {
+        videoList.value.forEach(async (x, index) => {
+          const videoElement = document.getElementById(`monitorVideo${index}`)
+          createPlayer(x.cameraIndexCode,videoElement);
+        })
       })
     } else {
       if (timer) clearInterval(timer)