XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加网页自动转码,以支持h265 g.711的播放

Browse Source
This commit is contained in:
648540858
2020-11-19 16:00:02 +08:00
parent 4e9c6b2f91
commit 09470bef96
7 changed files with 202 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
web_src/src/components/gb28181/devicePlayer.vue
View File

@@ -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);