From 3eef73ecb6e8fa36466cd8921a6129c886911138 Mon Sep 17 00:00:00 2001
From: 648540858 <456panlinlin>
Date: 星期六, 02 四月 2022 18:19:12 +0800
Subject: [PATCH] 修复实时监控无法播放问题 #427
---
web_src/src/components/dialog/jessibuca.vue | 67 ++++++++++++++++++++-------------
1 files changed, 41 insertions(+), 26 deletions(-)
diff --git a/web_src/src/components/dialog/jessibuca.vue b/web_src/src/components/dialog/jessibuca.vue
index e719c2b..339d3a2 100644
--- a/web_src/src/components/dialog/jessibuca.vue
+++ b/web_src/src/components/dialog/jessibuca.vue
@@ -1,25 +1,22 @@
<template>
- <div id="jessibuca" style="width: auto; height: auto">
- <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-left">
- <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 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-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i>
- </div>
- <div class="buttons-box-right">
- <span class="jessibuca-btn">{{kBps}} kb/s</span>
-<!-- <i class="iconfont icon-file-record1 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-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-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
- </div>
- </div>
-
+ <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich">
+ <div class="buttons-box" id="buttonsBox">
+ <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-pause jessibuca-btn" @click="pause"></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-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i>
+ </div>
+ <div class="buttons-box-right">
+ <span class="jessibuca-btn">{{kBps}} kb/s</span>
+ <!-- <i class="iconfont icon-file-record1 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-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-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
+ </div>
</div>
</div>
</template>
@@ -46,15 +43,20 @@
forceNoOffscreen: false,
};
},
- props: ['videoUrl', 'error', 'hasAudio', 'height'],
+ props: ['containerId','videoUrl', 'error', 'hasAudio', 'height'],
mounted () {
window.onerror = (msg) => {
// console.error(msg)
};
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() =>{
- let dom = document.getElementById("container");
- dom.style.height = (9/16 ) * dom.clientWidth + "px"
+ 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";
+
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
@@ -72,12 +74,12 @@
methods: {
create(){
let options = {};
- console.log(this.$refs.container)
+ console.log(this.$refs[this.containerId])
console.log("hasAudio " + this.hasAudio)
this.jessibuca = new window.Jessibuca(Object.assign(
{
- container: this.$refs.container,
+ container: this.$refs[this.containerId],
videoBuffer: 0.2, // 鏈�澶х紦鍐叉椂闀匡紝鍗曚綅绉�
isResize: true,
decoder:"static/js/jessibuca/decoder.js",
@@ -198,6 +200,19 @@
});
},
+ 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){
this.play(this.videoUrl)
},
--
Gitblit v1.8.0