fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/446/head
648540858 3 years ago
parent
c3b47fa734
commit
3eef73ecb6
3 changed files with 45 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      web_src/src/components/dialog/devicePlayer.vue
  2. 67
      web_src/src/components/dialog/jessibuca.vue
  3. 2
      web_src/src/components/live.vue

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>

Write Preview
Loading…
Cancel
Save