Merge pull request #1777 from q792602257/master

[Feature] 实现h265web功能

web_src/index.html

@@ -15,6 +15,8 @@
     <script type="text/javascript" src="./static/js/ZLMRTCClient.js"></script>
     <script type="text/javascript" src="./static/js/config.js"></script>
     <script type="text/javascript" src="./static/js/jquery-3.7.1.min.js"></script>
+    <script type="text/javascript" src="./static/js/h265web/h265webjs-v20221106.js"></script>
+    <script type="text/javascript" src="./static/js/h265web/missile.js"></script>
 
     <div id="app"></div>
 

web_src/src/components/common/h265web.vue

@@ -1,31 +1,36 @@
 <template>
   <div ref="container" @dblclick="fullscreenSwich" style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
+    <div id="glplayer" style="width: 100%; height: 100%; display: flex"></div>
     <div class="buttons-box" id="buttonsBox">
       <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-play h265web-btn" @click="unPause"></i>
-        <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
+        <i v-if="playing" class="iconfont icon-pause h265web-btn" @click="pause"></i>
-        <i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
+        <i class="iconfont icon-stop h265web-btn" @click="destroy"></i>
-        <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()"></i>
+        <i v-if="isNotMute" class="iconfont icon-audio-high h265web-btn" @click="mute()"></i>
-        <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()"></i>
+        <i v-if="!isNotMute" class="iconfont icon-audio-mute h265web-btn" @click="cancelMute()"></i>
       </div>
       <div class="buttons-box-right">
-        <span class="jessibuca-btn">{{ kBps }} kb/s</span>
+        <!--          <i class="iconfont icon-file-record1 h265web-btn"></i>-->
-        <!--          <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
+        <!--          <i class="iconfont icon-xiangqing2 h265web-btn" ></i>-->
-        <!--          <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
+        <i class="iconfont icon-camera1196054easyiconnet h265web-btn" @click="screenshot"
-        <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)"
            style="font-size: 1rem !important"></i>
-        <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
+        <i class="iconfont icon-shuaxin11 h265web-btn" @click="playBtnClick"></i>
-        <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
+        <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 h265web-btn" @click="fullscreenSwich"></i>
-        <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
+        <i v-if="fullscreen" class="iconfont icon-weibiaoti11 h265web-btn" @click="fullscreenSwich"></i>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-let jessibucaPlayer = {};
+let h265webPlayer = {};
+/**
+ * 从github上复制的
+ * @see https://github.com/numberwolf/h265web.js/blob/master/example_normal/index.js
+ */
+const token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
 export default {
-  name: 'jessibuca',
+  name: 'h265web',
   data() {
     return {
       playing: false,
@@ -34,7 +39,6 @@ export default {
       fullscreen: false,
       loaded: false, // mute
       speed: 0,
-      performance: "", // 工作情况
       kBps: 0,
       btnDom: null,
       videoInfo: null,
@@ -88,182 +92,94 @@ export default {
     create() {
       let options = {};
       console.log("hasAudio  " + this.hasAudio)
-
+      h265webPlayer[this._uid] = new window.new265webjs(this.videoUrl, Object.assign(
-      jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
         {
-          container: this.$refs.container,
+          player: "glplayer", // 播放器容器id
-          videoBuffer: 0.2, // 最大缓冲时长，单位秒
+          width: 960,
-          isResize: true,
+          height: 540,
-          decoder: "static/js/jessibuca/decoder.js",
+          token : token,
-          useMSE: false,
+          extInfo : {
-          showBandwidth: false,
+            coreProbePart : 0.4,
-          isFlv: true,
+            probeSize : 8192,
-          // text: "WVP-PRO",
+            ignoreAudio : 0
-          // 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 jessibuca = jessibucaPlayer[this._uid];
+      let h265web = h265webPlayer[this._uid];
-      let _this = this;
+      h265web.onOpenFullScreen = () => {
-      jessibuca.on("load", function () {
+        this.fullscreen = true
-        console.log("on load init");
+      }
-      });
+      h265web.onCloseFullScreen = () => {
-
+        this.fullscreen = false
-      jessibuca.on("log", function (msg) {
+      }
-        console.log("on log", msg);
+      h265web.onReadyShowDone = () => {
-      });
+        // 准备好显示了，尝试自动播放
-      jessibuca.on("record", function (msg) {
+        const result = h265web.play()
-        console.log("on record:", msg);
+        this.playing = result;
-      });
+      }
-      jessibuca.on("pause", function () {
+      h265web.onLoadFinish = () => {
-        _this.playing = false;
+        this.loaded = true;
-      });
+        // 可以获取mediaInfo
-      jessibuca.on("play", function () {
+        // @see https://github.com/numberwolf/h265web.js/blob/8b26a31ffa419bd0a0f99fbd5111590e144e36a8/example_normal/index.js#L252C9-L263C11
-        _this.playing = true;
+        // mediaInfo = playerObj.mediaInfo();
-      });
+      }
-      jessibuca.on("fullscreen", function (msg) {
+      h265web.onPlayTime = (...args) => {
-        console.log("on fullscreen", msg);
+        console.log(args)
-        _this.fullscreen = msg
+      }
-      });
+      h265web.do()
-
+    },
-      jessibuca.on("mute", function (msg) {
+    screenshot: function () {
-        console.log("on mute", msg);
+      if (h265webPlayer[this._uid]) {
-        _this.isNotMute = !msg;
+        h265webPlayer[this._uid].screenshot();
-      });
-      jessibuca.on("audioInfo", function (msg) {
-        // console.log("audioInfo", msg);
-      });
-
-      jessibuca.on("videoInfo", function (msg) {
-        // this.videoInfo = msg;
-        console.log("videoInfo", 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) {
-          show = "非常流畅";
-        } else if (performance === 1) {
-          show = "流畅";
       }
-        _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);
-      });
-
-      // 显示时间戳 PTS
-      jessibuca.on('videoFrame', function () {
-
-      })
-
-      //
-      jessibuca.on('metadata', function () {
-
-      });
     },
     playBtnClick: function (event) {
       this.play(this.videoUrl)
     },
     play: function (url) {
       console.log(url)
-      if (jessibucaPlayer[this._uid]) {
+      if (h265webPlayer[this._uid]) {
         this.destroy();
       }
       this.create();
-      jessibucaPlayer[this._uid].on("play", () => {
+    },
-        this.playing = true;
+    unPause: function () {
-        this.loaded = true;
+      if (h265webPlayer[this._uid]) {
-        this.quieting = jessibuca.quieting;
+        h265webPlayer[this._uid].play();
-      });
-      if (jessibucaPlayer[this._uid].hasLoaded()) {
-        jessibucaPlayer[this._uid].play(url);
-      } else {
-        jessibucaPlayer[this._uid].on("load", () => {
-          console.log("load 播放")
-          jessibucaPlayer[this._uid].play(url);
-        });
       }
+      this.playing = h265webPlayer[this._uid].isPlaying();
+      this.err = "";
     },
     pause: function () {
-      if (jessibucaPlayer[this._uid]) {
+      if (h265webPlayer[this._uid]) {
-        jessibucaPlayer[this._uid].pause();
+        h265webPlayer[this._uid].pause();
       }
-      this.playing = false;
+      this.playing = h265webPlayer[this._uid].isPlaying();
       this.err = "";
-      this.performance = "";
     },
     mute: function () {
-      if (jessibucaPlayer[this._uid]) {
+      if (h265webPlayer[this._uid]) {
-        jessibucaPlayer[this._uid].mute();
+        h265webPlayer[this._uid].setVoice(0.0);
+        this.isNotMute = false;
       }
     },
     cancelMute: function () {
-      if (jessibucaPlayer[this._uid]) {
+      if (h265webPlayer[this._uid]) {
-        jessibucaPlayer[this._uid].cancelMute();
+        h265webPlayer[this._uid].setVoice(1.0);
+        this.isNotMute = true;
       }
     },
     destroy: function () {
-      if (jessibucaPlayer[this._uid]) {
+      if (h265webPlayer[this._uid]) {
-        jessibucaPlayer[this._uid].destroy();
+        h265webPlayer[this._uid].release();
       }
       if (document.getElementById("buttonsBox") == null) {
         this.$refs.container.appendChild(this.btnDom)
       }
-      jessibucaPlayer[this._uid] = null;
+      h265webPlayer[this._uid] = null;
       this.playing = false;
       this.err = "";
-      this.performance = "";
 
     },
     eventcallbacK: function (type, message) {
@@ -273,7 +189,11 @@ export default {
     },
     fullscreenSwich: function () {
       let isFull = this.isFullscreen()
-      jessibucaPlayer[this._uid].setFullscreen(!isFull)
+      if (isFull) {
+        h265webPlayer[this._uid].closeFullScreen()
+      } else {
+        h265webPlayer[this._uid].fullScreen()
+      }
       this.fullscreen = !isFull;
     },
     isFullscreen: function () {
@@ -284,12 +204,11 @@ export default {
     }
   },
   destroyed() {
-    if (jessibucaPlayer[this._uid]) {
+    if (h265webPlayer[this._uid]) {
-      jessibucaPlayer[this._uid].destroy();
+      h265webPlayer[this._uid].destroy();
     }
     this.playing = false;
     this.loaded = false;
-    this.performance = "";
   },
 }
 </script>
@@ -309,7 +228,7 @@ export default {
   z-index: 10;
 }
 
-.jessibuca-btn {
+.h265web-btn {
   width: 20px;
   color: rgb(255, 255, 255);
   line-height: 27px;

web_src/src/components/dialog/devicePlayer.vue

@@ -15,7 +15,11 @@
                         :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px"
                         :hasAudio="hasAudio" fluent autoplay live></rtc-player>
           </el-tab-pane>
-          <el-tab-pane label="h265web">h265web敬请期待</el-tab-pane>
+          <el-tab-pane label="h265web" name="h265web">
+            <h265web v-if="activePlayer === 'h265web'" ref="h265web"
+                    :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px"
+                    :hasAudio="hasAudio" fluent autoplay live></h265web>
+          </el-tab-pane>
         </el-tabs>
         <jessibucaPlayer v-if="Object.keys(this.player).length == 1 && this.player.jessibuca" ref="jessibuca"
                          :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
@@ -23,7 +27,9 @@
         <rtc-player v-if="Object.keys(this.player).length == 1 && this.player.webRTC" ref="jessibuca"
                     :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
                     height="100px" :hasAudio="hasAudio" fluent autoplay live></rtc-player>
-
+        <h265web v-if="Object.keys(this.player).length == 1 && this.player.h265web" ref="jessibuca"
+                    :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError"
+                    height="100px" :hasAudio="hasAudio" fluent autoplay live></h265web>
       </div>
       <div id="shared" style="text-align: right; margin-top: 1rem;">
 
@@ -275,11 +281,13 @@ import ptzScan from "../common/ptzScan.vue";
 import ptzWiper from "../common/ptzWiper.vue";
 import ptzSwitch from "../common/ptzSwitch.vue";
 import mediaInfo from "../common/mediaInfo.vue";
+import H265web from "../common/h265web.vue";
 
 export default {
   name: 'devicePlayer',
   props: {},
   components: {
+    H265web,
     PtzPreset,PtzCruising,ptzScan,ptzWiper,ptzSwitch,mediaInfo,
     LivePlayer, jessibucaPlayer, rtcPlayer,
   },
@@ -309,6 +317,7 @@ export default {
       player: {
         jessibuca: ["ws_flv", "wss_flv"],
         webRTC: ["rtc", "rtcs"],
+        h265web: ["ws_flv", "wss_flv"],
       },
       showVideoDialog: false,
       streamId: '',

web_src/static/js/h265web/index.d.ts

@@ -0,0 +1,97 @@
+export interface Web265JsExtraConfig {
+  moovStartFlag?: boolean
+  rawFps?: number
+  autoCrop?: boolean
+  core?: 0 | 1
+  coreProbePart?: number
+  ignoreAudio?: 0 | 1
+  probeSize?: number
+}
+
+export interface Web265JsConfig {
+  /**
+   *The type of the file to be played, do not fill in the automatic identification
+   */
+  type?: 'mp4' | 'hls' | 'ts' | 'raw265' | 'flv'
+  /**
+   * playback window dom id value
+   */
+  player: string
+  /**
+   * the video window width size
+   */
+  width: number
+  /**
+   * the video window height size
+   */
+  height: number
+  /**
+   * player token value
+   */
+  token: string
+  extInfo?: Web265JsExtraConfig
+}
+
+export interface Web265JsMediaInfo {
+  audioNone: boolean
+  durationMs: number
+  fps: number
+  sampleRate: number
+  size: {
+    height: number
+    width: number
+  }
+  videoCodec: 0 | 1
+  isHEVC: boolean
+  videoType: Web265JsConfig['type']
+}
+
+interface New265WebJs {
+  onSeekFinish(): void
+  onRender(
+    width: number,
+    height: number,
+    imageBufferY: typeof Uint8Array,
+    imageBufferB: typeof Uint8Array,
+    imageBufferR: typeof Uint8Array
+  ): void
+  onLoadFinish(): void
+  onPlayTime(videoPTS: number): void
+  onPlayFinish(): void
+  onCacheProcess(cPts: number): void
+  onReadyShowDone(): void
+  onLoadCache(): void
+  onLoadCacheFinshed(): void
+  onOpenFullScreen(): void
+  onCloseFullScreen(): void
+  do(): void
+  pause(): void
+  isPlaying(): boolean
+  setRenderScreen(state: boolean): void
+  seek(pts: number): void
+  setVoice(volume: number): void
+  mediaInfo(): Web265JsMediaInfo
+  fullScreen(): void
+  closeFullScreen(): void
+  playNextFrame(): void
+  snapshot(): void
+  release(): void
+  setPlaybackRate(rate: number): void
+  getPlaybackRate(): number
+}
+
+declare type new265webJsFn = (
+  url: string,
+  config: Web265JsConfig
+) => New265WebJs
+
+declare global {
+  interface Window {
+    new265webjs: new265webJsFn
+  }
+}
+
+export default class H265webjsModule {
+  static createPlayer: (url: string, config: Web265JsConfig) => New265WebJs
+  static clear(): void
+}

web_src/static/js/h265web/index.js

@@ -0,0 +1,32 @@
+/********************************************************* 
+ * LICENSE: LICENSE-Free_CN.MD
+ * 
+ * Author: Numberwolf - ChangYanlong
+ * QQ: 531365872
+ * QQ Group:925466059
+ * Wechat: numberwolf11
+ * Discord: numberwolf#8694
+ * E-Mail: porschegt23@foxmail.com
+ * Github: https://github.com/numberwolf/h265web.js
+ * 
+ * 作者: 小老虎(Numberwolf)(常炎隆)
+ * QQ: 531365872
+ * QQ群: 531365872
+ * 微信: numberwolf11
+ * Discord: numberwolf#8694
+ * 邮箱: porschegt23@foxmail.com
+ * 博客: https://www.jianshu.com/u/9c09c1e00fd1
+ * Github: https://github.com/numberwolf/h265web.js
+ * 
+ **********************************************************/
+require('./h265webjs-v20221106');
+export default class h265webjs {
+	static createPlayer(videoURL, config) {
+		return window.new265webjs(videoURL, config);
+	}
+
+	static clear() {
+		global.STATICE_MEM_playerCount = -1;
+		global.STATICE_MEM_playerIndexPtr = 0;
+    }
+}