Browse Source

fix: 拉流播放功能修复
1. 重新拉流自动关闭窗口
2. 自动根据视频格式切换265播放器功能修复

kindring 1 year ago
parent
commit
616bb41235
2 changed files with 39 additions and 34 deletions
  1. 2 1
      web_src/src/components/channelList.vue
  2. 37 33
      web_src/src/components/dialog/newPlay.vue

+ 2 - 1
web_src/src/components/channelList.vue

@@ -291,13 +291,14 @@ export default {
     //通知设备上传媒体流
     async sendDevicePush(itemData) {
       let deviceId = this.deviceId;
+      this.showPlayDialog = false;
       this.isLoging = true;
+
       let channelId = itemData.channelId;
       let isUsePs = this.isUsePs ? 1 : 0;
       let pushUrl = `/api/play/start/${deviceId}/${channelId}?isUsePs=${isUsePs}`
       console.log(pushUrl);
       console.log("通知设备推流1:" + deviceId + " : " + channelId);
-      let that = this;
       let [err, res] = await handle(this.$axios.axios({
         method: 'get',
         url: pushUrl

+ 37 - 33
web_src/src/components/dialog/newPlay.vue

@@ -132,7 +132,7 @@ export default {
     },
     loadH265Player(){
       let h265Player = this.playerList.find(item=>{
-        item.support.includes('h265')
+        return item.support.includes('h265')
       });
       return h265Player;
     },
@@ -142,41 +142,17 @@ export default {
       }
       console.log(this.info);
       let streamInfo = this.info;
-      if(streamInfo.tracks){
-          // 根据我们摄像头默认fps值来进行配置播放器
-          let fps = 15;
-          let isH265 = false;
-          for (const tracksElement of streamInfo.tracks) {
-              if(tracksElement.fps){
-                  fps = tracksElement.fps;
-                  break;
-              }
-              if(tracksElement.codec_id_name && tracksElement.codec_id_name.incudes('h265')){
-                  isH265 = true;
-                  break;
-              }
-          }
-          this.fps = fps;
-          if(isFirst){
-            if(isH265){
-              let h265Player = this.loadH265Player();
-              console.log("265视频流,切换为默认播放器");
-              this.activePlayer = h265Player.key;
-            }else {
-              console.log("使用默认播放器");
-              this.activePlayer = this.playerList[0].key;
-            }
-          }
-          // 判断是否为265视频
-      }
+      this.isLoading = true;
       this.isLoading = false;
 
-      this.playFromStreamInfo(false, streamInfo);
+      this.playFromStreamInfo(false, streamInfo, isFirst);
     },
-    playFromStreamInfo(realHasAudio, streamInfo) {
+    async playFromStreamInfo(realHasAudio, streamInfo, isFirst) {
         this.showVideoDialog = true;
         console.log(realHasAudio);
         // this.hasAudio = realHasAudio && this.hasaudio;
+        // 查询媒体信息,用于切换播放器
+        await this.getMediaInfo(isFirst);
         this.videoUrl = this.getUrlByStreamInfo(streamInfo);
         console.log(this.videoUrl);
         this.$nextTick(()=>{
@@ -186,7 +162,7 @@ export default {
                 this.fps,
                 this.enableDebug
             );
-          this.getMediaInfo();
+
         });
     },
     getUrlByStreamInfo(streamInfo){
@@ -211,7 +187,7 @@ export default {
     videoError: function (e) {
         console.log("播放器错误:" + JSON.stringify(e));
     },
-    async getMediaInfo(){
+    async getMediaInfo(isFirst){
       let info = this.info
       let  url = `/zlm/${info.mediaServerId}/index/api/getMediaInfo`
       url += `?vhost=__defaultVhost__`
@@ -240,10 +216,37 @@ export default {
       }
       if (res.data.tracks) {
         this.tracks = res.data.tracks;
+        if(this.tracks){
+          console.log(`---------tracks----------`)
+            // 根据我们摄像头默认fps值来进行配置播放器
+            let fps = 15;
+            let isH265 = false;
+            for (const tracksElement of this.tracks) {
+              console.log(tracksElement);
+              if(tracksElement.fps){
+                  fps = tracksElement.fps;
+              }
+
+              console.log(`${tracksElement.codec_id_name}:code ${tracksElement.codec_id_name?'is h265':'not h265'}`)
+              if(tracksElement.codec_id_name && tracksElement.codec_id_name.includes("265")){
+                isH265 = true;
+              }
+            }
+            this.fps = fps;
+            if(isFirst){
+              if(isH265){
+                let h265Player = this.loadH265Player();
+                console.log("265视频流,切换为默认播放器");
+                this.activePlayer = h265Player.key;
+              }else {
+                console.log("使用默认播放器");
+                this.activePlayer = this.playerList[0].key;
+              }
+            }
+        }
       }else{
         console.log('没有编码信息');
       }
-
     },
     webrtcPlayEventHandle(type,e){
       // 添加同类型防抖
@@ -311,6 +314,7 @@ export default {
       height="80%"
       :close-on-click-modal="false"
       :visible.sync="dialogShow"
+      v-loading="isLoading"
     >
       <!--      标题-->
       <template v-slot:title>