From e691c629b9f880a6aa1f7222c33c0e2bd9412068 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=8E=E9=91=AB?= <cs12345007@vip.qq.com>
Date: Sat, 2 Apr 2022 09:00:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=9E=E6=97=B6=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E6=97=A0=E6=B3=95=E6=92=AD=E6=94=BE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-还原多分屏直播组件
-修改前端报错
-修改live路径
---
 web_src/src/components/dialog/jessibucas.vue | 323 +++++++++++++++++++
 web_src/src/components/live.vue              |   2 +-
 2 files changed, 324 insertions(+), 1 deletion(-)
 create mode 100644 web_src/src/components/dialog/jessibucas.vue

diff --git a/web_src/src/components/dialog/jessibucas.vue b/web_src/src/components/dialog/jessibucas.vue
new file mode 100644
index 00000000..846edd80
--- /dev/null
+++ b/web_src/src/components/dialog/jessibucas.vue
@@ -0,0 +1,323 @@
+<template>
+  <div :id="'jessibuca'+idx" style="width: 100%; height: 100%">
+    <div :id="'container'+idx" ref="container" style="width: 100%; height: 100%; background-color: #000" @dblclick="fullscreenSwich">
+      <div class="buttons-box" :id="'buttonsBox'+idx">
+        <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="destroyButton"></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="screenshot" 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>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'jessibuca',
+    data() {
+      return {
+        jessibuca: null,
+        playing: false,
+        isNotMute: false,
+        quieting: false,
+        fullscreen: false,
+        loaded: false, // mute
+        speed: 0,
+        performance: "", // 工作情况
+        kBps: 0,
+        btnDom: null,
+        videoInfo: null,
+        volume: 1,
+        rotate: 0,
+        vod: true, // 点播
+        forceNoOffscreen: false,
+      };
+    },
+    props: ['videoUrl', 'error', 'hasAudio', 'height','idx'],
+    mounted () {
+      window.onerror = (msg) => {
+        // console.error(msg)
+      };
+      let paramUrl = decodeURIComponent(this.$route.params.url)
+      this.$nextTick(() =>{
+        let dom = document.getElementById("container"+this.idx);
+        // dom.style.height = (9/16 ) * dom.clientWidth + "px"
+        if (typeof (this.videoUrl) == "undefined") {
+          this.videoUrl = paramUrl;
+        }
+        this.btnDom = document.getElementById("buttonsBox"+this.idx);
+        console.log("初始化时的地址为: " + this.videoUrl)
+        this.play(this.videoUrl)
+      })
+    },
+    watch:{
+      videoUrl(newData, oldData){
+        this.play(newData)
+      },
+      immediate:true
+    },
+    methods: {
+      create(){
+        let options =  {};
+        console.log(this.$refs.container)
+        console.log("hasAudio  " + !!this.hasAudio)
+
+        this.jessibuca = new window.Jessibuca(Object.assign(
+          {
+            container: this.$refs.container,
+            videoBuffer: 0.2, // 最大缓冲时长，单位秒
+            isResize: true,
+            decoder:"static/js/jessibuca/decoder.js",
+            useMSE: false,
+            showBandwidth: false,
+            isFlv: true,
+            // text: "WVP-PRO",
+            // background: "static/images/zlm-logo.png",
+            loadingText: "加载中",
+            hasAudio: typeof (this.hasAudio) =="undefined"? true: this.hasAudio,
+            debug: false,
+            supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
+            operateBtns: {
+              fullscreen: false,
+              screenshot: false,
+              play: false,
+              audio: false,
+              recorder: false,
+            },
+            record: "record",
+            vod: this.vod,
+            forceNoOffscreen: this.forceNoOffscreen,
+            isNotMute: this.isNotMute,
+          },
+          options
+        ));
+
+        let _this = this;
+        this.jessibuca.on("load", function () {
+          console.log("on load init");
+        });
+
+        this.jessibuca.on("log", function (msg) {
+          console.log("on log", msg);
+        });
+        this.jessibuca.on("record", function (msg) {
+          console.log("on record:", msg);
+        });
+        this.jessibuca.on("pause", function () {
+          _this.playing = false;
+        });
+        this.jessibuca.on("play", function () {
+          _this.playing = true;
+        });
+        this.jessibuca.on("fullscreen", function (msg) {
+          console.log("on fullscreen", msg);
+          _this.fullscreen = msg
+        });
+
+        this.jessibuca.on("mute", function (msg) {
+          console.log("on mute", msg);
+          _this.isNotMute = !msg;
+        });
+        this.jessibuca.on("audioInfo", function (msg) {
+          // console.log("audioInfo", msg);
+        });
+
+        this.jessibuca.on("videoInfo", function (msg) {
+          // this.videoInfo = msg;
+          // console.log("videoInfo", msg);
+
+        });
+
+        this.jessibuca.on("bps", function (bps) {
+          // console.log('bps', bps);
+
+        });
+        let _ts = 0;
+        this.jessibuca.on("timeUpdate", function (ts) {
+          // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
+          _ts = ts;
+        });
+
+        this.jessibuca.on("videoInfo", function (info) {
+          console.log("videoInfo", info);
+        });
+
+        this.jessibuca.on("error",  (error) =>{
+          console.log("error", error);
+          this.pause()
+        });
+
+        this.jessibuca.on("timeout",  ()=> {
+          console.log("timeout");
+          // this.pause()
+          this.play(this.videoUrl)
+        });
+
+        this.jessibuca.on('start', function () {
+          console.log('start');
+        })
+
+        this.jessibuca.on("performance", function (performance) {
+          let show = "卡顿";
+          if (performance === 2) {
+            show = "非常流畅";
+          } else if (performance === 1) {
+            show = "流畅";
+          }
+          _this.performance = show;
+        });
+        this.jessibuca.on('buffer', function (buffer) {
+          // console.log('buffer', buffer);
+        })
+
+        this.jessibuca.on('stats', function (stats) {
+          // console.log('stats', stats);
+        })
+
+        this.jessibuca.on('kBps', function (kBps) {
+          _this.kBps = Math.round(kBps);
+        });
+
+        // 显示时间戳 PTS
+        this.jessibuca.on('videoFrame', function () {
+
+        })
+
+        //
+        this.jessibuca.on('metadata', function () {
+
+        });
+      },
+      playBtnClick: function (event){
+        this.play(this.videoUrl)
+      },
+      play: function (url) {
+        console.log(url)
+
+        if (this.jessibuca) {
+          this.destroy();
+        }
+        if(!url){
+          return
+        }
+        this.create();
+        this.jessibuca.on("play", () => {
+          this.playing = true;
+          this.loaded = true;
+          this.quieting = this.jessibuca.quieting;
+        });
+        if (this.jessibuca.hasLoaded()) {
+          this.jessibuca.play(url);
+        } else {
+          this.jessibuca.on("load", () => {
+            console.log("load 播放")
+            this.jessibuca.play(url);
+          });
+        }
+      },
+      pause: function () {
+        if (this.jessibuca) {
+          this.jessibuca.pause();
+        }
+        this.playing = false;
+        this.err = "";
+        this.performance = "";
+      },
+      destroy: function () {
+        if (this.jessibuca) {
+          this.jessibuca.destroy();
+        }
+        if (document.getElementById("buttonsBox"+this.idx) == null) {
+          document.getElementById("container"+this.idx).appendChild(this.btnDom)
+        }
+        this.jessibuca = null;
+        this.playing = false;
+        this.err = "";
+        this.performance = "";
+
+      },
+      eventcallbacK: function(type, message) {
+        // console.log("player 事件回调")
+        // console.log(type)
+        // console.log(message)
+      },
+      fullscreenSwich: function (){
+        let isFull = this.isFullscreen()
+        this.jessibuca.setFullscreen(!isFull)
+        this.fullscreen = !isFull;
+      },
+      isFullscreen: function (){
+        return document.fullscreenElement ||
+          document.msFullscreenElement  ||
+          document.mozFullScreenElement ||
+          document.webkitFullscreenElement || false;
+      },
+      resize(){
+        if (this.jessibuca){
+          this.jessibuca.resize()
+        }
+
+      },
+      screenshot(){
+        this.jessibuca.screenshot('截图','png',0.5)
+        // let base64 = this.jessibuca.screenshot("shot","jpeg",0.5,'base64')
+        // this.$emit('screenshot',base64)
+      },
+      destroyButton() {
+        this.$emit('destroy', this.idx)
+        this.destroy()
+      }
+    },
+    destroyed() {
+      if (this.jessibuca) {
+        this.jessibuca.destroy();
+      }
+      this.playing = false;
+      this.loaded = false;
+      this.performance = "";
+    },
+  }
+</script>
+
+<style>
+  .buttons-box{
+    width: 100%;
+    height: 28px;
+    background-color: rgba(43, 51, 63, 0.7);
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    left: 0;
+    bottom: 0;
+    user-select: none;
+    z-index: 10;
+  }
+  .jessibuca-btn{
+    width: 20px;
+    color: rgb(255, 255, 255);
+    line-height: 27px;
+    margin: 0px 10px;
+    padding: 0px 2px;
+    cursor: pointer;
+    text-align: center;
+    font-size: 0.8rem !important;
+  }
+  .buttons-box-right {
+    position: absolute;
+    right: 0;
+  }
+</style>
diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue
index 3c910583..8073ae9c 100644
--- a/web_src/src/components/live.vue
+++ b/web_src/src/components/live.vue
@@ -46,7 +46,7 @@
 
 <script>
   import uiHeader from "./UiHeader.vue";
-  import player from './dialog/jessibuca.vue'
+  import player from './dialog/jessibucas.vue'
   import ChannelTree from './channelTree.vue'
 
   export default {