优化国标录像下载，添加进度条以及自动合并文件下载，需要结合新版assist服务使用。
This commit is contained in:
648540858
@@ -175,6 +175,7 @@
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<recordDownload ref="recordDownload"></recordDownload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -183,15 +184,15 @@
|
||||
// import LivePlayer from '@liveqing/liveplayer'
|
||||
// import player from '../dialog/easyPlayer.vue'
|
||||
import player from '../dialog/jessibuca.vue'
|
||||
import recordDownload from '../dialog/recordDownload.vue'
|
||||
export default {
|
||||
name: 'devicePlayer',
|
||||
props: {},
|
||||
components: {
|
||||
player,
|
||||
player,recordDownload,
|
||||
},
|
||||
computed: {
|
||||
getPlayerShared: function () {
|
||||
|
||||
return {
|
||||
sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
|
||||
sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
|
||||
@@ -250,7 +251,7 @@ export default {
|
||||
that.tracks = [];
|
||||
that.tracksLoading = true;
|
||||
that.tracksNotLoaded = false;
|
||||
if (tab.name == "codec") {
|
||||
if (tab.name === "codec") {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/zlm/' +this.mediaServerId+ '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app='+ this.app +'&stream='+ this.streamId
|
||||
@@ -340,7 +341,7 @@ export default {
|
||||
this.$refs.videoPlayer.pause()
|
||||
that.$axios({
|
||||
method: 'post',
|
||||
url: '/api/play/convert/' + that.streamId
|
||||
url: '/api/gb_record/convert/' + that.streamId
|
||||
}).then(function (res) {
|
||||
if (res.data.code == 0) {
|
||||
that.convertKey = res.data.key;
|
||||
@@ -474,8 +475,8 @@ export default {
|
||||
console.log(this.seekTime)
|
||||
if (that.streamId != "") {
|
||||
that.stopPlayRecord(function () {
|
||||
that.streamId = "",
|
||||
that.playRecord(row);
|
||||
that.streamId = "";
|
||||
that.playRecord(row);
|
||||
})
|
||||
} else {
|
||||
this.$axios({
|
||||
@@ -506,22 +507,36 @@ export default {
|
||||
downloadRecord: function (row) {
|
||||
let that = this;
|
||||
if (that.streamId != "") {
|
||||
that.stopDownloadRecord(function () {
|
||||
that.streamId = "",
|
||||
that.downloadRecord(row);
|
||||
that.stopDownloadRecord(function (res) {
|
||||
if (res.code == 0) {
|
||||
that.streamId = "";
|
||||
that.downloadRecord(row);
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
} else {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
|
||||
url: '/api/gb_record/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
|
||||
row.endTime + '&downloadSpeed=4'
|
||||
}).then(function (res) {
|
||||
var streamInfo = res.data;
|
||||
that.app = streamInfo.app;
|
||||
that.streamId = streamInfo.stream;
|
||||
that.mediaServerId = streamInfo.mediaServerId;
|
||||
that.videoUrl = that.getUrlByStreamInfo(streamInfo);
|
||||
that.recordPlay = true;
|
||||
if (res.data.code == 0) {
|
||||
let streamInfo = res.data.data;
|
||||
that.recordPlay = false;
|
||||
that.$refs.recordDownload.openDialog(that.deviceId, that.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId);
|
||||
}else {
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -530,9 +545,9 @@ export default {
|
||||
this.videoUrl = '';
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.streamId
|
||||
}).then(function (res) {
|
||||
if (callback) callback()
|
||||
url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.streamId
|
||||
}).then((res)=> {
|
||||
if (callback) callback(res)
|
||||
});
|
||||
},
|
||||
ptzCamera: function (command) {
|
||||
|
||||
195
web_src/src/components/dialog/recordDownload.vue
Normal file
195
web_src/src/components/dialog/recordDownload.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div id="recordDownload" >
|
||||
<el-dialog :title="title" v-if="showDialog" width="45rem" :append-to-body="true" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()" center>
|
||||
<el-row>
|
||||
<el-col :span="18" style="padding-top: 7px;">
|
||||
<el-progress :percentage="percentage"></el-progress>
|
||||
</el-col>
|
||||
<el-col :span="6" >
|
||||
<!-- <el-dropdown size="mini" title="播放倍速" style="margin-left: 1px;" @command="gbScale">-->
|
||||
<!-- <el-button-group>-->
|
||||
<!-- <el-button size="mini" style="width: 100%">-->
|
||||
<!-- {{scale}}倍速 <i class="el-icon-arrow-down el-icon--right"></i>-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-button-group>-->
|
||||
<!-- <el-dropdown-menu slot="dropdown">-->
|
||||
<!-- <el-dropdown-item command="1">1倍速</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item command="2">2倍速</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item command="4">4倍速</el-dropdown-item>-->
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </el-dropdown>-->
|
||||
<el-button icon="el-icon-download" v-if="percentage < 100" size="mini" title="点击下载可将以缓存部分下载到本地" @click="download()">停止缓存并下载</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
name: 'recordDownload',
|
||||
created() {
|
||||
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "四倍速下载中...",
|
||||
deviceId: "",
|
||||
channelId: "",
|
||||
app: "",
|
||||
stream: "",
|
||||
mediaServerId: "",
|
||||
showDialog: false,
|
||||
scale: 1,
|
||||
percentage: 0.00,
|
||||
streamInfo: null,
|
||||
taskId: null,
|
||||
getProgressRun: false,
|
||||
getProgressForFileRun: false,
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDialog: function (deviceId, channelId, app, stream, mediaServerId) {
|
||||
this.deviceId = deviceId;
|
||||
this.channelId = channelId;
|
||||
this.app = app;
|
||||
this.stream = stream;
|
||||
this.mediaServerId = mediaServerId;
|
||||
this.showDialog = true;
|
||||
this.getProgressRun = true;
|
||||
this.percentage = 0.0;
|
||||
this.getProgressTimer()
|
||||
},
|
||||
getProgressTimer(){
|
||||
if (!this.getProgressRun) {
|
||||
return;
|
||||
}
|
||||
if (this.percentage == 100 ) {
|
||||
this.getFileDownload();
|
||||
return;
|
||||
}
|
||||
setTimeout( ()=>{
|
||||
if (!this.showDialog) return;
|
||||
this.getProgress(this.getProgressTimer())
|
||||
}, 5000)
|
||||
},
|
||||
getProgress: function (callback){
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/gb_record/download/progress/${this.deviceId}/${this.channelId}/${this.stream}`
|
||||
}).then((res)=> {
|
||||
console.log(res)
|
||||
console.log(res.data.progress)
|
||||
this.streamInfo = res.data;
|
||||
if (parseFloat(res.data.progress) == 1) {
|
||||
this.percentage = 100;
|
||||
}else {
|
||||
this.percentage = (res.data.progress*100).toFixed(1);
|
||||
}
|
||||
if (callback)callback();
|
||||
}).catch((e) =>{
|
||||
|
||||
});
|
||||
},
|
||||
close: function (){
|
||||
if (this.streamInfo.progress < 100) {
|
||||
this.stopDownloadRecord();
|
||||
}
|
||||
this.showDialog=false;
|
||||
this.getProgressRun = false;
|
||||
this.getProgressForFileRun = false;
|
||||
},
|
||||
gbScale: function (scale){
|
||||
this.scale = scale;
|
||||
},
|
||||
download: function (){
|
||||
this.getProgressRun = false;
|
||||
if (this.streamInfo != null ) {
|
||||
if (this.streamInfo.progress < 1) {
|
||||
// 发送停止缓存
|
||||
this.stopDownloadRecord((res)=>{
|
||||
this.getFileDownload()
|
||||
})
|
||||
}else {
|
||||
this.getFileDownload()
|
||||
}
|
||||
}
|
||||
},
|
||||
stopDownloadRecord: function (callback) {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.stream
|
||||
}).then((res)=> {
|
||||
if (callback) callback(res)
|
||||
});
|
||||
},
|
||||
getFileDownload: function (){
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/add`,
|
||||
params: {
|
||||
app: this.app,
|
||||
stream: this.stream,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
}
|
||||
}).then((res) =>{
|
||||
if (res.data.code === 0 && res.data.msg === "success") {
|
||||
// 查询进度
|
||||
this.title = "录像文件处理中..."
|
||||
this.taskId = res.data.data;
|
||||
this.percentage = 0.0;
|
||||
this.getProgressForFileRun = true;
|
||||
this.getProgressForFileTimer();
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
getProgressForFileTimer: function (){
|
||||
if (!this.getProgressForFileRun || this.percentage == 100) {
|
||||
return;
|
||||
}
|
||||
setTimeout( ()=>{
|
||||
if (!this.showDialog) return;
|
||||
this.getProgressForFile(this.getProgressForFileTimer())
|
||||
}, 1000)
|
||||
},
|
||||
getProgressForFile: function (callback){
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/list`,
|
||||
params: {
|
||||
app: this.app,
|
||||
stream: this.stream,
|
||||
taskId: this.taskId,
|
||||
isEnd: true,
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.percentage = parseFloat(res.data.data.percentage)*100
|
||||
if (res.data.data[0].percentage === '1') {
|
||||
this.getProgressForFileRun = false;
|
||||
window.open(res.data.data[0].downloadFile)
|
||||
this.close();
|
||||
}else {
|
||||
if (callback)callback()
|
||||
}
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user