优化录像下载，避免wvp代理使用双份流量

648540858
1 parent 0199676a
Showing 3 changed files with 23 additions and 13 deletions
web_src/src/components/CloudRecord.vue
web_src/src/components/CloudRecordDetail.vue
web_src/src/components/dialog/devicePlayer.vue
@@ -6,7 +6,9 @@
 			</el-header>
 			<el-main>
         <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-          <span style="font-size: 1rem; font-weight: bold;">云端录像</span>
+          <span v-if="!recordDetail" >云端录像</span>
+          <el-page-header v-if="recordDetail"  @back="backToList" content="云端录像">
+          </el-page-header>
           <div style="position: absolute; right: 5rem; top: 0.3rem;">
             节点选择:
             <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail">
@@ -20,7 +22,6 @@
           </div>
           <div style="position: absolute; right: 1rem; top: 0.3rem;">
             <el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button>
-            <el-button v-if="recordDetail" icon="el-icon-arrow-left" circle size="mini" @click="backToList()"></el-button>
           </div>
         </div>
         <div v-if="!recordDetail">
@@ -53,7 +54,7 @@
             :total="total">
           </el-pagination>
         </div>
-        <cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" ></cloud-record-detail>
+        <cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" :mediaServerPath="mediaServerPath" ></cloud-record-detail>
 			</el-main>
 		</el-container>
 	</div>
@@ -72,6 +73,7 @@
 			return {
         mediaServerList: [], // 滅体节点列表
         mediaServerId: null, // 媒体服务
+        mediaServerPath: null, // 媒体服务地址
         recordList: [], // 设备列表
         chooseRecord: null, // 媒体服务
  
@@ -115,6 +117,11 @@
           that.mediaServerList = data.data;
           if (that.mediaServerList.length > 0) {
             that.mediaServerId = that.mediaServerList[0].id
+            let port = that.mediaServerList[0].httpPort;
+            if (location.protocol === "https:" && that.mediaServerList[0].httpSSlPort) {
+              port = that.mediaServerList[0].httpSSlPort
+            }
+            that.mediaServerPath = location.protocol + "//" + that.mediaServerList[0].streamIp + ":" + port
             that.getRecordList();
           }
         })
@@ -15,7 +15,8 @@
                   <i class="el-icon-video-camera"  ></i>
                   {{ item.substring(0,17)}}
                 </el-tag>
-                <a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;" :href="`${basePath}/${mediaServerId}/record/${recordFile.app}/${recordFile.stream}/${chooseDate}/${item}`" download />
+<!--                <a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;" :href="`${basePath}/${mediaServerId}/record/${recordFile.app}/${recordFile.stream}/${chooseDate}/${item}`" download />-->
+                <a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;" :href="`${basePath}/download.html?url=${recordFile.app}/${recordFile.stream}/${chooseDate}/${item}`" target="_blank" />
               </li>
             </ul>
           </div>
@@ -75,7 +76,7 @@
               <li class="task-list-item" v-for="item in taskListEnded">
                 <div class="task-list-item-box" style="height: 2rem;line-height: 2rem;">
                   <span>{{ item.startTime.substr(10) }}-{{item.endTime.substr(10)}}</span>
-                  <a class="el-icon-download download-btn" :href="basePath + '/' + item.recordFile" download >
+                  <a class="el-icon-download download-btn" :href="basePath  + '/download.html?url=../' + item.recordFile" target="_blank">
                   </a>
                 </div>
               </li>
@@ -111,10 +112,10 @@
 		components: {
 			uiHeader, player
 		},
-    props: ['recordFile', 'mediaServerId', 'dateFiles'],
+    props: ['recordFile', 'mediaServerId', 'dateFiles', 'mediaServerPath'],
 		data() {
 			return {
-        basePath: process.env.NODE_ENV === 'development'?`${location.origin}/debug/zlm/${this.mediaServerId}`:`${location.origin}/zlm/${this.mediaServerId}`,
+        basePath: `${this.mediaServerPath}/record`,
 			  dateFilesObj: [],
 			  detailFiles: [],
         chooseDate: null,
@@ -264,7 +265,7 @@
           this.videoUrl = "";
         }else {
 			    // TODO 控制列表滚动条
-          this.videoUrl = `${this.basePath}/${this.mediaServerId}/record/${this.recordFile.app}/${this.recordFile.stream}/${this.chooseDate}/${this.choosedFile}`
+          this.videoUrl = `${this.basePath}/${this.recordFile.app}/${this.recordFile.stream}/${this.chooseDate}/${this.choosedFile}`
           console.log(this.videoUrl)
         }
  
@@ -287,11 +287,13 @@ export default {
             // return `http://${baseZlmApi}/${streamInfo.app}/${streamInfo.streamId}.flv`;
             if (location.protocol === "https:") {
               if (streamInfo.wss_flv === null) {
-                this.$message({
-                  showClose: true,
-                  message: '媒体服务器未配置ssl端口',
-                  type: 'error'
-                });
+                console.error("媒体服务器未配置ssl端口, 使用http端口")
+                // this.$message({
+                //   showClose: true,
+                //   message: '媒体服务器未配置ssl端口, ',
+                //   type: 'error'
+                // });
+                return streamInfo.ws_flv
               }else {
                 return streamInfo.wss_flv;
               }