播放按钮添加loading， 修复拉流代理播放后再次点播失败

src/main/java/com/genersoft/iot/vmp/media/bean/MediaInfo.java

@@ -186,6 +186,7 @@ public class MediaInfo {
         mediaInfo.setOriginType(param.getOriginType());
         mediaInfo.setOriginTypeStr(param.getOriginTypeStr());
         mediaInfo.setOriginUrl(param.getOriginUrl());
+        mediaInfo.setOriginUrl(param.getOriginUrl());
         mediaInfo.setAliveSecond(param.getAliveSecond());
         mediaInfo.setBytesSpeed(param.getBytesSpeed());
         mediaInfo.setParamMap(param.getParamMap());

src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMMediaNodeServerService.java

@@ -463,7 +463,7 @@ public class ZLMMediaNodeServerService implements IMediaNodeServerService {
         }
         MediaInfo mediaInfo = getMediaInfo(mediaServer, streamProxy.getApp(), streamProxy.getStream());
         if (mediaInfo != null) {
-            if (mediaInfo.getOriginUrl().equals(streamProxy.getSrcUrl())) {
+            if (mediaInfo.getOriginUrl() != null && mediaInfo.getOriginUrl().equals(streamProxy.getSrcUrl())) {
                 log.info("[启动拉流代理] 已存在， 直接返回， app： {}, stream: {}", mediaInfo.getApp(), streamProxy.getStream());
                 return getStreamInfoByAppAndStream(mediaServer, streamProxy.getApp(), streamProxy.getStream(), null, null, true);
             }

web_src/src/components/StreamProxyList.vue

@@ -76,7 +76,7 @@
         <el-table-column prop="createTime" label="创建时间"  min-width="150" show-overflow-tooltip/>
         <el-table-column label="操作" width="400"  fixed="right">
           <template v-slot:default="scope">
-            <el-button size="medium" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放</el-button>
+            <el-button size="medium" :loading="scope.row.playLoading" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放</el-button>
             <el-divider direction="vertical"></el-divider>
             <el-button size="medium" icon="el-icon-switch-button" style="color: #f56c6c"  type="text" v-if="scope.row.pulling" @click="stopPlay(scope.row)">停止</el-button>
             <el-divider direction="vertical" v-if="scope.row.pulling" ></el-divider>
@@ -134,7 +134,6 @@
 				currentPage:1,
 				count:15,
 				total:0,
-        startBtnLoading: false,
         streamProxy: null,
         searchSrt: "",
         mediaServerId: "",
@@ -163,9 +162,6 @@
           this.mediaServerList = data.data;
         })
 			},
-      stopUpdateList: function (){
-        window.clearInterval(this.updateLooper)
-      },
       startUpdateList: function (){
         this.updateLooper = setInterval(()=>{
           if (!this.streamProxy) {
@@ -198,7 +194,7 @@
           if (res.data.code === 0) {
             that.total = res.data.data.total;
             for (let i = 0; i < res.data.data.list.length; i++) {
-              res.data.data.list[i]["startBtnLoading"] = false;
+              res.data.data.list[i]["playLoading"] = false;
             }
             that.streamProxyList = res.data.data.list;
           }
@@ -267,21 +263,21 @@
         this.streamProxy = null
 			},
 			play: function(row){
-				let that = this;
+        row.playLoading = true;
 				this.$axios({
 					method: 'get',
 					url:`/api/proxy/start`,
 					params: {
 						id: row.id,
 					}
-				}).then(function (res) {
+				}).then((res)=> {
 					if (res.data.code === 0) {
-            that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
+            this.$refs.devicePlayer.openDialog("streamPlay", null, null, {
               streamInfo: res.data.data,
               hasAudio: true
             });
           }else {
-            that.$message({
+            this.$message({
               showClose: true,
               message: "获取地址失败：" + res.data.msg,
               type: "error",
@@ -290,7 +286,9 @@
 
 				}).catch(function (error) {
 					console.log(error);
-				});
+				}).finally(()=>{
+          row.playLoading = false;
+        })
 
 			},
       stopPlay: function(row){
@@ -341,54 +339,6 @@
         }).catch(() => {
         });
 			},
-			start: function(row){
-        this.stopUpdateList()
-        this.$set(row, 'startBtnLoading', true)
-				this.$axios({
-					method: 'get',
-					url:`/api/proxy/start`,
-					params: {
-						app: row.app,
-						stream: row.stream
-					}
-				}).then((res)=> {
-				  if (res.data.code === 0){
-            this.initData()
-          }else {
-            this.$message({
-              showClose: true,
-              message: "启动失败，请检查地址是否可用！",
-              type: "error",
-            });
-          }
-          this.$set(row, 'startBtnLoading', false)
-          this.startUpdateList()
-				}).catch((error)=> {
-					console.log(error);
-          this.$message({
-            showClose: true,
-            message: "启动失败，请检查地址是否可用！",
-            type: "error",
-          });
-          this.$set(row, 'startBtnLoading', false)
-          this.startUpdateList()
-				});
-			},
-			stop: function(row){
-				let that = this;
-				this.$axios({
-					method: 'get',
-					url:`/api/proxy/stop`,
-					params: {
-						app: row.app,
-						stream: row.stream
-					}
-				}).then(function (res) {
-					that.initData()
-				}).catch(function (error) {
-					console.log(error);
-				});
-			},
       refresh: function (){
         this.initData();
       }

web_src/src/components/StreamPushList.vue

@@ -78,7 +78,7 @@
 
         <el-table-column label="操作" min-width="360"  fixed="right">
           <template v-slot:default="scope">
-            <el-button size="medium" icon="el-icon-video-play"@click="playPush(scope.row)" type="text">播放
+            <el-button size="medium" :loading="scope.row.playLoading" icon="el-icon-video-play" @click="playPush(scope.row)" type="text">播放
             </el-button>
             <el-divider direction="vertical"></el-divider>
             <el-button size="medium" icon="el-icon-delete" type="text" @click="deletePush(scope.row.id)" style="color: #f56c6c" >删除</el-button>
@@ -194,6 +194,7 @@ export default {
             that.pushList = res.data.data.list;
             that.pushList.forEach(e => {
               that.$set(e, "location", "");
+              that.$set(e, "playLoading", false);
               if (e.gbLongitude && e.gbLatitude) {
                 that.$set(e, "location", e.gbLongitude + "," + e.gbLatitude);
               }
@@ -208,29 +209,28 @@ export default {
     },
 
     playPush: function (row) {
-      let that = this;
+      row.playLoading = true;
-      this.getListLoading = true;
       this.$axios({
         method: 'get',
         url: '/api/push/start',
         params: {
           id: row.id
         }
-      }).then(function (res) {
+      }).then((res) =>{
-        that.getListLoading = false;
         if (res.data.code === 0 ) {
-          that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
+          this.$refs.devicePlayer.openDialog("streamPlay", null, null, {
             streamInfo: res.data.data,
             hasAudio: true
           });
         }else {
-          that.$message.error(res.data.msg);
+          this.$message.error(res.data.msg);
         }
 
       }).catch(function (error) {
         console.error(error);
-        that.getListLoading = false;
+      }).finally(()=>{
-      });
+        row.playLoading = false;
+      })
     },
     deletePush: function (id) {
       this.$confirm(`确定删除通道?`, '提示', {

web_src/src/components/channelList.vue

@@ -108,7 +108,7 @@
         <el-table-column label="操作" min-width="340" fixed="right">
           <template v-slot:default="scope">
             <el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play"
-                       type="text" @click="sendDevicePush(scope.row)">播放
+                       type="text" :loading="scope.row.playLoading" @click="sendDevicePush(scope.row)">播放
             </el-button>
             <el-button size="medium" v-bind:disabled="device == null || device.online === 0"
                        icon="el-icon-switch-button"
@@ -201,7 +201,6 @@ export default {
       count: 15,
       total: 0,
       beforeUrl: "/deviceList",
-      isLoging: false,
       showTree: false,
       editId: null,
       loadSnap: {},
@@ -277,6 +276,7 @@ export default {
           that.deviceChannelList = res.data.data.list;
           that.deviceChannelList.forEach(e => {
             e.ptzType = e.ptzType + "";
+            that.$set(e, "playLoading", false);
           });
           // 防止出现表格错位
           that.$nextTick(() => {
@@ -292,44 +292,42 @@ export default {
     //通知设备上传媒体流
     sendDevicePush: function (itemData) {
       let deviceId = this.deviceId;
-      this.isLoging = true;
       let channelId = itemData.deviceId;
+      itemData.playLoading = true;
       console.log("通知设备推流1：" + deviceId + " : " + channelId);
-      let that = this;
       this.$axios({
         method: 'get',
         url: '/api/play/start/' + deviceId + '/' + channelId,
         params: {
           isSubStream: this.isSubStream
         }
-      }).then(function (res) {
+      }).then((res) =>{
         console.log(res)
-        that.isLoging = false;
         if (res.data.code === 0) {
 
           setTimeout(() => {
-
             let snapId = deviceId + "_" + channelId;
-            that.loadSnap[deviceId + channelId] = 0;
+            this.loadSnap[deviceId + channelId] = 0;
-            that.getSnapErrorEvent(snapId)
+            this.getSnapErrorEvent(snapId)
           }, 5000)
           itemData.streamId = res.data.data.stream;
-          that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
+          this.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
             streamInfo: res.data.data,
             hasAudio: itemData.hasAudio
           });
           setTimeout(() => {
-            that.initData();
+            this.initData();
           }, 1000)
 
         } else {
-          that.$message.error(res.data.msg);
+          this.$message.error(res.data.msg);
         }
       }).catch(function (e) {
         console.error(e)
-        that.isLoging = false;
         // that.$message.error("请求超时");
-      });
+      }).finally(()=>{
+        itemData.playLoading = false;
+      })
     },
     moreClick: function (command, itemData) {
       if (command === "records") {