From ed5876c55bed67a86e8b3c3368ede182ede1b478 Mon Sep 17 00:00:00 2001
From: lixuefeng <1126141216@qq.com>
Date: Wed, 14 Jan 2026 00:51:15 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B1=BB=E5=9E=8B=EF=BC=9A=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=20=E6=8F=8F=E8=BF=B0=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HlsPlayer/index.vue          | 33 +++------
 src/layout/components/CoreVideo/allList.vue | 41 +++++-------
 src/layout/components/CoreVideo/index.vue   |  1 -
 src/views/collect/components/video-box.vue  | 39 +++++------
 src/views/hotel/components/video-box.vue    | 39 +++++------
 src/views/monitor/components/box-2.vue      | 74 ++++++++-------------
 6 files changed, 87 insertions(+), 140 deletions(-)

diff --git a/src/components/HlsPlayer/index.vue b/src/components/HlsPlayer/index.vue
index bd7bcee..f84c220 100644
--- a/src/components/HlsPlayer/index.vue
+++ b/src/components/HlsPlayer/index.vue
@@ -6,8 +6,9 @@
         ref="videoElement"
         muted
         playsinline
+        preload="auto"
+        autoplay
         :controls="false"
-        disablePictureInPicture
     ></video>
     <!-- <div v-if="loading" class="loading-overlay pointer-events-none">
        <div class="loading-text">{{ loadingText }}</div>
@@ -17,7 +18,7 @@
 
 <script>
 import Hls from 'hls.js'
-import mpegtsjs from 'mpegts.js'
+import WebRTCWhep from "whepts";
 export default {
   name: 'HlsPlayer',
   props: {
@@ -163,27 +164,15 @@ export default {
       if (this.hls) {
         this.immediateCleanup()
       }
-      if(this.url.startsWith('ws')){
-        const videoElement = document.getElementById('video')
-        const player = mpegtsjs.createPlayer({
-          url: this.url,
-          type: 'flv',
-          isLive: true,
-          hasAudio: false
-        })
-        player.attachMediaElement(videoElement)
-        player.load()
-        player.play()
-
-        // 错误处理和重连机制
-        player.on('error', (err) => {
-          player.unload()
-          // 3 秒后尝试重新加载
-          setTimeout(() => {
-            player.load()
-            player.play()
-          }, 3000)
+      if(this.url.startsWith('http://192.168.77.200:8050/')){
+        const player = new WebRTCWhep({
+          url: this.url, // WHEP 服务器地址
+          container: this.video, // 视频播放容器
+          onError: (error) => {
+            console.error('播放错误:', error)
+          }
         })
+        webrtcRefs.push(player)
       }else{
         this.hls = new Hls({
           // 内存优化配置
diff --git a/src/layout/components/CoreVideo/allList.vue b/src/layout/components/CoreVideo/allList.vue
index abab5dd..008f4f5 100644
--- a/src/layout/components/CoreVideo/allList.vue
+++ b/src/layout/components/CoreVideo/allList.vue
@@ -43,12 +43,13 @@
 
   import Hls from 'hls.js'
   import pubSub from 'pubsub-js'
-  import mpegtsjs from "mpegts.js";
+  import WebRTCWhep from "whepts";
 
   let modelValue = defineModel()
   let isCollect = ref(0)
   let list = ref([])
   let hlsRefs = []
+  let webrtcRefs = []
   let total = ref(0)
   let src = ref('')
   let cameraIndexCode = ref('')
@@ -97,7 +98,7 @@
   const handleClose = () => {
 	modelValue.value = false
 	clearHlsRefs()
-    
+
   }
   const clearHlsRefs = () => {
     if (hlsRefs.length > 0) {
@@ -106,6 +107,12 @@
       })
       hlsRefs = []
     }
+    if (webrtcRefs.length > 0) {
+      webrtcRefs.map((item) => {
+        item.close()
+      })
+      webrtcRefs = []
+    }
   }
   const pageNumChange = () => {
     clearHlsRefs()
@@ -118,29 +125,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
+      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({
diff --git a/src/layout/components/CoreVideo/index.vue b/src/layout/components/CoreVideo/index.vue
index 00cd061..a8f8b56 100644
--- a/src/layout/components/CoreVideo/index.vue
+++ b/src/layout/components/CoreVideo/index.vue
@@ -73,7 +73,6 @@ let isCollect = ref(0)
   let timer = null
   let isDiy = ref(0)
   const handleItem = (item) => {
-	  console.log(item,'1111111111111111111111111')
     src.value = item.hlsUrl
     cameraIndexCode.value = item.cameraIndexCode
 	isCollect.value = item.isCollect
diff --git a/src/views/collect/components/video-box.vue b/src/views/collect/components/video-box.vue
index 5340ea7..49b0d94 100644
--- a/src/views/collect/components/video-box.vue
+++ b/src/views/collect/components/video-box.vue
@@ -93,7 +93,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' // 上转
@@ -111,6 +111,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)
@@ -260,6 +261,12 @@ const clearHlsRefs = () => {
     })
     hlsRefs = []
   }
+  if (webrtcRefs.length > 0) {
+    webrtcRefs.map((item) => {
+      item.close()
+    })
+    webrtcRefs = []
+  }
 }
 // 分页
 const currentChange = (e) => {
@@ -293,29 +300,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({
diff --git a/src/views/hotel/components/video-box.vue b/src/views/hotel/components/video-box.vue
index eed24f6..ad3a576 100644
--- a/src/views/hotel/components/video-box.vue
+++ b/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({
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index ffec14c..a7f352c 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -199,7 +199,7 @@
     postVideoControlApi,
     postVideoCollectApi
   } from '@/api/monitor'
-  import mpegtsjs from 'mpegts.js'
+  import WebRTCWhep from 'whepts'
 
   import { debounce } from 'lodash'
   import pubSub from 'pubsub-js'
@@ -243,6 +243,7 @@
     businessVideoDisplayPosition: ''
   })
   let hlsRefs = []
+  let webrtcRefs = []
   let hlsRef = null
   let timer = null
 
@@ -260,32 +261,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
+      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) => {
-          console.error('播放器错误【'+cameraIndexCode+'】:', err)
-          player.unload();
-          player.destroy();
-          // 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({
@@ -346,6 +330,16 @@
       })
       hlsRefs = []
     }
+    if(webrtcRefs.length>0){
+      webrtcRefs.map((item) => {
+        try{
+          item.close()
+        }catch (e) {
+
+        }
+      })
+      webrtcRefs = [];
+    }
   }
   const currentChange = (e) => {
 	  if(navList.value.length==current.value){
@@ -402,27 +396,13 @@
     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 秒后尝试重新加载
-          hlsRef.unload()
-          hlsRef.destroy()
-          // 3 秒后尝试重新加载
-          setTimeout(() => {
-            console.error('重新加载【' + cameraIndexCode + '】')
-            handleItemVideo(url, 101, code, item);
-          }, 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({