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

修复实时监控无法播放问题 #427

pull/446/head
648540858 2022-04-02 18:19:12 +08:00
parent c3b47fa734
commit 3eef73ecb6
3 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web_src/src/components/dialog/devicePlayer.vue
View File

@ -3,7 +3,9 @@
<el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"> <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()">
<!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="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> -->
<player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :height="false" :hasAudio="hasAudio" fluent autoplay live ></player> <div style="width: 100%; height: 100%">
<player containerId="container" ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player>
</div>
<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" @tab-click="tabHandleClick"> <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
<el-tab-pane label="实时视频" name="media"> <el-tab-pane label="实时视频" name="media">

67
web_src/src/components/dialog/jessibuca.vue
View File

@ -1,25 +1,22 @@
<template> <template>
<div id="jessibuca" style="width: auto; height: auto"> <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich">
<div id="container" ref="container" style="width: 100%; height: 10rem; background-color: #000" @dblclick="fullscreenSwich"> <div class="buttons-box" id="buttonsBox">
<div class="buttons-box" id="buttonsBox"> <div class="buttons-box-left">
<div class="buttons-box-left"> <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i> <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
<i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i> <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="jessibuca.mute()"></i>
<i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="jessibuca.mute()"></i> <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i>
<i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i> </div>
</div> <div class="buttons-box-right">
<div class="buttons-box-right"> <span class="jessibuca-btn">{{kBps}} kb/s</span>
<span class="jessibuca-btn">{{kBps}} kb/s</span> <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
<!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> <!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
<!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>--> <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)" style="font-size: 1rem !important"></i>
<i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)" style="font-size: 1rem !important"></i> <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> </div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -46,15 +43,20 @@ export default {
forceNoOffscreen: false, forceNoOffscreen: false,
}; };
}, },
props: ['videoUrl', 'error', 'hasAudio', 'height'], props: ['containerId','videoUrl', 'error', 'hasAudio', 'height'],
mounted () { mounted () {
window.onerror = (msg) => { window.onerror = (msg) => {
// console.error(msg) // console.error(msg)
}; };
let paramUrl = decodeURIComponent(this.$route.params.url) let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() =>{ this.$nextTick(() =>{
let dom = document.getElementById("container"); let dom = document.getElementById(this.containerId);
dom.style.height = (9/16 ) * dom.clientWidth + "px" if (dom.parentNode.clientHeight == 0) {
dom.style.height = (9/16 ) * dom.clientWidth + "px"
}
dom.style.height = dom.parentNode.clientHeight + "px";
dom.style.width = dom.parentNode.clientWidth + "px";
if (typeof (this.videoUrl) == "undefined") { if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl; this.videoUrl = paramUrl;
} }
@ -72,12 +74,12 @@ export default {
methods: { methods: {
create(){ create(){
let options = {}; let options = {};
console.log(this.$refs.container) console.log(this.$refs[this.containerId])
console.log("hasAudio " + this.hasAudio) console.log("hasAudio " + this.hasAudio)
this.jessibuca = new window.Jessibuca(Object.assign( this.jessibuca = new window.Jessibuca(Object.assign(
{ {
container: this.$refs.container, container: this.$refs[this.containerId],
videoBuffer: 0.2, // 最大缓冲时长，单位秒 videoBuffer: 0.2, // 最大缓冲时长，单位秒
isResize: true, isResize: true,
decoder:"static/js/jessibuca/decoder.js", decoder:"static/js/jessibuca/decoder.js",
@ -198,6 +200,19 @@ export default {
}); });
}, },
resize(){
if (this.jessibuca){
this.jessibuca.resize()
this.$nextTick(() =>{
let dom = document.getElementById(this.containerId);
if (dom.parentNode.clientHeight == 0) {
dom.style.height = (9/16 ) * dom.clientWidth + "px"
}
dom.style.height = dom.parentNode.clientHeight + "px";
dom.style.width = dom.parentNode.clientWidth + "px";
})
}
},
playBtnClick: function (event){ playBtnClick: function (event){
this.play(this.videoUrl) this.play(this.videoUrl)
}, },

2
web_src/src/components/live.vue
View File

@ -33,7 +33,7 @@
> >
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div> <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
<player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true" <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true"
:idx="'player'+i" @screenshot="shot" @destroy="destroy"></player> :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
<!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> --> <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
</div> </div>
</div> </div>