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/devicePlayer.vue | 4 +
web_src/src/components/dialog/jessibuca.vue | 67 ++++++++++++++++++++-------------
web_src/src/components/live.vue | 2
3 files changed, 45 insertions(+), 28 deletions(-)
diff --git a/web_src/src/components/dialog/devicePlayer.vue b/web_src/src/components/dialog/devicePlayer.vue
index effd389..2eb3acb 100644
--- a/web_src/src/components/dialog/devicePlayer.vue
+++ b/web_src/src/components/dialog/devicePlayer.vue
@@ -3,7 +3,9 @@
<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> -->
- <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;">
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
<el-tab-pane label="瀹炴椂瑙嗛" name="media">
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)
},
diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue
index 3c91058..8257527 100644
--- a/web_src/src/components/live.vue
+++ b/web_src/src/components/live.vue
@@ -33,7 +33,7 @@
>
<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"
- :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> -->
</div>
</div>
--
Gitblit v1.8.0