From 402e3c6e091196f105397694768a3e4a91590e03 Mon Sep 17 00:00:00 2001
From: lixuefeng <1126141216@qq.com>
Date: Wed, 14 Jan 2026 00:24:38 +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

---
 package-lock.json                           |  9 ++-
 package.json                                |  3 +-
 src/components/HlsPlayer/index.vue          | 34 +++------
 src/layout/components/CoreVideo/allList.vue | 39 +++++-----
 src/layout/components/CoreVideo/index.vue   | 43 ++++++-----
 src/views/collect/components/video-box.vue  | 62 ++++++++--------
 src/views/hotel/components/video-box.vue    | 76 +++++++-------------
 src/views/monitor/components/box-2.vue      | 79 +++++++--------------
 8 files changed, 140 insertions(+), 205 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3c6bdd..f037c81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,8 @@
         "vue-echarts": "^7.0.3",
         "vue-router": "^4.4.5",
         "vue3-seamless-scroll": "^2.0.1",
-        "vuedraggable": "^4.1.0"
+        "vuedraggable": "^4.1.0",
+        "whepts": "^1.0.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -6165,6 +6166,12 @@
       "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
       "license": "MIT"
     },
+    "node_modules/whepts": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/whepts/-/whepts-1.0.2.tgz",
+      "integrity": "sha512-9P0OP514Z2ZR2ev7qMOApplw6ERMChqgPi6eWWn6HTlTpDV0gW7Zqs4kLAKIV7xqxXCDNDCorxNz8ekOYAEp5g==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 58b73b9..888e449 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5",
     "vue3-seamless-scroll": "^2.0.1",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "whepts": "^1.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/src/components/HlsPlayer/index.vue b/src/components/HlsPlayer/index.vue
index 2bf919a..df4e0c9 100644
--- a/src/components/HlsPlayer/index.vue
+++ b/src/components/HlsPlayer/index.vue
@@ -4,10 +4,10 @@
       class="myVideo"
       id="video"
       ref="videoElement"
+      preload="auto"
       muted
-      playsinline
+      autoplay
       :controls="false"
-      disablePictureInPicture
     ></video>
    <!-- <div v-if="loading" class="loading-overlay pointer-events-none">
       <div class="loading-text">{{ loadingText }}</div>
@@ -17,7 +17,7 @@
 
 <script>
   import Hls from 'hls.js'
-  import mpegtsjs from 'mpegts.js'
+  import WebRTCWhep from 'whepts'
   export default {
     name: 'HlsPlayer',
     props: {
@@ -121,6 +121,7 @@
       immediateCleanup() {
         // 立即停止网络请求
         if (this.hls) {
+          this.hls.close();
           this.hls.stopLoad()
           this.hls.detachMedia()
         }
@@ -163,26 +164,13 @@
         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/')){
+          this.hls = new WebRTCWhep({
+            url: this.url, // WHEP 服务器地址
+            container: this.video, // 视频播放容器
+            onError: (error) => {
+              console.error('播放错误:', error)
+            }
           })
         }else{
           this.hls = new Hls({
diff --git a/src/layout/components/CoreVideo/allList.vue b/src/layout/components/CoreVideo/allList.vue
index 7ed01ae..fc503bd 100644
--- a/src/layout/components/CoreVideo/allList.vue
+++ b/src/layout/components/CoreVideo/allList.vue
@@ -43,12 +43,13 @@ import {getVideoListApi, getColletListApi, getPreviewUrlApi} from '@/api/home'
 
   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('')
@@ -109,6 +110,12 @@ import mpegtsjs from "mpegts.js";
       })
       hlsRefs = []
     }
+    if (webrtcRefs.length > 0) {
+      webrtcRefs.map((item) => {
+        item.close()
+      })
+      webrtcRefs = []
+    }
   }
   const pageNumChange = () => {
     clearHlsRefs()
@@ -121,29 +128,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/layout/components/CoreVideo/index.vue b/src/layout/components/CoreVideo/index.vue
index 3e078ba..5e83af0 100644
--- a/src/layout/components/CoreVideo/index.vue
+++ b/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 = () => {
diff --git a/src/views/collect/components/video-box.vue b/src/views/collect/components/video-box.vue
index 1be8c1c..c36d14f 100644
--- a/src/views/collect/components/video-box.vue
+++ b/src/views/collect/components/video-box.vue
@@ -71,7 +71,7 @@
 	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' // 上转
@@ -89,6 +89,7 @@
 	let cond = ref(false)
 	let ACTION = '0'
 	let hlsRefs = []
+	let webrtcRefs = []
 	let hlsRef = null
 	let timer = null
 	let videoLog = ref(1)
@@ -232,12 +233,26 @@
 	}
 	//清除 hls
 	const clearHlsRefs = () => {
-	  if (hlsRefs.length > 0) {
-	    hlsRefs.map((item) => {
-	      item.destroy()
-	    })
-	    hlsRefs = []
-	  }
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        try{
+          item.destroy()
+        }catch (e) {
+
+        }
+      })
+      hlsRefs = []
+    }
+    if(webrtcRefs.length>0){
+      webrtcRefs.map((item) => {
+        try{
+          item.close()
+        }catch (e) {
+
+        }
+      })
+      webrtcRefs = [];
+    }
 	}
 	// 分页
 	const currentChange = (e) => {
@@ -271,31 +286,16 @@
       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)
-      }
-      else{
+        webrtcRefs.push(player)
+      }else{
         const player = new Hls({
           maxBufferLength: 10, // 最大缓冲长度（秒）
           maxMaxBufferLength: 15, // 缓冲区长度的上限
diff --git a/src/views/hotel/components/video-box.vue b/src/views/hotel/components/video-box.vue
index 4e27037..2043cfd 100644
--- a/src/views/hotel/components/video-box.vue
+++ b/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({
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index fe2b4e8..68f717e 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/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({