类型：开发

描述：

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

@@ -203,7 +203,7 @@
 
 <script setup>
 import {getVideoListApi, getPreviewUrlApi, getColletListApi, getColletDiyListApi, getColletDiyApi} from '@/api/home'
-import mpegtsjs from 'mpegts.js'
+import WebRTCWhep from 'whepts'
 import {
   getVideoTypeApi,
   getVideoRegionsApi,
@@ -262,6 +262,7 @@ let params = reactive({
   businessVideoDisplayPosition: ''
 })
 let hlsRefs = []
+let webrtcRefs = []
 let hlsRef = null
 let timer = null
 
@@ -301,6 +302,16 @@ const clearHlsRefs = () => {
     })
     hlsRefs = []
   }
+  if(webrtcRefs.length>0){
+    webrtcRefs.map((item) => {
+      try{
+        item.close()
+      }catch (e) {
+
+      }
+    })
+    webrtcRefs = [];
+  }
 }
 const currentChange = (e) => {
   if (navList.value.length == current.value) {
@@ -362,31 +373,13 @@ const handleItemVideo = async (url, type, code, item) => {
   videoLog.value = 2
   cameraIndexCode.value = code
   setTimeout(() => {
-    if (url.startsWith('ws')) {
-      hlsRef = mpegtsjs.createPlayer({
-        url: url,
-        type: 'flv',
-        isLive: true,
-        hasAudio: false
-      })
-      hlsRef.attachMediaElement(videoRef.value)
-      hlsRef.load()
-      hlsRef.play()
-      // 错误处理和重连机制
-      hlsRef.on('error', (err) => {
-        console.error('播放器错误:', err)
-        // 3 秒后尝试重新加载
-        try{
-          hlsRef.unload()
-          hlsRef.destroy()
-        }catch (e) {
-
+    if (url.startsWith('http://192.168.77.200:8050/')) {
+      hlsRef = new WebRTCWhep({
+        url: url, // WHEP 服务器地址
+        container: videoRef.value, // 视频播放容器
+        onError: (error) => {
+          console.error('播放错误:', error)
         }
-        // 3 秒后尝试重新加载
-        setTimeout(() => {
-          console.error('重新加载【'+cameraIndexCode+'】' )
-          handleItemVideo(url, 101, code, item);
-        }, 3000)
       })
     } else {
       hlsRef = new Hls({
@@ -502,37 +495,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
-      })
-      player.attachMediaElement(videoElement)
-      player.load()
-      player.play()
-      // 错误处理和重连机制
-      player.on(mpegtsjs.Events.ERROR, (err) => {
-        console.error('播放器错误【'+cameraIndexCode+'】:', 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)
         }
-
-        // 3 秒后尝试重新加载
-        setTimeout(() => {
-          console.error('重新加载【'+cameraIndexCode+'】' )
-          createPlayer(cameraIndexCode,videoElement);
-        }, 3000)
-
       })
-      player.on(mpegtsjs.Events.LOADING_COMPLETE, (err) => {
-        console.error('加载完成:', err)
-      })
-      hlsRefs.push(player)
+      webrtcRefs.push(player)
     }
     else{
       const player = new Hls({