|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div id="devicePlayer"> |
|
|
|
<div id="devicePlayer" v-loading="isLoging"> |
|
|
|
<el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()"> |
|
|
|
<LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> |
|
|
|
<LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> |
|
|
|
<div id="shared" style="text-align: right; margin-top: 1rem;"> |
|
|
|
<el-tabs v-model="tabActiveName"> |
|
|
|
<el-tab-pane label="实时视频" name="media"> |
|
|
|
@ -26,20 +26,6 @@ |
|
|
|
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> |
|
|
|
<el-tab-pane label="录像查询" name="record"> |
|
|
|
<el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="queryRecords()"></el-date-picker> |
|
|
|
<!-- <el-slider style="margin: 0 1rem 1rem 1rem;"--> |
|
|
|
<!-- v-model="timeVal"--> |
|
|
|
<!-- :min="timeMin"--> |
|
|
|
<!-- :max="timeMax"--> |
|
|
|
<!-- :step="5"--> |
|
|
|
<!-- :marks="getTimeMakrs()"--> |
|
|
|
<!-- :format-tooltip="formatTooltip">--> |
|
|
|
<!-- </el-slider>--> |
|
|
|
<!-- <range-slider :min="timeMin"--> |
|
|
|
<!-- :max="timeMax"--> |
|
|
|
<!-- :step="5"></range-slider>--> |
|
|
|
|
|
|
|
<!-- <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"--> |
|
|
|
<!-- @change="recordList()"></el-date-picker>--> |
|
|
|
<el-table :data="videoHistory.searchHistoryResult" height="150" v-loading="recordsLoading"> |
|
|
|
<el-table-column label="名称" prop="name"></el-table-column> |
|
|
|
<el-table-column label="文件" prop="filePath"></el-table-column> |
|
|
|
@ -143,41 +129,16 @@ export default { |
|
|
|
date: '', |
|
|
|
searchHistoryResult: [] //媒体流历史记录搜索结果 |
|
|
|
}, |
|
|
|
timeMakrs: { |
|
|
|
// 0 : "0:00", |
|
|
|
// // 60 : "1:00", |
|
|
|
// 120 : "2:00", |
|
|
|
// // 180 : "3:00", |
|
|
|
// 240 : "4:00", |
|
|
|
// // 300 : "5:00", |
|
|
|
// 360 : "6:00", |
|
|
|
// // 420 : "7:00", |
|
|
|
// 480 : "8:00", |
|
|
|
// 540 : "9:00", |
|
|
|
600: "10:00", |
|
|
|
// 660 : "11:00", |
|
|
|
720: "12:00", |
|
|
|
// 780 : "13:00", |
|
|
|
840: "14:00", |
|
|
|
// 900 : "15:00", |
|
|
|
960: "16:00", |
|
|
|
// 1020 : "17:00", |
|
|
|
1080: "18:00", |
|
|
|
// 1140 : "19:00", |
|
|
|
// 1200 : "20:00", |
|
|
|
// // 1260 : "21:00", |
|
|
|
// 1320 : "22:00", |
|
|
|
// // 1380 : "23:00", |
|
|
|
// 1440 : "24:00" |
|
|
|
}, |
|
|
|
showVideoDialog: false, |
|
|
|
ssrc: '', |
|
|
|
convertKey: '', |
|
|
|
deviceId: '', |
|
|
|
channelId: '', |
|
|
|
tabActiveName: 'media', |
|
|
|
hasaudio: false, |
|
|
|
loadingRecords: false, |
|
|
|
recordsLoading: false, |
|
|
|
isLoging: false, |
|
|
|
timeVal: 0, |
|
|
|
timeMin: 0, |
|
|
|
timeMax: 1440, |
|
|
|
@ -200,6 +161,7 @@ export default { |
|
|
|
this.$refs.videoPlayer.pause(); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
switch (tab) { |
|
|
|
case "media": |
|
|
|
this.play(param.streamInfo, param.hasAudio) |
|
|
|
@ -217,33 +179,97 @@ export default { |
|
|
|
timeAxisSelTime: function (val) { |
|
|
|
console.log(val) |
|
|
|
}, |
|
|
|
getTimeMakrs() { |
|
|
|
return this.timeMakrs; |
|
|
|
}, |
|
|
|
play: function (streamInfo, hasAudio) { |
|
|
|
this.hasaudio = hasAudio; |
|
|
|
// 根据媒体流信息二次判断 |
|
|
|
var realHasAudio = false; |
|
|
|
if (!!streamInfo.tracks && streamInfo.tracks.length > 0 && hasAudio) { |
|
|
|
var that = this; |
|
|
|
that.isLoging = false; |
|
|
|
if (!!streamInfo.tracks && streamInfo.tracks.length > 0 ) { |
|
|
|
for (let i = 0; i < streamInfo.tracks.length; i++) { |
|
|
|
if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { // 判断为AAC音频 |
|
|
|
realHasAudio = true; |
|
|
|
} |
|
|
|
if (streamInfo.tracks[i].codec_type == 0 && streamInfo.tracks[i].codec_id_name != "CodecH264") { // 判断为H265视频 |
|
|
|
that.coverPlay(streamInfo, streamInfo.tracks[i].codec_id_name, ()=>{ |
|
|
|
that.close(); |
|
|
|
return; |
|
|
|
}) |
|
|
|
}else if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name != "CodecAAC") { |
|
|
|
that.coverPlay(streamInfo, streamInfo.tracks[i].codec_id_name, ()=>{ |
|
|
|
that.playFromStreamInfo(false. streamInfo) |
|
|
|
}) |
|
|
|
}else if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { |
|
|
|
that.playFromStreamInfo(true, streamInfo) |
|
|
|
}else { |
|
|
|
that.playFromStreamInfo(false, streamInfo) |
|
|
|
} |
|
|
|
} |
|
|
|
}else { |
|
|
|
that.playFromStreamInfo(false, streamInfo) |
|
|
|
} |
|
|
|
this.hasaudio = realHasAudio && this.hasaudio; |
|
|
|
this.ssrc = streamInfo.ssrc; |
|
|
|
// this.$refs.videoPlayer.hasaudio = hasAudio; |
|
|
|
// this.videoUrl = streamInfo.flv + "?" + new Date().getTime(); |
|
|
|
this.videoUrl = streamInfo.ws_flv; |
|
|
|
this.showVideoDialog = true; |
|
|
|
console.log(this.ssrc); |
|
|
|
}, |
|
|
|
coverPlay: function (streamInfo, codec_id_name, catchcallback) { |
|
|
|
var that = this; |
|
|
|
|
|
|
|
that.$confirm(codec_id_name + ' 编码格式不支持播放, 是否转码播放?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
that.isLoging = true; |
|
|
|
that.$axios({ |
|
|
|
method: 'post', |
|
|
|
url: '/api/play/' + streamInfo.ssrc + '/convert' |
|
|
|
}).then(function (res) { |
|
|
|
if (res.data.code == 0) { |
|
|
|
streamInfo.ws_flv = res.data.ws_flv; |
|
|
|
that.convertKey = res.data.key; |
|
|
|
setTimeout(()=>{ |
|
|
|
that.isLoging = false; |
|
|
|
that.playFromStreamInfo(false, streamInfo); |
|
|
|
}, 2000) |
|
|
|
} else { |
|
|
|
that.isLoging = false; |
|
|
|
that.$message({ |
|
|
|
showClose: true, |
|
|
|
message: '转码失败', |
|
|
|
type: 'error' |
|
|
|
}); |
|
|
|
} |
|
|
|
}).catch(function (e) { |
|
|
|
that.$message({ |
|
|
|
showClose: true, |
|
|
|
message: '播放错误', |
|
|
|
type: 'error' |
|
|
|
}); |
|
|
|
}); |
|
|
|
}).catch(function (e) { |
|
|
|
if (catchcallback)catchcallback() |
|
|
|
}); |
|
|
|
}, |
|
|
|
playFromStreamInfo: function (realHasAudio, streamInfo) { |
|
|
|
this.videoUrl = streamInfo.ws_flv; |
|
|
|
this.showVideoDialog = true; |
|
|
|
this.hasaudio = realHasAudio && this.hasaudio; |
|
|
|
this.ssrc = streamInfo.ssrc; |
|
|
|
console.log(this.ssrc); |
|
|
|
}, |
|
|
|
close: function () { |
|
|
|
console.log('关闭视频'); |
|
|
|
this.$refs.videoPlayer.pause(); |
|
|
|
if (!this.$refs.videoPlayer){ |
|
|
|
this.$refs.videoPlayer.pause(); |
|
|
|
} |
|
|
|
this.videoUrl = ''; |
|
|
|
this.showVideoDialog = false; |
|
|
|
if (this.convertKey != '') { |
|
|
|
this.$axios({ |
|
|
|
method: 'post', |
|
|
|
url: '/api/play/convert/stop/' + this.convertKey |
|
|
|
}).then(function (res) { |
|
|
|
if (res.data.code == 0) { |
|
|
|
console.log(res.data.msg) |
|
|
|
}else { |
|
|
|
console.error(res.data.msg) |
|
|
|
} |
|
|
|
}).catch(function (e) {}); |
|
|
|
} |
|
|
|
this.convertKey = '' |
|
|
|
}, |
|
|
|
copySharedInfo: function (data) { |
|
|
|
console.log('复制内容：' + data); |
|
|
|
|
648540858
4 years ago