类型：开发

描述：

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

@@ -197,7 +197,7 @@ import pubSub from 'pubsub-js'
 import Hls from 'hls.js'
 import emptyIco from '@/assets/images/n-icon.png'
 import { debounce } from 'lodash'
-import mpegtsjs from "mpegts.js";
+import WebRTCWhep from "whepts";
 // const Z00M_IN = 'ZOOM_IN' // 焦距变大
 // const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
 // const UP = 'UP' // 上转
@@ -215,6 +215,7 @@ const STOP = 'stop' // 停止操作
 let cond = ref(false)
 let ACTION = '0'
 let hlsRefs = []
+let webrtcRefs = []
 let hlsRef = null
 let timer = null
 let videoLog = ref(1)
@@ -364,6 +365,12 @@ const clearHlsRefs = () => {
     })
     hlsRefs = []
   }
+  if (webrtcRefs.length > 0) {
+    webrtcRefs.map((item) => {
+      item.close()
+    })
+    webrtcRefs = []
+  }
 }
 // 分页
 const currentChange = (e) => {
@@ -397,29 +404,15 @@ const createPlayer = (cameraIndexCode,videoElement) => {
     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
+    if(url.startsWith('http://192.168.77.200:8050/')){
+      const player = new WebRTCWhep({
+        url: url, // WHEP 服务器地址
+        container: videoElement, // 视频播放容器
+        onError: (error) => {
+          console.error('播放错误:', error)
+        }
       })
-      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)
+      webrtcRefs.push(player)
     }
     else{
       const player = new Hls({