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,70 +80,54 @@ export default {
       dom.style.height = height + "px";
     },
     create() {
-      let options = {};
+      let options = {
-      console.log("hasAudio  " + this.hasAudio)
+        container: this.$refs.container,
-
+        autoWasm: true,
-      jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
+        background: "",
-        {
+        controlAutoHide: false,
-          container: this.$refs.container,
+        debug: false,
-          autoWasm: true,
+        decoder: "static/js/jessibuca/decoder.js",
-          background: "",
+        forceNoOffscreen: false,
-          controlAutoHide: false,
+        hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
-          debug: false,
+        heartTimeout: 5,
-          decoder: "static/js/jessibuca/decoder.js",
+        heartTimeoutReplay: true,
-          forceNoOffscreen: true,
+        heartTimeoutReplayTimes: 3,
-          hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
+        hiddenAutoPause: false,
-          hasVideo: true,
+        hotKey: true,
-          heartTimeout: 5,
+        isFlv: false,
-          heartTimeoutReplay: true,
+        isFullResize: false,
-          heartTimeoutReplayTimes: 3,
+        isNotMute: this.isNotMute,
-          hiddenAutoPause: false,
+        isResize: false,
-          hotKey: false,
+        keepScreenOn: true,
-          isFlv: false,
+        loadingText: "请稍等, 视频加载中......",
-          isFullResize: false,
+        loadingTimeout: 10,
-          isNotMute: this.isNotMute,
+        loadingTimeoutReplay: true,
-          isResize: false,
+        loadingTimeoutReplayTimes: 3,
-          keepScreenOn: false,
+        openWebglAlignment: false,
-          loadingText: "请稍等, 视频加载中......",
+        operateBtns: {
-          loadingTimeout: 10,
+          fullscreen: false,
-          loadingTimeoutReplay: true,
+          screenshot: false,
-          loadingTimeoutReplayTimes: 3,
+          play: false,
-          openWebglAlignment: false,
+          audio: false,
-          operateBtns: {
+          record: false
-            fullscreen: false,
-            screenshot: false,
-            play: false,
-            audio: false,
-            record: false
-          },
-          recordType: "webm",
-          rotate: 0,
-          showBandwidth: false,
-          supportDblclickFullscreen: false,
-          timeout: 10,
-          useMSE: location.hostname !== "localhost" && location.protocol !== "https:",
-          useOffscreen: false,
-          useWCS: location.hostname === "localhost" || location.protocol === "https",
-          useWebFullScreen: false,
-          videoBuffer: 0,
-          wasmDecodeAudioSyncVideo: true,
-          wasmDecodeErrorReplay: true,
-          wcsUseVideoRender: true
         },
-        options
+        recordType: "mp4",
-      ));
+        rotate: 0,
+        showBandwidth: false,
+        supportDblclickFullscreen: false,
+        timeout: 10,
+        useMSE: true,
+        useWCS: location.hostname === "localhost" || location.protocol === "https:",
+        useWebFullScreen: true,
+        videoBuffer: 0.1,
+        wasmDecodeErrorReplay: true,
+        wcsUseVideoRender: true
+      };
+      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;