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

648540858
1 parent c3b47fa7
Showing 3 changed files with 45 additions and 28 deletions
web_src/src/components/dialog/devicePlayer.vue
web_src/src/components/dialog/jessibuca.vue
web_src/src/components/live.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">
 <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 @@ export default {
           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 @@ export default {
     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 @@ 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){
           this.play(this.videoUrl)
         },
@@ -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>