类型：开发

描述：

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

@@ -196,7 +196,8 @@
 	import Hls from 'hls.js'
 	import emptyIco from '@/assets/images/n-icon.png'
 	import { debounce } from 'lodash'
-  import mpegtsjs from "mpegts.js";
+  // import mpegtsjs from "mpegts.js";
+  import WebRTCWhep from "whepts";
 	// const Z00M_IN = 'ZOOM_IN' // 焦距变大
 	// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
 	// const UP = 'UP' // 上转
@@ -214,6 +215,7 @@
 	let cond = ref(false)
 	let ACTION = '0'
 	let hlsRefs = []
+	let webrtcRefs = []
 	let hlsRef = null
 	let timer = null
 	let videoLog = ref(1)
@@ -290,9 +292,9 @@
     try{
       hlsRef.destroy()
     }catch (e) {
-      
+
     }
-	  
+
 	  initVideo()
 	}
 	let isCollect = ref(0)
@@ -316,12 +318,18 @@
         try{
           item.destroy()
         }catch (e) {
-          
+
         }
-	     
+
 	    })
 	    hlsRefs = []
 	  }
+    if (webrtcRefs.length > 0) {
+      webrtcRefs.map((item) => {
+        item.close()
+      })
+      webrtcRefs = []
+    }
 	}
 	// 分页
 	const currentChange = (e) => {
@@ -335,34 +343,15 @@
       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) => {
-          try{
-            player.unload();
-            player.destroy();
-          }catch (e) {
-            
+      if(url.startsWith('http://192.168.77.200:8050/')){
+        const player = new WebRTCWhep({
+          url:url, // WHEP 服务器地址
+          container: videoElement, // 视频播放容器
+          onError: (error) => {
+            console.error('播放错误:', error)
           }
-         
-          console.error('播放器错误:', err)
-          // 3 秒后尝试重新加载
-          setTimeout(() => {
-            console.error('重新加载【'+cameraIndexCode+'】' )
-            createPlayer(cameraIndexCode,videoElement);
-          }, 3000)
         })
-
-        hlsRefs.push(player)
+        webrtcRefs.push(player)
       }
       else{
         const player = new Hls({
@@ -438,24 +427,13 @@
     videoLog.value = 2
     cameraIndexCode.value = code
     setTimeout(() => {
-      if (url.startsWith('ws')) {
-        const player = mpegtsjs.createPlayer({
-          url: url,
-          type: 'flv',
-          isLive: true,
-          hasAudio: false
-        })
-        player.attachMediaElement(videoRef.value)
-        player.load()
-        player.play()
-
-        // 错误处理和重连机制
-        player.on('error', (err) => {
-          // 3 秒后尝试重新加载
-          setTimeout(() => {
-            player.load()
-            player.play()
-          }, 3000)
+      if (url.startsWith('http://192.168.77.200:8050/')) {
+        hlsRef = new WebRTCWhep({
+          url: url, // WHEP 服务器地址
+          container: videoRef.value, // 视频播放容器
+          onError: (error) => {
+            console.error('播放错误:', error)
+          }
         })
       } else {
         hlsRef = new Hls({