feat: 升级 Jessibuca 播放器到 2023-09-15 v3.1.36 版本，优化部分配置

web_src/src/components/common/jessibuca.vue

@@ -47,10 +47,6 @@ export default {
   },
   props: ['videoUrl', 'error', 'hasAudio', 'height'],
   mounted() {
-    window.onerror = (msg) => {
-      // console.error(msg)
-    };
-    console.log(this._uid)
     let paramUrl = decodeURIComponent(this.$route.params.url)
     this.$nextTick(() => {
       this.updatePlayerDomSize()
@@ -61,15 +57,12 @@ export default {
         this.videoUrl = paramUrl;
       }
       this.btnDom = document.getElementById("buttonsBox");
-      console.log("初始化时的地址为: " + this.videoUrl)
-      this.play(this.videoUrl)
     })
   },
   watch: {
-    videoUrl(newData, oldData) {
+    videoUrl(val, _) {
-      this.play(newData)
+      this.play(val);
-    },
+    }
-    immediate: true
   },
   methods: {
     updatePlayerDomSize() {
@@ -87,30 +80,25 @@ export default {
       dom.style.height = height + "px";
     },
     create() {
-      let options = {};
+      let options = {
-      console.log("hasAudio  " + this.hasAudio)
-
-      jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
-        {
         container: this.$refs.container,
         autoWasm: true,
         background: "",
         controlAutoHide: false,
         debug: false,
         decoder: "static/js/jessibuca/decoder.js",
-          forceNoOffscreen: true,
+        forceNoOffscreen: false,
         hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
-          hasVideo: true,
         heartTimeout: 5,
         heartTimeoutReplay: true,
         heartTimeoutReplayTimes: 3,
         hiddenAutoPause: false,
-          hotKey: false,
+        hotKey: true,
         isFlv: false,
         isFullResize: false,
         isNotMute: this.isNotMute,
         isResize: false,
-          keepScreenOn: false,
+        keepScreenOn: true,
         loadingText: "请稍等, 视频加载中......",
         loadingTimeout: 10,
         loadingTimeoutReplay: true,
@@ -123,34 +111,23 @@ export default {
           audio: false,
           record: false
         },
-          recordType: "webm",
+        recordType: "mp4",
         rotate: 0,
         showBandwidth: false,
         supportDblclickFullscreen: false,
         timeout: 10,
-          useMSE: location.hostname !== "localhost" && location.protocol !== "https:",
+        useMSE: true,
-          useOffscreen: false,
+        useWCS: location.hostname === "localhost" || location.protocol === "https:",
-          useWCS: location.hostname === "localhost" || location.protocol === "https",
+        useWebFullScreen: true,
-          useWebFullScreen: false,
+        videoBuffer: 0.1,
-          videoBuffer: 0,
-          wasmDecodeAudioSyncVideo: true,
         wasmDecodeErrorReplay: true,
         wcsUseVideoRender: true
-        },
+      };
-        options
+      console.log("Jessibuca -> options: ", options);
-      ));
+      jessibucaPlayer[this._uid] = new window.Jessibuca({...options});
+
       let jessibuca = jessibucaPlayer[this._uid];
       let _this = this;
-      jessibuca.on("load", function () {
-        console.log("on load init");
-      });
-
-      jessibuca.on("log", function (msg) {
-        console.log("on log", msg);
-      });
-      jessibuca.on("record", function (msg) {
-        console.log("on record:", msg);
-      });
       jessibuca.on("pause", function () {
         _this.playing = false;
       });
@@ -158,44 +135,11 @@ export default {
         _this.playing = true;
       });
       jessibuca.on("fullscreen", function (msg) {
-        console.log("on fullscreen", msg);
         _this.fullscreen = msg
       });
-
       jessibuca.on("mute", function (msg) {
-        console.log("on mute", msg);
         _this.isNotMute = !msg;
       });
-      jessibuca.on("audioInfo", function (msg) {
-        console.log("audioInfo", msg);
-      });
-
-      jessibuca.on("bps", function (bps) {
-        // console.log('bps', bps);
-
-      });
-      let _ts = 0;
-      jessibuca.on("timeUpdate", function (ts) {
-        // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
-        _ts = ts;
-      });
-
-      jessibuca.on("videoInfo", function (info) {
-        console.log("videoInfo", info);
-      });
-
-      jessibuca.on("error", function (error) {
-        console.log("error", error);
-      });
-
-      jessibuca.on("timeout", function () {
-        console.log("timeout");
-      });
-
-      jessibuca.on('start', function () {
-        console.log('start');
-      })
-
       jessibuca.on("performance", function (performance) {
         let show = "卡顿";
         if (performance === 2) {
@@ -205,33 +149,36 @@ export default {
         }
         _this.performance = show;
       });
-      jessibuca.on('buffer', function (buffer) {
-        // console.log('buffer', buffer);
-      })
-
-      jessibuca.on('stats', function (stats) {
-        // console.log('stats', stats);
-      })
-
       jessibuca.on('kBps', function (kBps) {
         _this.kBps = Math.round(kBps);
       });
-
+      jessibuca.on("videoInfo", function (msg) {
-      // 显示时间戳 PTS
+        console.log("Jessibuca -> videoInfo: ", msg);
-      jessibuca.on('videoFrame', function () {
+      });
-
+      jessibuca.on("audioInfo", function (msg) {
-      })
+        console.log("Jessibuca -> audioInfo: ", msg);
-
+      });
-      //
+      jessibuca.on("error", function (msg) {
-      jessibuca.on('metadata', function () {
+        console.log("Jessibuca -> error: ", msg);
-
+      });
+      jessibuca.on("timeout", function (msg) {
+        console.log("Jessibuca -> timeout: ", msg);
+      });
+      jessibuca.on("loadingTimeout", function (msg) {
+        console.log("Jessibuca -> timeout: ", msg);
+      });
+      jessibuca.on("delayTimeout", function (msg) {
+        console.log("Jessibuca -> timeout: ", msg);
+      });
+      jessibuca.on("playToRenderTimes", function (msg) {
+        console.log("Jessibuca -> playToRenderTimes: ", msg);
       });
     },
     playBtnClick: function (event) {
       this.play(this.videoUrl)
     },
     play: function (url) {
-      console.log(url)
+      console.log("Jessibuca -> url: ", url);
       if (jessibucaPlayer[this._uid]) {
         this.destroy();
       }
@@ -245,7 +192,6 @@ export default {
         jessibucaPlayer[this._uid].play(url);
       } else {
         jessibucaPlayer[this._uid].on("load", () => {
-          console.log("load 播放")
           jessibucaPlayer[this._uid].play(url);
         });
       }
@@ -286,11 +232,6 @@ export default {
       this.performance = "";
 
     },
-    eventcallbacK: function (type, message) {
-      // console.log("player 事件回调")
-      // console.log(type)
-      // console.log(message)
-    },
     fullscreenSwich: function () {
       let isFull = this.isFullscreen()
       jessibucaPlayer[this._uid].setFullscreen(!isFull)

web_src/src/components/dialog/devicePlayer.vue

@@ -1,7 +1,7 @@
 <template>
 <div id="devicePlayer" v-loading="isLoging">
 
-    <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()" v-if="showVideoDialog">
       <div style="width: 100%; height: 100%">
         <el-tabs type="card" :stretch="true" v-model="activePlayer" @tab-click="changePlayer" v-if="Object.keys(this.player).length > 1">
 <!--          <el-tab-pane label="LivePlayer" name="livePlayer">-->

web_src/static/js/jessibuca/jessibuca.d.ts

@@ -561,9 +561,9 @@ declare class Jessibuca {
         buf: number;
         /** 当前视频帧率 */
         fps: number;
-        /** 当前音频码率，单位bit */
+        /** 当前音频码率，单位byte */
         abps: number;
-        /** 当前视频码率，单位bit */
+        /** 当前视频码率，单位byte */
         vbps: number;
         /** 当前视频帧pts，单位毫秒 */
         ts: number;