Thirdparty
/
wvp-GB28181-pro
mirror of https://github.com/648540858/wvp-GB28181-pro
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

修正音频编码判断代码错误，仅当存在AAC音轨时打开音频

pull/1/head
Lawrence 2020-10-19 20:37:02 +08:00
parent 908145ceed
commit fcf64ffa5e
1 changed files with 339 additions and 343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template> <template>
<div id="devicePlayer"> <div id="devicePlayer">
<el-dialog title="视频播放" top="0" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()"> <el-dialog title="视频播放" top="0" :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" :hasaudio="hasaudio" fluent autoplay live></LivePlayer>
<div id="shared" style="text-align: right; margin-top: 1rem;"> <div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName"> <el-tabs v-model="tabActiveName">
<el-tab-pane label="媒体流信息" name="media"> <el-tab-pane label="媒体流信息" name="media">
@ -25,10 +25,8 @@
</el-tab-pane> </el-tab-pane>
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> <!--{"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="second"> <el-tab-pane label="录像查询" name="second">
<el-date-picker v-model="videoHistory.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" <el-date-picker v-model="videoHistory.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" @change="recordList()"></el-date-picker>
@change="recordList()"></el-date-picker> <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" @change="recordList()"></el-date-picker>
<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" style="width: 100%"> <el-table :data="videoHistory.searchHistoryResult" style="width: 100%">
<el-table-column label="名称" prop="name" width="150"></el-table-column> <el-table-column label="名称" prop="name" width="150"></el-table-column>
<el-table-column label="文件" prop="filePath" width="300"></el-table-column> <el-table-column label="文件" prop="filePath" width="300"></el-table-column>
@ -66,10 +64,8 @@
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div> <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
</div> </div>
<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div> <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
@mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
</div> </div>
</div> </div>
@ -77,19 +73,19 @@
</el-tabs> </el-tabs>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import LivePlayer from '@liveqing/liveplayer' import LivePlayer from '@liveqing/liveplayer'
export default { export default {
name: 'devicePlayer', name: 'devicePlayer',
props: {}, props: {},
components: { components: {
LivePlayer LivePlayer
}, },
computed: { computed: {
getPlayerShared: function() { getPlayerShared: function () {
return { return {
sharedUrl: window.location.host + '/' + this.videoUrl, sharedUrl: window.location.host + '/' + this.videoUrl,
sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>', sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
@ -102,7 +98,7 @@
}, },
data() { data() {
return { return {
video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4', video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
videoUrl: '', videoUrl: '',
videoHistory: { videoHistory: {
startTime: '', startTime: '',
@ -121,17 +117,17 @@
}, },
methods: { methods: {
play: function(streamInfo, deviceId, channelId, hasAudio) { play: function (streamInfo, deviceId, channelId, hasAudio) {
this.hasaudio = hasAudio; this.hasaudio = hasAudio;
// 根据媒体流信息二次判断 // 根据媒体流信息二次判断
if( this.hasaudio && !!streamInfo.tracks && streamInfo.tracks.length > 0) { if (!!streamInfo.tracks && streamInfo.tracks.length > 0) {
var realHasAudio = false; var realHasAudio = false;
for (let i = 0; i < streamInfo.tracks; i++) { for (let i = 0; i < streamInfo.tracks.length; i++) {
if (streamInfo.tracks[i].codec_type == 1) { // 判断为音频 if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { // 判断为AAC音频
realHasAudio = true; realHasAudio = true;
} }
} }
this.hasaudio = realHasAudio && this.hasaudio; this.hasaudio = realHasAudio; //&& this.hasaudio;
} }
this.ssrc = streamInfo.ssrc; this.ssrc = streamInfo.ssrc;
this.deviceId = deviceId; this.deviceId = deviceId;
@ -142,24 +138,24 @@
this.showVideoDialog = true; this.showVideoDialog = true;
console.log(this.ssrc); console.log(this.ssrc);
}, },
close: function() { close: function () {
console.log('关闭视频'); console.log('关闭视频');
this.$refs.videoPlayer.pause(); this.$refs.videoPlayer.pause();
this.videoUrl = ''; this.videoUrl = '';
this.showVideoDialog = false; this.showVideoDialog = false;
}, },
copySharedInfo: function(data) { copySharedInfo: function (data) {
console.log('复制内容：' + data); console.log('复制内容：' + data);
let _this = this; let _this = this;
this.$copyText(data).then( this.$copyText(data).then(
function(e) { function (e) {
_this.$message({ _this.$message({
showClose: true, showClose: true,
message: '复制成功', message: '复制成功',
type: 'success' type: 'success'
}); });
}, },
function(e) { function (e) {
_this.$message({ _this.$message({
showClose: true, showClose: true,
message: '复制失败，请手动复制', message: '复制失败，请手动复制',
@ -169,7 +165,7 @@
); );
}, },
recordList: function() { recordList: function () {
if (!this.videoHistory.startTime || !this.videoHistory.endTime) { if (!this.videoHistory.startTime || !this.videoHistory.endTime) {
return; return;
} }
@ -178,49 +174,49 @@
method: 'get', method: 'get',
url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.videoHistory url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.videoHistory
.startTime + '&endTime=' + this.videoHistory.endTime .startTime + '&endTime=' + this.videoHistory.endTime
}).then(function(res) { }).then(function (res) {
console.log(JSON.stringify(res)); console.log(JSON.stringify(res));
}).catch(function(e) { }).catch(function (e) {
// that.videoHistory.searchHistoryResult = falsificationData.recordData; // that.videoHistory.searchHistoryResult = falsificationData.recordData;
}); });
}, },
playRecord: function(isBackLive, rowData) { playRecord: function (isBackLive, rowData) {
let that = this; let that = this;
if(isBackLive){ if (isBackLive) {
this.videoUrl=this.getVideoUrlBySsrc(this.normalssrc); this.videoUrl = this.getVideoUrlBySsrc(this.normalssrc);
return; return;
} }
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + rowData.startTime + '&endTime=' + url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + rowData.startTime + '&endTime=' +
rowData.endTime rowData.endTime
}).then(function(res) { }).then(function (res) {
let ssrc = res.data.ssrc; let ssrc = res.data.ssrc;
that.videoUrl = that.getVideoUrlBySsrc(ssrc); that.videoUrl = that.getVideoUrlBySsrc(ssrc);
//that.videoUrl='http://hls.cntv.kcdnvip.com/asp/hls/main/0303000a/3/default/f466089412c04a759c5515dbfcc3ac3d/main.m3u8?maxbr=2048'; //that.videoUrl='http://hls.cntv.kcdnvip.com/asp/hls/main/0303000a/3/default/f466089412c04a759c5515dbfcc3ac3d/main.m3u8?maxbr=2048';
}); });
}, },
ptzCamera: function(leftRight, upDown, zoom) { ptzCamera: function (leftRight, upDown, zoom) {
console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom); console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'post', method: 'post',
url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown + url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
'&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50' '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
}).then(function(res) {}); }).then(function (res) {});
}, },
//////////////////////播放器事件处理////////////////////////// //////////////////////播放器事件处理//////////////////////////
videoError:function(e){ videoError: function (e) {
console.log("播放器错误："+JSON.stringify(e)); console.log("播放器错误：" + JSON.stringify(e));
} }
} }
}; };
</script> </script>
<style> <style>
.control-wrapper { .control-wrapper {
position: relative; position: relative;
width: 6.25rem; width: 6.25rem;
height: 6.25rem; height: 6.25rem;
@ -229,9 +225,9 @@
margin: 0 auto; margin: 0 auto;
border-radius: 100%; border-radius: 100%;
float: left; float: left;
} }
.control-btn { .control-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
@ -241,17 +237,17 @@
border: 1px solid #78aee4; border: 1px solid #78aee4;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.3s linear; transition: all 0.3s linear;
} }
.control-btn i { .control-btn i {
font-size: 20px; font-size: 20px;
color: #78aee4; color: #78aee4;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.control-round { .control-round {
position: absolute; position: absolute;
top: 21%; top: 21%;
left: 21%; left: 21%;
@ -259,9 +255,9 @@
height: 58%; height: 58%;
background: #fff; background: #fff;
border-radius: 100%; border-radius: 100%;
} }
.control-round-inner { .control-round-inner {
position: absolute; position: absolute;
left: 15%; left: 15%;
top: 15%; top: 15%;
@ -275,105 +271,105 @@
border: 1px solid #78aee4; border: 1px solid #78aee4;
border-radius: 100%; border-radius: 100%;
transition: all 0.3s linear; transition: all 0.3s linear;
} }
.control-inner-btn { .control-inner-btn {
position: absolute; position: absolute;
width: 60%; width: 60%;
height: 60%; height: 60%;
background: #fafafa; background: #fafafa;
} }
.control-top { .control-top {
top: -8%; top: -8%;
left: 27%; left: 27%;
transform: rotate(-45deg); transform: rotate(-45deg);
border-radius: 5px 100% 5px 0; border-radius: 5px 100% 5px 0;
} }
.control-top i { .control-top i {
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 5px 100% 5px 0; border-radius: 5px 100% 5px 0;
} }
.control-top .control-inner { .control-top .control-inner {
left: -1px; left: -1px;
bottom: 0; bottom: 0;
border-top: 1px solid #78aee4; border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4; border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0; border-radius: 0 100% 0 0;
} }
.control-top .fa { .control-top .fa {
transform: rotate(45deg) translateY(-7px); transform: rotate(45deg) translateY(-7px);
} }
.control-left { .control-left {
top: 27%; top: 27%;
left: -8%; left: -8%;
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 5px 0 5px 100%; border-radius: 5px 0 5px 100%;
} }
.control-left i { .control-left i {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.control-left .control-inner { .control-left .control-inner {
right: -1px; right: -1px;
top: -1px; top: -1px;
border-bottom: 1px solid #78aee4; border-bottom: 1px solid #78aee4;
border-left: 1px solid #78aee4; border-left: 1px solid #78aee4;
border-radius: 0 0 0 100%; border-radius: 0 0 0 100%;
} }
.control-left .fa { .control-left .fa {
transform: rotate(-45deg) translateX(-7px); transform: rotate(-45deg) translateX(-7px);
} }
.control-right { .control-right {
top: 27%; top: 27%;
right: -8%; right: -8%;
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 5px 100% 5px 0; border-radius: 5px 100% 5px 0;
} }
.control-right i { .control-right i {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.control-right .control-inner { .control-right .control-inner {
left: -1px; left: -1px;
bottom: -1px; bottom: -1px;
border-top: 1px solid #78aee4; border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4; border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0; border-radius: 0 100% 0 0;
} }
.control-right .fa { .control-right .fa {
transform: rotate(-45deg) translateX(7px); transform: rotate(-45deg) translateX(7px);
} }
.control-bottom { .control-bottom {
left: 27%; left: 27%;
bottom: -8%; bottom: -8%;
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 0 5px 100% 5px; border-radius: 0 5px 100% 5px;
} }
.control-bottom i { .control-bottom i {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.control-bottom .control-inner { .control-bottom .control-inner {
top: -1px; top: -1px;
left: -1px; left: -1px;
border-bottom: 1px solid #78aee4; border-bottom: 1px solid #78aee4;
border-right: 1px solid #78aee4; border-right: 1px solid #78aee4;
border-radius: 0 0 100% 0; border-radius: 0 0 100% 0;
} }
.control-bottom .fa { .control-bottom .fa {
transform: rotate(-45deg) translateY(7px); transform: rotate(-45deg) translateY(7px);
} }
</style> </style>