fix:升级 jessibuca到jessibuca-pro;解决海康264和h265视频流无法播放问题

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>
@@ -23,8 +24,8 @@
 </template>
 
 <script>
-let jessibucaPlayer = {};
+  let jessibucaPlayer = {};
-export default {
+  export default {
     name: 'jessibuca',
     data() {
       return {
@@ -89,20 +90,26 @@ export default {
         let options = {};
         console.log("hasAudio  " + this.hasAudio)
 
-      jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
+        jessibucaPlayer[this._uid] = new window.JessibucaPro(Object.assign(
           {
             container: this.$refs.container,
             videoBuffer: 0.2, // 最大缓冲时长，单位秒
             isResize: true,
             decoder: "static/js/jessibuca/decoder.js",
-          useMSE: false,
+            useMSE: true,
-          showBandwidth: false,
+            debug: false,
-          isFlv: true,
+            useWCS:true,
+            useSIMD: false,
+            // showBandwidth: false,
+            // isFlv: true,
+            wcsUseVideoRender:true,
+            // autoWasm:true,
             // text: "WVP-PRO",
             // background: "static/images/zlm-logo.png",
             loadingText: "加载中",
-          hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
+            // hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
-          debug: false,
+            debug: true,
+            hasVideo:true,
             supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
             operateBtns: {
               fullscreen: false,
@@ -111,10 +118,9 @@ export default {
               audio: false,
               recorder: false,
             },
-          record: "record",
+            isNotMute: false,
-          vod: this.vod,
+            heartTimeout: 10,
-          forceNoOffscreen: this.forceNoOffscreen,
+            forceNoOffscreen: true,
-          isNotMute: this.isNotMute,
           },
           options
         ));
@@ -224,13 +230,13 @@ export default {
         jessibucaPlayer[this._uid].on("play", () => {
           this.playing = true;
           this.loaded = true;
-        this.quieting = jessibuca.quieting;
+          // this.quieting = jessibuca.quieting;
         });
         if (jessibucaPlayer[this._uid].hasLoaded()) {
           jessibucaPlayer[this._uid].play(url);
         } else {
           jessibucaPlayer[this._uid].on("load", () => {
-          console.log("load 播放")
+            console.log("load 播放", url)
             jessibucaPlayer[this._uid].play(url);
           });
         }
@@ -291,11 +297,11 @@ export default {
       this.loaded = false;
       this.performance = "";
     },
-}
+  }
 </script>
 
 <style>
-.buttons-box {
+  .buttons-box {
     width: 100%;
     height: 28px;
     background-color: rgba(43, 51, 63, 0.7);
@@ -307,9 +313,9 @@ export default {
     bottom: 0;
     user-select: none;
     z-index: 10;
-}
+  }
 
-.jessibuca-btn {
+  .jessibuca-btn {
     width: 20px;
     color: rgb(255, 255, 255);
     line-height: 27px;
@@ -318,10 +324,10 @@ export default {
     cursor: pointer;
     text-align: center;
     font-size: 0.8rem !important;
-}
+  }
 
-.buttons-box-right {
+  .buttons-box-right {
     position: absolute;
     right: 0;
-}
+  }
 </style>