fix: 录像回放播放问题修复

1. 优化rtc播放器的播放逻辑
2. 切换播放器导致无法暂停的问题修复

web_src/src/components/GBRecordDetail.vue

@@ -40,14 +40,14 @@
       </el-aside>
       <el-main style="padding-bottom: 10px;">
         <div class="playBox" :style="playerStyle">
-          <player ref="recordVideoPlayer"
+          <h265-web-jessibuca ref="jessibuca"
                   :videoUrl="videoUrl"
                   :error="videoError"
                   :message="videoError"
                   :hasAudio="hasAudio"
                   style="max-height: 100%"
                   v-if="activePlayer === 'jessibuca'"
-                  fluent autoplay live></player>
+                  fluent autoplay live></h265-web-jessibuca>
           <rtc-player
               v-if="activePlayer === 'webrtc'"
               ref="webrtc"
@@ -68,8 +68,8 @@
               <el-radio-button
                   v-for="(item,i) in playerList"
                   :key="item.key + i"
-                  :label="$t(`video.play.${item.key}.title`)">
-                {{ $t(`video.play.${item.key}.title`) }}
+                  :label="item.key">
+                {{ $t(item.key) }}
               </el-radio-button>
             </el-radio-group>
 
@@ -156,7 +156,6 @@ const playList = [
     text: "webrtc 播放器",
     description: "延迟较低的播放器,需要浏览器支持",
     support: checkWebrtcHevcSupport()? ['h264', 'h265'] : ['h264'],
-    audioSupport: ['opus', 'pcma', 'pcmu'],
     disable: false
   },
   {
@@ -164,10 +163,10 @@ const playList = [
     text: "265 jessibuca播放器",
     description: "用于播放265格式视频",
     support: ['h264', 'h265'],
-    audioSupport: ['aac'],
     disable: false
   },
 ];
+
 const playerProtocol = {
   webrtc: ["rtc", "rtcs"],
   jessibuca: ["ws_flv", "wss_flv"],
@@ -181,9 +180,11 @@ for (let i = 0 ; i < 24 ; i++)
 export default {
   name: 'app',
   components: {
-    H265WebJs, h265WebJessibuca, mpegTsVideo,
+    H265WebJs,
+    h265WebJessibuca,
+    mpegTsVideo,
     RtcPlayer,
-    uiHeader, player, recordDownload
+    recordDownload
   },
   data() {
     return {
@@ -293,6 +294,7 @@ export default {
           message: res.data.msg,
           type: "error",
         });
+        return;
       }
       // 创建一个set集合
       let extSet = new Set();
@@ -442,7 +444,10 @@ export default {
       }
     },
     stopDownloadRecord: function (callback) {
-      this.$refs["recordVideoPlayer"].pause();
+      if (this.activePlayer && this.$refs[this.activePlayer])
+      {
+        this.$refs["recordVideoPlayer"].pause();
+      }
       this.videoUrl = '';
       this.$axios.axios({
         method: 'get',
@@ -452,7 +457,14 @@ export default {
       });
     },
     stopPlayRecord: function (callback) {
-      this.$refs["recordVideoPlayer"].pause();
+      if (this.activePlayer && this.$refs[this.activePlayer])
+      {
+        this.$refs[this.activePlayer].pause();
+      }
+      else {
+        // 全部尝试停止
+      }
+
       this.videoUrl = '';
       this.$axios.axios({
         method: 'get',
@@ -568,25 +580,19 @@ export default {
     },
     findPlayer(videoType, audioType)
     {
-      // 先尝试寻找到所有支持对应协议的播放器
-      let arr = this.playerList.filter(item => {
-        return item.support.includes(videoType)
-      })
-      console.log(arr);
-      console.log(arr);
-      console.log(arr);
-      console.log(arr);
-      // 从中找到同时支持
-      let res_player = arr.find(item => {
+      console.log(`search player ${videoType}, ${audioType}`)
+      return playList.find(item => {
         // 判断播放器是否同时支持 视频与音频
-        return item.audioSupport.includes(audioType);
+        if (item.support.includes(videoType) &&
+            item.support.includes(audioType))
+        {
+          return true;
+        }
+        else if (item.support.includes(videoType))
+        {
+          return true;
+        }
       })
-      if (!res_player)
-      {
-        res_player = arr[0]
-      }
-
-      return res_player;
     },
     async queryMediaInfo(isFirst) {
       let info = this.streamInfo
@@ -683,14 +689,18 @@ export default {
     webrtcEventExecute(type, e) {
       // 防抖,防止多次触发
       if (type === webrtcEvent.apiFail.code) {
-        this.$notify.error({
-          title: this.$t('notification.noStreamInfo'),
-          dangerouslyUseHTMLString: true,
-          message: this.$t('notification.zlmFailMsg',  {msg: e.message, url: this.videoUrl}),
-          duration: 0
-        });
-        this.videoError = true;
-        this.videoUrl = '';
+        if (this.videoUrl){
+
+          this.$notify.error({
+            title: this.$t('notification.noStreamInfo'),
+            dangerouslyUseHTMLString: true,
+            message: this.$t('notification.zlmFailMsg',  {msg: e.message, url: this.videoUrl}),
+            duration: 0
+          });
+          this.videoError = true;
+          this.videoUrl = '';
+        }
+
 
       } else if (type === webrtcEvent.played.code) {
         this.$message.success(this.$t('notification.playSuccess'));

web_src/src/components/com/livePlayBox.vue

@@ -295,12 +295,14 @@ export default {
     webrtcEventExecute(type, e) {
       // 防抖,防止多次触发
       if (type === webrtcEvent.apiFail.code) {
-        this.$notify.error({
-          title: this.$t('notification.noStreamInfo'),
-          dangerouslyUseHTMLString: true,
-          message: this.$t('notification.zlmFailMsg',  {msg: e.message, url: this.videoUrl}),
-          duration: 0
-        });
+        if (this.videoUrl != '') {
+          this.$notify.error({
+            title: this.$t('notification.noStreamInfo'),
+            dangerouslyUseHTMLString: true,
+            message: this.$t('notification.zlmFailMsg', {msg: e.message, url: this.videoUrl}),
+            duration: 0
+          });
+        }
         this.videoError = true;
         this.videoUrl = '';
 

web_src/src/components/dialog/rtcPlayer.vue

@@ -110,6 +110,11 @@ export default {
     },
     play(url, hasAudio, fps, enableDebug = false) {
       // this.enableDebug = enableDebug;
+
+      if (!url) {
+        console.log("播放地址为空, 不进行播放尝试")
+        return;
+      }
       if (enableDebug) {
         console.log("播放地址为: " + url);
       }