类型：开发

描述：

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({