实时预览播放实现

src/components/WebrtcPlayer/index.vue

@@ -203,24 +203,24 @@ export default {
       };
       let stream
 
+      console.log(url, videoId, 'url和目标播放容器ID')
       this.player = new RTCPeerConnection(config);
       this.player.addEventListener("iceconnectionstatechange", () => {
         const state = this.player.iceConnectionState;
-        console.log(state)
         if (state === "connected" || state === "completed") {
-          // updateStatus("已连接", true);
+          this.$message.success("已连接");
           // showLoading(false);
           // hideError();
         } else if (state === "failed" || state === "disconnected" || state === "closed") {
-          // updateStatus("连接失败", false);
+          this.$message.error("连接失败");
+          this.handleReconnect();
           // showLoading(false);
           if (state === "failed") {
-            // showError("ICE连接失败，请检查网络连接");
+            this.$message.error("ICE连接失败，请检查网络连接");
           }
         }
       });
       this.player.addEventListener("track", (event) => {
-        // addLog("收到媒体轨道", "success");
         const videoElement = document.getElementById(videoId);
 
         if (event.streams && event.streams[0]) {
@@ -230,11 +230,8 @@ export default {
           // 设置自动播放属性
           videoElement.muted = false;
 
-          // addLog("视频流已附加到播放器", "success");
-
           // 监听视频元数据加载
           videoElement.addEventListener("loadedmetadata", () => {
-            // updateQualityInfo();
             // addLog(`视频分辨率: ${videoElement.videoWidth}×${videoElement.videoHeight}`, "info");
           });
 
@@ -244,8 +241,8 @@ export default {
       });
       // 监听ICE候选
       this.player.addEventListener("icecandidate", (event) => {
+        console.log('icecandidate', event)
         if (event.candidate) {
-          // addLog("生成 ICE candidate", "info");
         }
       });
 
@@ -255,9 +252,6 @@ export default {
       });
 
       try {
-        // 创建PeerConnection
-        // this.player = createPeerConnection();
-
         // 添加Transceiver用于接收视频
         this.player.addTransceiver("video", {
           direction: "recvonly",
@@ -289,12 +283,9 @@ export default {
             this.player.addEventListener("icegatheringstatechange", checkState);
           }
         });
-
         // 发送SDP到WHEP服务器
         const sdpOffer = this.player.localDescription.sdp;
-        console.log(url, videoId)
-
-        const response = await fetch('http://10.168.1.232:8889/38/SIS-1766510219282/whep', {
+        const response = await fetch(url, {
           method: "POST",
           headers: {
             "Content-Type": "application/sdp",
@@ -312,7 +303,6 @@ export default {
           sdp: sdpAnswer,
         });
       } catch (error) {
-
         if (this.player) {
           this.player.close();
           this.player = null;
@@ -447,6 +437,10 @@ export default {
         if (this.reconnectTimer) {
           clearTimeout(this.reconnectTimer)
           this.reconnectTimer = null
+          if (this.player) {
+            this.player.close()
+            this.player = null
+          }
         }
       }
     },
@@ -460,6 +454,7 @@ export default {
       videoDom.pause()
       if (this.player) {
         this.player.pc.close()
+        this.player.close()
         this.player = null
       }
     },

src/views/livePreview/components/videoBox.vue

@@ -25,7 +25,6 @@
         @dragend="handleDragEnd($event)"
       >
         <div class="video-wrapper">
-<!--          :video-src='active===1 ? item.mainUrl : item.auxiliaryUrl'-->
           <webrtc-player
             v-if="(item.code === 'H264' || item.code !== 'H265') && item.mainUrl"
             :video-src="active===1 ? item.mainUrl : item.auxiliaryUrl"
@@ -35,7 +34,6 @@
             @destroy="close"
             class="player-instance"
           />
-<!--          :video-src='active===1 ? item.mainUrl : item.auxiliaryUrl'-->
           <jessibucaBox
             v-else-if="item.code === 'H265' && item.mainUrl"
             :video-src="active===1 ? item.mainUrl : item.auxiliaryUrl"
@@ -45,29 +43,6 @@
             @destroy="close"
             class="player-instance"
           ></jessibucaBox>
-<!--          <video-player-->
-<!--            v-else-if="item.hls"-->
-<!--            class="video-player-box"-->
-<!--            style="width: 100%; height: 90%"-->
-<!--            ref="videoPlayer"-->
-<!--            :options="{-->
-<!--            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度-->
-<!--            autoplay: true, // 禁止自动播放（浏览器限制）-->
-<!--            muted: true, // 静音-->
-<!--            controls: true, // 显示控制栏-->
-<!--            preload: 'auto',-->
-<!--            techOrder: ['html5', 'hls'], // 优先用 HLS 插件解析-->
-<!--            width: '100%',-->
-<!--            height: '100%',-->
-<!--            sources: [-->
-<!--              {-->
-<!--                type: 'application/x-mpegURL', // m3u8 对应的 MIME 类型-->
-<!--                src:  'http://10.168.1.232:8889/38/SIS-1766510219282/whep'-->
-<!--              }-->
-<!--            ],-->
-<!--            notSupportedMessage: '当前浏览器不支持播放此视频'-->
-<!--          }"-->
-<!--          />-->
 
           <div v-else class="empty-state">
             <i class="el-icon-video-camera"></i>

src/views/livePreview/index.vue

@@ -1814,10 +1814,10 @@ export default {
       const url = `${configPage.httpServe}/sse/stream`
       this.eventSource = new EventSource(url)
       this.eventSource.onmessage = (event) => {
-        const data = JSON.parse(event.data)
+        const data = [event.data] // JSON.parse(event.data)
         if (Array.isArray(data)) {
           console.log('jsonData is an array.')
-          console.log(data)
+          console.log(event, data)
           this.cameraList = data
           const children = data.map((item) => ({
             ...item,
@@ -1831,7 +1831,7 @@ export default {
             this.onlinePresenceList.forEach((item) => {
               if (item.onlinePresence === '0') {
                 let node = children.find((child) => child.id === item.id)
-                if (node.onlinePresence === '1') {
+                if (node?.onlinePresence === '1') {
                   // 遍历boxList
                   this.boxList.forEach((box) => {
                     if (box.cameraId === item.id) {