perf(jessibuca): 升级 jessibuca 2023-03-8 v3.1.28 版本, 修改 jessibuca 参数使用硬解码优化播放黑屏问题, https 环境下使用 WCS 硬解码, http 环境下使用 MSE 硬解码, H265 视频自动使用 wasm 软解码

web_src/src/components/common/jessibuca.vue

@@ -1,5 +1,6 @@
 <template>
-  <div ref="container" @dblclick="fullscreenSwich" style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
+  <div ref="container" @dblclick="fullscreenSwich"
+       style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
     <div class="buttons-box" id="buttonsBox">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -92,29 +93,49 @@ export default {
       jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
         {
           container: this.$refs.container,
-          videoBuffer: 0.2, // 最大缓冲时长，单位秒
+          autoWasm: true,
-          isResize: true,
+          background: "",
-          decoder: "static/js/jessibuca/decoder.js",
+          controlAutoHide: false,
-          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, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
+          decoder: "static/js/jessibuca/decoder.js",
+          forceNoOffscreen: true,
+          hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
+          hasVideo: true,
+          heartTimeout: 5,
+          heartTimeoutReplay: true,
+          heartTimeoutReplayTimes: 3,
+          hiddenAutoPause: false,
+          hotKey: false,
+          isFlv: false,
+          isFullResize: false,
+          isNotMute: this.isNotMute,
+          isResize: false,
+          keepScreenOn: false,
+          loadingText: "请稍等, 视频加载中......",
+          loadingTimeout: 10,
+          loadingTimeoutReplay: true,
+          loadingTimeoutReplayTimes: 3,
+          openWebglAlignment: false,
           operateBtns: {
             fullscreen: false,
             screenshot: false,
             play: false,
             audio: false,
-            recorder: false,
+            record: false
           },
-          record: "record",
+          recordType: "webm",
-          vod: this.vod,
+          rotate: 0,
-          forceNoOffscreen: this.forceNoOffscreen,
+          showBandwidth: false,
-          isNotMute: this.isNotMute,
+          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
       ));

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

@@ -62,7 +62,7 @@ declare namespace Jessibuca {
         /**
          * 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
          */
-        isFullSize?: boolean;
+        isFullResize?: boolean;
         /**
          * 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
          */
@@ -120,7 +120,7 @@ declare namespace Jessibuca {
         /**
          * 加载过程中文案
          */
-        loadingText?: boolean;
+        loadingText?: string;
         /**
          * 背景图片
          */