类型：开发

描述：

src/layout/components/CoreVideo/index.vue

@@ -39,7 +39,7 @@
 
   import { useWebSocket } from '@/hooks/socket'
   import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
-  import mpegtsjs from "mpegts.js";
+  import WebRTCWhep from 'whepts'
 
   const { dataRes } = useWebSocket(
     `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/securityAlerts`
@@ -59,6 +59,7 @@ let isCollect = ref(0)
   let cameraIndexCode = ref('')
   let videoShow = ref(false)
   let allShow = ref(false)
+  let webrtcRefs = []
   let hlsRefs = []
   let timer = null
   let isDiy = ref(0)
@@ -97,29 +98,15 @@ let isCollect = ref(0)
       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({
@@ -185,6 +172,16 @@ let isCollect = ref(0)
       })
       hlsRefs = []
     }
+    if(webrtcRefs.length>0){
+      webrtcRefs.map((item) => {
+        try{
+          item.close()
+        }catch (e) {
+
+        }
+      })
+      webrtcRefs = [];
+    }
     getVideoList()
   }
   const onVideoCollect = () => {