@besovideo/webrtc-player 0.8.77 → 0.8.78

package/README.md

@@ -139,7 +139,130 @@ instance.playerStatus : {
     addEventListener(handle: ((bFullscreen: boolean) => void)):void;
     // 移除事件监听
     removeEventListener(handle: ((bFullscreen: boolean) => void)):void;
-  }
+  },
+  volume: {
+    // 获取音量 0 - 1 之间
+    Get(): number,
+    // 设置音量 0 - 1 之间
+    Set(volume: number): void;
+    // 添加事件监听
+    addEventListener(handle: ((volume: number) => void)):void;
+    // 移除事件监听
+    removeEventListener(handle: ((volume: number) => void)):void;
+  },
+  information: {
+    // 获取信息窗口显示状态，是否显示
+    Get(): boolean,
+    // 设置信息窗口显示状态，是否显示
+    Set(bShow: boolean): void;
+    // 添加事件监听
+    addEventListener(handle: ((bShow: boolean) => void)):void;
+    // 移除事件监听
+    removeEventListener(handle: ((bShow: boolean) => void)):void;
+  },
+  record：{
+    // 获取录像状态，是否在录像
+    //"recordStart" 录像已经开始
+    //"recordStop"  录像已结束
+    Get(): {type: "recordStart" | "recordStop"},
+    // 设置录像状态
+    Set(status: {type: "recordStart" | "recordStop"}): void;
+    // 添加事件监听
+    addEventListener(handle: ((status: {type: "recordStart" | "recordStop"}) => void)):void;
+    // 移除事件监听
+    removeEventListener(handle: ((status: {type: "recordStart" | "recordStop"}) => void)):void;
+  },
+  rotate: {
+    // 获取旋转状态，顺时针方向
+    // "Rotate0" 0度 
+    // "Rotate90" 90度 
+    // "Rotate180" 180度 
+    // "Rotate270" 270度
+    Get(): {type: "Rotate0" | "Rotate90" | "Rotate180" | "Rotate270"},
+    // 设置画面旋转状态
+    Set(status: {type: "Rotate0" | "Rotate90" | "Rotate180" | "Rotate270"}): void;
+    // 添加事件监听
+    addEventListener(handle: ((status: {type: "Rotate0" | "Rotate90" | "Rotate180" | "Rotate270"}) => void)):void;
+    // 移除事件监听
+    removeEventListener(handle: ((status: {type: "Rotate0" | "Rotate90" | "Rotate180" | "Rotate270"}) => void)):void;
+  },
+  ptzControl: {
+    // 获取云台控制面板显示状态，是否显示
+    Get(): {show?: boolean},
+    // 设置云台控制面板显示状态
+    Set(status: {show?: boolean}): void;
+    // 添加事件监听
+    addEventListener(handle: ((status: {show: boolean})) => void)):void;
+    // 移除事件监听
+    removeEventListener(handle: ((status: {show: boolean})) => void)):void;
+  }，
+  mike: {
+    // 获取对讲状态，是否在对讲
+    Get(): {talking?: boolean},
+    // 设置对讲状态
+    Set(status: {talking?: boolean}): void;
+    // 添加事件监听
+    addEventListener(handle: ((status: {talking?: boolean})) => void)):void;
+    // 移除事件监听
+    removeEventListener(handle: ((status: {talking?: boolean})) => void)):void;
+  }，
+  screenshot：{
+    //进行截图
+    exec(): void;
+    // 添加事件监听，获取截图结果, 
+    // cancelAutoDownload 函数，调用会取消掉下载图片
+    addEventListener(handle: ((status: {img?: Blob, cancelAutoDownload?: ()=>void})) => void)):void;
+    // 移除事件监听
+    removeEventListener(handle: ((status: {img?: Blob, cancelAutoDownload?: ()=>void })) => void)):void;
+  }，
+  informationGet： () => Promise<{
+    //音频统计信息
+    audio?: {
+      //编码相关
+      codec: {
+        //https://developer.mozilla.org/en-US/docs/Web/API/RTCCodecStats/channels
+        channels?: number;  //通道数
+        //https://developer.mozilla.org/en-US/docs/Web/API/RTCCodecStats/clockRate
+        clockRate: number;  //时钟频率
+        //https://developer.mozilla.org/en-US/docs/Web/API/RTCCodecStats/mimeType
+        mimeType: string;   //mimetype
+        //https://developer.mozilla.org/en-US/docs/Web/API/RTCCodecStats/sdpFmtpLine
+        sdpFmtpLine?: string;
+      };
+      //传输相关
+      rtp: {
+        sampleRates: string;  //采样率
+        bitRate: number;      //bit速率
+        packageLostTotal: number;       //丢包总数
+        avaragePackageLostRate: number; //平均丢包率
+        packageLostRate: number;        //瞬时丢包率
+      };
+    };
+    //视频统计信息
+    video?: {
+      //编码相关
+      codec: {
+        type: string;         //编码类型 video/H264 video/H265  (webcodec)
+        sampleRates: number;  //采样率
+        width: number;        //视频宽度
+        height: number;       //视频高度
+      };
+      //传输相关
+      rtp: {
+        sampleRates: number;  //视频采样率
+        bitRate: number;      //bit 率
+        packageLostTotal: number;     //总丢包数
+        avaragePackageLostRate: number; //平均丢包率
+        packageLostRate: number;   //瞬时丢包率
+      };
+    };
+
+    // 播放相关
+    meta: {
+      lastSeconds: number;  //持续时间 秒数
+      transType: "webrtc" | "bvrtc"; //传输方式
+    };     
+  }>
 }
 
 // clearAllDialog 异步 释放全部打开的dialog 不管是音视频还是对讲

package/dist/main.es.js

@@ -111,7 +111,7 @@ var __async = (__this, __arguments, generator) => {
 var define_processenv_default;
 var init_define_processenv = __esm({
   "<define:processenv>"() {
-    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.77", PROJECT_NAMESPACE: "bvplayer" };
+    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.8.78", PROJECT_NAMESPACE: "bvplayer" };
   }
 });
 
@@ -5317,26 +5317,40 @@ var Notifier = class {
     this._map.set(name, []);
   }
 };
+function GetIDataHandleUtils(handle2) {
+  return handle2;
+}
 var IDataHandle = class {
-  constructor(data, handle2) {
+  constructor(data) {
     this.szHandle = [];
     this._data = data;
+  }
+  doInit() {
+    var _a;
+    this.destory = (_a = this.init) == null ? void 0 : _a.call(this);
+  }
+  setParams({
+    handle: handle2,
+    init: init2
+  }) {
     this.handle = handle2;
+    this.init = init2;
   }
   Get() {
     return this._data;
   }
   Set(data) {
-    if (this._data != data) {
-      this._data = data;
-      this.handle(this._data);
-      this.szHandle.forEach((handler) => handler(this._data));
+    if (this._data != data && this.handle) {
+      this.handle(data);
     }
   }
   addEventListener(handle2) {
     if (this.szHandle.findIndex((item) => item == handle2)) {
       this.szHandle.push(handle2);
     }
+    return () => {
+      this.removeEventListener(handle2);
+    };
   }
   removeEventListener(handle2) {
     const targetIndex = this.szHandle.findIndex((item) => item == handle2);
@@ -7174,10 +7188,13 @@ var screenshotByCanvas = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (
     return;
   try {
     const blob = yield canvasToBlob(canvas);
-    file_default.downLoadBlob(blob, fileName, "png");
+    return { blob, download() {
+      file_default.downLoadBlob(blob, fileName, "png");
+    } };
   } catch (e) {
     logger_default.libError(e.message);
   }
+  return;
 });
 var screenshot = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (videoEl, fileName = `screenshot_${Date.now()}`) {
   if (!videoEl)
@@ -7186,7 +7203,7 @@ var screenshot = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (videoEl,
   canvas.width = videoEl.videoWidth;
   canvas.height = videoEl.videoHeight;
   canvas.getContext("2d").drawImage(videoEl, 0, 0, canvas.width, canvas.height);
-  yield screenshotByCanvas(canvas, fileName);
+  return yield screenshotByCanvas(canvas, fileName);
 });
 var record = (element, stream, fileName = `record_${Date.now()}`) => {
   try {
@@ -7518,9 +7535,9 @@ var VideoPlugin = class extends Plugin {
     const fileName = this._genFileName("snapshot");
     const targetEle = this.canvasEnabled ? this._canvasEl : this._videoEl;
     if (targetEle.localName == "video") {
-      media_default.screenshot(targetEle, fileName);
+      return media_default.screenshot(targetEle, fileName);
     } else {
-      media_default.screenshotByCanvas(targetEle, fileName);
+      return media_default.screenshotByCanvas(targetEle, fileName);
     }
   }
   _genFileName(atcion) {
@@ -8214,6 +8231,15 @@ var SliderPlugin = class extends Plugin {
   get percent() {
     return this._percent;
   }
+  setVolume(percent) {
+    if (this.percent != percent) {
+      this.percent = percent;
+      this.dispatch("change", {
+        target: this,
+        percent: util_default.restrict(this.percent, 0, 1)
+      });
+    }
+  }
   beforeDestroy() {
   }
   init(_container) {
@@ -8267,6 +8293,50 @@ init_logger();
 init_define_processenv();
 init_jsx_shim();
 init_jsx();
+function CreateIntercomUtils(intercomIns, type) {
+  const handle2 = {
+    isBusy: false,
+    talking: false,
+    open(toast) {
+      return __async(this, null, function* () {
+        if (!this.isBusy) {
+          this.isBusy = true;
+          if (!this.talking) {
+            try {
+              if (!navigator || !navigator.mediaDevices) {
+                throw t("mei-you-mai-ke-feng-huo-zhe-mei-you-quan-xian");
+              }
+              yield intercomIns.open(void 0, type);
+              this.talking = true;
+            } catch (e) {
+              if (toast) {
+                toast.error(e);
+              }
+              this.isBusy = false;
+              throw "";
+            }
+          }
+          this.isBusy = false;
+        } else {
+          throw "error busy";
+        }
+      });
+    },
+    close() {
+      return __async(this, null, function* () {
+        if (this.talking && !this.isBusy) {
+          this.isBusy = true;
+          yield intercomIns.close();
+          yield new Promise((r) => {
+            setTimeout(r, 1e3);
+          });
+          this.isBusy = false;
+        }
+      });
+    }
+  };
+  return handle2;
+}
 var _onIcon, _offIcon, _doingIcon, _isBusy, _talk, _intercom, _type, _onTalkStart, onTalkStart_fn, _onTalkEnd, onTalkEnd_fn;
 var MikeButton = class extends HTMLElement {
   constructor() {
@@ -8280,6 +8350,7 @@ var MikeButton = class extends HTMLElement {
     __privateAdd(this, _isBusy, false);
     //是否正在喊话
     __privateAdd(this, _talk, false);
+    this.events = new Events();
     // 麦克风实例
     __privateAdd(this, _intercom, void 0);
     // 协议类型
@@ -8300,8 +8371,7 @@ var MikeButton = class extends HTMLElement {
       return;
     if (!__privateGet(this, _isBusy)) {
       __privateSet(this, _isBusy, true);
-      let pm;
-      pm = state ? __privateMethod(this, _onTalkStart, onTalkStart_fn).call(this) : __privateMethod(this, _onTalkEnd, onTalkEnd_fn).call(this);
+      const pm = state ? __privateMethod(this, _onTalkStart, onTalkStart_fn).call(this) : __privateMethod(this, _onTalkEnd, onTalkEnd_fn).call(this);
       pm.then(() => {
         __privateSet(this, _talk, state);
       }).catch((e) => {
@@ -8351,6 +8421,7 @@ onTalkStart_fn = function() {
     }
     yield (_a = __privateGet(this, _intercom)) == null ? void 0 : _a.open(void 0, __privateGet(this, _type));
     __privateGet(this, _doingIcon).replaceWith(__privateGet(this, _onIcon));
+    this.events.dispatch("intercomStart");
   });
 };
 _onTalkEnd = new WeakSet();
@@ -8363,6 +8434,7 @@ onTalkEnd_fn = function() {
       setTimeout(r, 1e3);
     });
     __privateGet(this, _doingIcon).replaceWith(__privateGet(this, _offIcon));
+    this.events.dispatch("intercomStop");
   });
 };
 customElements.define("mike-button", MikeButton);
@@ -8491,8 +8563,8 @@ var ControllerPluginBase = class extends Plugin {
         return PtzButton;
       },
       mike: () => {
-        const MikeButton2 = new button_default(/* @__PURE__ */ jsx_default.h("mike-button", { inject: options == null ? void 0 : options.inject }), "mike");
-        return MikeButton2;
+        const MikeButton3 = new button_default(/* @__PURE__ */ jsx_default.h("mike-button", { inject: options == null ? void 0 : options.inject }), "mike");
+        return MikeButton3;
       }
     };
     this._controlKeys.forEach((name) => {
@@ -12787,7 +12859,6 @@ var PlayerPlugin = class extends Plugin {
     return "direct" /* DIRECT */;
   }
   init() {
-    var _a;
     logger_default.debug("\u6E32\u67D3PlayerPlugin", this.el);
     this.prepare();
     const videoEl = this._video.init();
@@ -12815,9 +12886,6 @@ var PlayerPlugin = class extends Plugin {
       target: this,
       mode: this._mode
     });
-    this.mikeBtn = (_a = this.el) == null ? void 0 : _a.getElementsByTagName(
-      "mike-button"
-    )[0];
     return this.el;
   }
   get mode() {
@@ -12921,9 +12989,113 @@ var PlayerPlugin = class extends Plugin {
     }
     this.setVideoFit(this._playerConfig.videoFit);
   }
+  startIntercom() {
+    return __async(this, null, function* () {
+      var _a, _b;
+      if (this.mikeBtn) {
+        if (!this.mikeBtn.talking) {
+          this.mikeBtn.talking = true;
+        }
+      } else {
+        if (!((_a = this.intercomUtils) == null ? void 0 : _a.talking)) {
+          try {
+            yield (_b = this.intercomUtils) == null ? void 0 : _b.open(this._toast);
+            this.dispatch("intercomStart");
+          } catch (e) {
+          }
+        }
+      }
+    });
+  }
+  stopIntercom() {
+    var _a, _b;
+    if (this.mikeBtn) {
+      if (this.mikeBtn.talking) {
+        this.mikeBtn.talking = false;
+      }
+    } else {
+      if ((_a = this.intercomUtils) == null ? void 0 : _a.talking) {
+        (_b = this.intercomUtils) == null ? void 0 : _b.close();
+        this.dispatch("intercomStop");
+      }
+    }
+  }
+  screenShot() {
+    return __async(this, null, function* () {
+      const screenshotResult = yield this._video.screenshot();
+      let bDownload = true;
+      this.dispatch("screenshot", screenshotResult && screenshotResult.blob ? {
+        img: screenshotResult.blob,
+        cancelAutoDownload() {
+          bDownload = false;
+        }
+      } : void 0);
+      if (bDownload && (screenshotResult == null ? void 0 : screenshotResult.download)) {
+        screenshotResult == null ? void 0 : screenshotResult.download();
+      }
+    });
+  }
+  setVolume(percent) {
+    var _a, _b;
+    if (isNaN(percent)) {
+      return;
+    }
+    if (percent > 1) {
+      percent = 1;
+    } else if (percent < 0) {
+      percent = 0;
+    }
+    if (this.video.volume != percent) {
+      this.video.volume = percent;
+      if (((_a = this._panel) == null ? void 0 : _a.controller) && this._panel.controller.VolumeSlider) {
+        (_b = this._panel) == null ? void 0 : _b.controller.activeVolume();
+        this._panel.controller.VolumeSlider.percent = this.video.volume;
+        this.DisplayVolumn(percent);
+      }
+      this.dispatch("volumeChange", {
+        percent
+      });
+    }
+  }
+  DisplayVolumn(volume) {
+    var _a;
+    const panel = this._panel;
+    const button = (_a = this.panel) == null ? void 0 : _a.controller.VolumeButton;
+    if (panel && button) {
+      const volumeSlider = panel.controller.VolumeSlider;
+      if (volumeSlider) {
+        volumeSlider.percent = volume;
+      }
+      volume == 0 ? button.Children = /* @__PURE__ */ jsx_default.h(icons_default.Volume, { off: true }) : button.Children = /* @__PURE__ */ jsx_default.h(icons_default.Volume, null);
+    }
+  }
+  recordStart() {
+    var _a, _b;
+    if (!this._recordState.BRecording()) {
+      if ((_a = this._panel) == null ? void 0 : _a.controller.RecordButton) {
+        (_b = this._panel) == null ? void 0 : _b.controller.RecordButton.dispatch("click");
+      } else {
+        this._video.recordStart();
+        this._recordState.dispatch("RecordStart");
+        this.dispatch("recordStart");
+      }
+    }
+  }
+  recordStop() {
+    var _a, _b;
+    if (this._recordState.BRecording()) {
+      if ((_a = this._panel) == null ? void 0 : _a.controller.RecordButton) {
+        (_b = this._panel) == null ? void 0 : _b.controller.RecordButton.dispatch("click");
+      } else {
+        this.dispatch("recordStop");
+        this._video.recordStop();
+        this._recordState.dispatch("RecordEnd");
+      }
+    }
+  }
   // 初始化播放器、按钮相关事件
   initEvents() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     this.video.addEventListener("canplay", () => {
       logger_default.info("Video canplay");
       this._spinner.spin = false;
@@ -12935,10 +13107,17 @@ var PlayerPlugin = class extends Plugin {
         return;
       this._spinner.spin = true;
     });
+    this.ptz.addEventListener("hide", () => {
+      this.ptz.visible = false;
+    });
+    (_b = this._infoModal) == null ? void 0 : _b.addEventListener("hide", () => {
+      this._infoModal.visible = false;
+      window.clearInterval(this._timer);
+    });
     const panel = this._panel;
     if (!panel)
       return;
-    (_b = this.el) == null ? void 0 : _b.addEventListener("mousemove", () => {
+    (_c = this.el) == null ? void 0 : _c.addEventListener("mousemove", () => {
       panel.showThenHide();
     });
     const updatePlayButton = (isInit = false) => {
@@ -12966,10 +13145,9 @@ var PlayerPlugin = class extends Plugin {
         button.Children = /* @__PURE__ */ jsx_default.h(icons_default.Play, null);
       }
     });
-    panel.controller.addEventListener("screenshot", () => {
-      this.dispatch("screenshot");
-      this._video.screenshot();
-    });
+    panel.controller.addEventListener("screenshot", () => __async(this, null, function* () {
+      yield this.screenShot();
+    }));
     panel.controller.addEventListener("recordStart", () => {
       this.dispatch("recordStart");
       this._video.recordStart();
@@ -12991,18 +13169,11 @@ var PlayerPlugin = class extends Plugin {
     panel.controller.addEventListener("ptzControl", () => {
       this.togglePtz();
     });
-    this.ptz.addEventListener("hide", () => {
-      this.ptz.visible = false;
-    });
     panel.controller.addEventListener("fullscreen", () => {
       const currenFullScreen = !(this.el ? fullscreen_default.isFull(this.el) : false);
       this.dispatch("fullscreen", currenFullScreen);
       this.fullscreen();
     });
-    (_c = this._infoModal) == null ? void 0 : _c.addEventListener("hide", () => {
-      this._infoModal.visible = false;
-      window.clearInterval(this._timer);
-    });
     panel.controller.addEventListener("information", () => __async(this, null, function* () {
       this.refreshInfoModal();
     }));
@@ -13012,7 +13183,7 @@ var PlayerPlugin = class extends Plugin {
       if (!isInit) {
         this._video.muted = !muted;
         muted = (_b2 = this._video.getVideoEl()) == null ? void 0 : _b2.muted;
-        this.video.volume = muted ? 0 : 1;
+        this.setVolume(muted ? 0 : 1);
       }
       const button = panel.controller.VolumeButton;
       if (button) {
@@ -13024,27 +13195,26 @@ var PlayerPlugin = class extends Plugin {
       }
     };
     updateVolumeButton(true);
-    function DisplayVolumn(volume) {
-      const button = panel == null ? void 0 : panel.controller.VolumeButton;
-      if (panel && button) {
-        const volumeSlider2 = panel.controller.VolumeSlider;
-        if (volumeSlider2) {
-          volumeSlider2.percent = volume;
-        }
-        volume == 0 ? button.Children = /* @__PURE__ */ jsx_default.h(icons_default.Volume, { off: true }) : button.Children = /* @__PURE__ */ jsx_default.h(icons_default.Volume, null);
-      }
-    }
     panel.controller.addEventListener("volume", () => updateVolumeButton());
     const volumeSlider = panel.controller.VolumeSlider;
     if (volumeSlider) {
       volumeSlider.percent = this.video.volume;
       volumeSlider.addEventListener("change", (e) => {
         panel.controller.activeVolume();
-        this.video.volume = Number(e == null ? void 0 : e.percent);
+        this.setVolume(Number(e == null ? void 0 : e.percent));
         volumeSlider.percent = this.video.volume;
-        DisplayVolumn(Number(e == null ? void 0 : e.percent));
+        this.DisplayVolumn(Number(e == null ? void 0 : e.percent));
       });
     }
+    this.mikeBtn = (_d = this.el) == null ? void 0 : _d.getElementsByTagName(
+      "mike-button"
+    )[0];
+    (_e = this.mikeBtn) == null ? void 0 : _e.events.addEventListener("intercomStart", () => {
+      this.dispatch("intercomStart");
+    });
+    (_f = this.mikeBtn) == null ? void 0 : _f.events.addEventListener("intercomStop", () => {
+      this.dispatch("intercomStop");
+    });
   }
   // 渲染准备视频对象等
   prepare() {
@@ -13176,6 +13346,20 @@ var PlayerPlugin = class extends Plugin {
       ), /* @__PURE__ */ jsx_default.h("div", { className: "player_info-modal_section_main", withNamespace: true }, VideoSection)));
     });
   }
+  set statsInfosV1(val) {
+    this._getStatsInfosV1 = val;
+  }
+  get statsInfosV1() {
+    return () => {
+      var _a;
+      if (this._webrtcConnect) {
+        const videoEle = this._video.getVideoEl();
+        return this._webrtcConnect.getStatsInfosV1(videoEle);
+      } else {
+        return (_a = this._getStatsInfosV1) == null ? void 0 : _a.call(this);
+      }
+    };
+  }
   refreshInfoModal() {
     return __async(this, null, function* () {
       window.clearInterval(this._timer);
@@ -15812,6 +15996,302 @@ function GetBvrtcIStatsInfosV1(mediaPlayer) {
   });
 }
 
+// src/components/subComponent/playState.ts
+init_define_processenv();
+init_jsx_shim();
+function CreateHandleDataUtils(data, init2) {
+  const handle2 = new IDataHandle(data);
+  const handleUtils = GetIDataHandleUtils(handle2);
+  init2(handleUtils, handle2);
+  const handleProxy = {
+    Get() {
+      return handle2.Get();
+    },
+    Set(data2) {
+      return handle2.Set(data2);
+    },
+    addEventListener(callBack) {
+      handle2.addEventListener(callBack);
+    },
+    removeEventListener(callBack) {
+      handle2.removeEventListener(callBack);
+    }
+  };
+  return [handleProxy, handle2];
+}
+function GetHandleDataAction(handle2, data) {
+  const addEventListener = (callback) => {
+    handle2.addEventListener(callback);
+    return () => {
+      handle2.removeEventListener(callback);
+    };
+  };
+  const removeEventListener = (callback) => {
+    handle2.removeEventListener(callback);
+  };
+  return [
+    {
+      exec() {
+        handle2.Set(data);
+      },
+      addEventListener,
+      removeEventListener
+    },
+    handle2
+  ];
+}
+function storeOriIVisibleBase(ele, onShow2, onHide2) {
+  var _a, _b;
+  const oriOnHide = (_a = ele.onHide) == null ? void 0 : _a.bind(ele);
+  const oriOnShow = (_b = ele.onShow) == null ? void 0 : _b.bind(ele);
+  ele.onHide = () => {
+    onHide2 == null ? void 0 : onHide2();
+    oriOnHide == null ? void 0 : oriOnHide();
+  };
+  ele.onShow = () => {
+    onShow2 == null ? void 0 : onShow2();
+    oriOnShow == null ? void 0 : oriOnShow();
+  };
+  return () => {
+    ele.onHide = oriOnHide;
+    ele.onShow = oriOnShow;
+  };
+}
+function CreatePlayerState(player) {
+  const state = {
+    fullscreen: CreateHandleDataUtils(false, (handleUtils) => {
+      handleUtils.setParams({
+        handle() {
+          player.fullscreen();
+        },
+        init() {
+          player.addEventListener("fullscreen", (bFullScreen) => {
+            handleUtils.dispatch(!!bFullScreen);
+          });
+        }
+      });
+    }),
+    volume: CreateHandleDataUtils(player.video.volume, (handleUtils) => {
+      handleUtils.setParams({
+        handle(volume) {
+          player.setVolume(volume);
+        },
+        init() {
+          return player.addEventListener("volumeChange", (percent) => {
+            handleUtils.dispatch(percent == null ? void 0 : percent.percent);
+          });
+        }
+      });
+    }),
+    information: CreateHandleDataUtils(false, (handleUtils) => {
+      handleUtils.setParams({
+        handle(bVisiable) {
+          if (bVisiable != player.infoModal.visible) {
+            if (bVisiable) {
+              player.refreshInfoModal();
+            } else {
+              player.infoModal.visible = false;
+            }
+          }
+        },
+        init() {
+          return storeOriIVisibleBase(
+            player.infoModal,
+            () => {
+              handleUtils.dispatch(true);
+            },
+            () => {
+              handleUtils.dispatch(false);
+            }
+          );
+        }
+      });
+    }),
+    record: CreateHandleDataUtils(
+      { type: "recordStop" },
+      (handleUtils) => {
+        handleUtils.setParams({
+          handle({ type }) {
+            if (type == "recordStart") {
+              player.recordStart();
+            } else {
+              player.recordStop();
+            }
+          },
+          init() {
+            return [
+              player.addEventListener("recordStart", () => {
+                handleUtils.dispatch({ type: "recordStart" });
+              }),
+              player.addEventListener("recordStop", () => {
+                handleUtils.dispatch({ type: "recordStop" });
+              })
+            ];
+          }
+        });
+      }
+    ),
+    rotate: CreateHandleDataUtils(
+      { type: "Rotate0" },
+      (handleUtils) => {
+        handleUtils.setParams({
+          handle(data) {
+            if (data.type == "Rotate0") {
+              player.video.rotate(0);
+            } else if (data.type == "Rotate90") {
+              player.video.rotate(90);
+            } else if (data.type == "Rotate180") {
+              player.video.rotate(180);
+            } else if (data.type == "Rotate270") {
+              player.video.rotate(270);
+            } else {
+              return;
+            }
+            handleUtils.dispatch(data);
+          },
+          init() {
+            return player.addEventListener("rotate", (params) => {
+              console.log(params == null ? void 0 : params.rotateDeg);
+              switch (params == null ? void 0 : params.rotateDeg) {
+                case 0:
+                  handleUtils.dispatch({ type: "Rotate0" });
+                  break;
+                case 90:
+                  handleUtils.dispatch({ type: "Rotate90" });
+                  break;
+                case 180:
+                  handleUtils.dispatch({ type: "Rotate180" });
+                  break;
+                case 270:
+                  handleUtils.dispatch({ type: "Rotate270" });
+                  break;
+              }
+            });
+          }
+        });
+      }
+    ),
+    ptzControl: CreateHandleDataUtils({}, (handleUtils) => {
+      handleUtils.setParams({
+        handle(data) {
+          if (player.ptz.visible != data.show) {
+            player.togglePtz();
+          }
+        },
+        init() {
+          const ptz = player.ptz;
+          return storeOriIVisibleBase(
+            ptz,
+            () => handleUtils.dispatch({ show: true }),
+            () => handleUtils.dispatch({ show: false })
+          );
+        }
+      });
+    }),
+    mike: CreateHandleDataUtils({}, (handleUtils) => {
+      handleUtils.setParams({
+        handle(data) {
+          if (data.talking) {
+            player.startIntercom();
+          } else {
+            player.stopIntercom();
+          }
+        },
+        init() {
+          player.addEventListener("intercomStart", () => {
+            handleUtils.dispatch({ talking: true });
+          });
+          player.addEventListener("intercomStop", () => {
+            handleUtils.dispatch({ talking: false });
+          });
+        }
+      });
+    }),
+    screenshot: GetHandleDataAction(
+      CreateHandleDataUtils(
+        {},
+        (handleUtils) => {
+          handleUtils.setParams({
+            handle() {
+              player.screenShot();
+            },
+            init() {
+              return player.addEventListener("screenshot", (data) => {
+                handleUtils.dispatch({
+                  img: data == null ? void 0 : data.img,
+                  cancelAutoDownload: data == null ? void 0 : data.cancelAutoDownload
+                });
+                data == null ? void 0 : data.cancelAutoDownload();
+              });
+            }
+          });
+        }
+      )[1],
+      {}
+    ),
+    informationGet: () => {
+      var _a;
+      return (_a = player.statsInfosV1) == null ? void 0 : _a.call(player);
+    }
+  };
+  player.addEventListener("init", () => {
+    Object.keys(state).forEach((key) => {
+      var _a, _b;
+      const stateCurrents = state[key];
+      if (stateCurrents instanceof Array) {
+        const stateCurrent = stateCurrents[1];
+        if (stateCurrent) {
+          (_b = (_a = GetIDataHandleUtils(stateCurrent)).doInit) == null ? void 0 : _b.call(_a);
+        }
+      }
+    });
+  });
+  player.addEventListener("destroy", () => {
+    Object.keys(state).forEach((key) => {
+      const stateCurrents = state[key];
+      if (stateCurrents instanceof Array) {
+        const stateCurrent = stateCurrents[1];
+        if (stateCurrent) {
+          const destorys = GetIDataHandleUtils(
+            stateCurrent
+          ).destory;
+          if (destorys instanceof Array) {
+            destorys.forEach((item) => item());
+          } else if (destorys) {
+            destorys();
+          }
+        }
+      }
+    });
+  });
+  function Test() {
+    window.temp1 = instanceState;
+    setTimeout(() => __async(this, null, function* () {
+      instanceState.ptzControl.addEventListener((data) => {
+        console.log(data);
+      });
+      instanceState.ptzControl.Set({ show: true });
+      instanceState.information.Set(true);
+      instanceState.volume.addEventListener(() => {
+        console.log("fuck");
+      });
+      setInterval(() => __async(this, null, function* () {
+        console.log(yield instanceState.informationGet());
+      }), 2e3);
+    }), 2e3);
+  }
+  const instanceState = {};
+  Object.keys(state).forEach((key) => {
+    const temp = state[key];
+    if (temp instanceof Array) {
+      instanceState[key] = temp[0];
+    } else {
+      instanceState[key] = temp;
+    }
+  });
+  return instanceState;
+}
+
 // src/components/puPlayer.tsx
 var createProductRemoteSdp = (puOption, tempToken, callBack, signal) => (localDescription) => __async(void 0, null, function* () {
   if (localDescription.type !== "offer")
@@ -16091,14 +16571,10 @@ var PuPlayer = (props) => {
       width: videoWidth
     });
   });
-  player.addEventListener("fullscreen", (bFullScreen) => {
-    fullscreenStatus.dispatch(!!bFullScreen);
-  });
-  const fullscreenStatus = new IDataHandle(false, () => {
-    player.fullscreen();
-  });
   player.mute(currentMuted);
   tempPuOption && token && player.ptz.setPuParam(tempPuOption, token);
+  const playState = CreatePlayerState(player);
+  const fullscreenStatus = playState.fullscreen;
   const playerEl = player.init();
   (_a = player.panel) == null ? void 0 : _a.controller.addEventListener("volume", () => {
     currentMuted = !currentMuted;
@@ -16173,6 +16649,8 @@ var PuPlayer = (props) => {
           if (player.mikeBtn) {
             player.mikeBtn.intercom = intercom == null ? void 0 : intercom.instance;
             player.mikeBtn.type = this.protocol;
+          } else {
+            player.intercomUtils = CreateIntercomUtils(intercom == null ? void 0 : intercom.instance, this.protocol);
           }
         } catch (e) {
           if (protocol == "webrtc") {
@@ -16259,6 +16737,9 @@ var PuPlayer = (props) => {
             } catch (e2) {
               throw t("da-kai-shi-bai");
             }
+            player.statsInfosV1 = () => {
+              return GetBvrtcIStatsInfosV1(hplayer);
+            };
             const removeRefresh = player.addEventListener(
               "refreshInfoModal",
               (e2) => __async(this, null, function* () {
@@ -16355,6 +16836,10 @@ var PuPlayer = (props) => {
                 volumeSlider.percent = hplayer.getVolume();
                 DisplayVolumn2(Number(e2 == null ? void 0 : e2.percent));
               });
+            } else {
+              player.addEventListener("volumeChange", (params) => {
+                hplayer.setVolume(params == null ? void 0 : params.percent);
+              });
             }
             if (player.mikeBtn) {
               player.mikeBtn.intercom = intercom == null ? void 0 : intercom.instance;
@@ -16468,9 +16953,7 @@ var PuPlayer = (props) => {
     }),
     protocol: type,
     videoFit,
-    playerStatus: {
-      fullscreen: fullscreenStatus
-    }
+    playerStatus: playState
   };
   const result = {
     instance: instance2,

package/dist/types/components/subComponent/mikeButton.d.ts

@@ -1,5 +1,12 @@
 import { IIntercomInstance } from "../../components/intercom";
 import { IToast } from "src/plugins/toast";
+import { Events } from "../../core/events";
+export declare function CreateIntercomUtils(intercomIns: IIntercomInstance, type: "auto" | "webrtc" | "ws-bvrtc"): {
+    isBusy: boolean;
+    talking: boolean;
+    open(toast: IToast): Promise<void>;
+    close(): Promise<void>;
+};
 export declare class MikeButton extends HTMLElement {
     #private;
     inject?: {
@@ -7,6 +14,10 @@ export declare class MikeButton extends HTMLElement {
     };
     constructor();
     get talking(): boolean;
+    events: Events<{
+        intercomStart: undefined;
+        intercomStop: undefined;
+    }>;
     set talking(state: boolean);
     set intercom(ins: IIntercomInstance | undefined);
     set type(type: "auto" | "webrtc" | "ws-bvrtc" | undefined);

package/dist/types/components/subComponent/playState.d.ts

@@ -0,0 +1,37 @@
+import PlayerPlugin from "../../plugins/player";
+import { IDataHandle } from "src/core/events";
+type EnumRotate = "Rotate0" | "Rotate90" | "Rotate180" | "Rotate270";
+export type IPlayerState = ReturnType<typeof CreatePlayerState>;
+export declare function CreatePlayerState(player: PlayerPlugin): {
+    fullscreen: IDataHandle<boolean>;
+    volume: IDataHandle<number>;
+    information: IDataHandle<boolean>;
+    record: IDataHandle<{
+        type: "recordStart" | "recordStop";
+    }>;
+    rotate: IDataHandle<{
+        type: EnumRotate;
+    }>;
+    ptzControl: IDataHandle<{
+        show?: boolean | undefined;
+    }>;
+    mike: IDataHandle<{
+        talking?: boolean | undefined;
+    }>;
+    screenshot: IDataHandle<{
+        img?: Blob | undefined;
+        cancelAutoDownload?: (() => void) | undefined;
+    }> | {
+        exec(): void;
+        addEventListener: (handle: (data: {
+            img?: Blob | undefined;
+            cancelAutoDownload?: (() => void) | undefined;
+        }) => void) => () => void;
+        removeEventListener: (handle: (data: {
+            img?: Blob | undefined;
+            cancelAutoDownload?: (() => void) | undefined;
+        }) => void) => void;
+    };
+    informationGet: () => Promise<import("../../plugins/player/reducers/types").IStatsInfosV1> | undefined;
+};
+export {};

package/dist/types/core/events.d.ts

@@ -17,16 +17,33 @@ export interface IEvent {
 }
 export interface IEventMap {
 }
+export interface IDataHandleUtils<T> {
+    dispatch(data: T): void;
+    setParams(params: {
+        handle: (data: T) => void;
+        init?: () => void | (() => void) | Array<() => void>;
+    }): void;
+    doInit(): void;
+    destory?: void | (() => void) | Array<() => void>;
+}
+export declare function GetIDataHandleUtils<T>(handle: IDataHandle<T>): IDataHandleUtils<T>;
 export declare class IDataHandle<T> {
     private _data;
-    private handle;
-    constructor(data: T, handle: (data: T) => void);
+    private handle?;
+    protected destory?: void | (() => void);
+    protected init?: () => void;
+    protected doInit(): void;
+    constructor(data: T);
+    protected setParams({ handle, init, }: {
+        handle: (data: T) => void;
+        init?: () => void | (() => void);
+    }): void;
     Get(): T;
     Set(data: T): void;
     private szHandle;
-    addEventListener(handle: (data: T) => void): void;
+    addEventListener(handle: (data: T) => void): () => void;
     removeEventListener(handle: (data: T) => void): void;
-    dispatch(data: T): void;
+    protected dispatch(data: T): void;
 }
 export declare class Events<M extends IEventMap> {
     protected _notifier: INotifier<any, any>;

package/dist/types/plugins/player/event.d.ts

@@ -23,8 +23,16 @@ export interface IPlayerPluginEventMap extends IPluginEventMap {
     contextmenu: Event;
     recordStart: undefined;
     recordStop: undefined;
-    screenshot: undefined;
+    screenshot: undefined | {
+        img: Blob;
+        cancelAutoDownload: () => void;
+    };
     fullscreen: boolean;
     rotate: IRotateEvent;
+    volumeChange: {
+        percent: number;
+    };
+    intercomStart: undefined;
+    intercomStop: undefined;
 }
 export {};

package/dist/types/plugins/player/index.d.ts

@@ -5,10 +5,11 @@ import { IControlPluginMap } from "../controller";
 import MaskPlugin from "../mask";
 import SpinnerPlugin from "../spinner";
 import VideoPlugin from "../video";
+import ModalPlugin from "../modal";
 import PlayerPanel from "./panel";
 import { IPlayerPluginEventMap } from "./event";
 import PtzPlugin from "../ptz";
-import { MikeButton } from "src/components/subComponent/mikeButton";
+import { CreateIntercomUtils, MikeButton } from "src/components/subComponent/mikeButton";
 import { IPuOption } from "src/main";
 export declare enum PLAYER_MODES {
     DIRECT = "direct",
@@ -76,7 +77,7 @@ declare class PlayerPlugin extends Plugin<HTMLDivElement, IPlayerPluginEventMap>
     get video(): VideoPlugin;
     get spinner(): SpinnerPlugin;
     get mask(): MaskPlugin;
-    private get infoModal();
+    get infoModal(): ModalPlugin;
     get panel(): PlayerPanel | undefined;
     play(muted?: boolean): Promise<void>;
     pause(): void;
@@ -86,12 +87,23 @@ declare class PlayerPlugin extends Plugin<HTMLDivElement, IPlayerPluginEventMap>
     close(): Promise<void>;
     protected beforeDestroy(): void;
     private loadPlayerConfig;
+    intercomUtils?: ReturnType<typeof CreateIntercomUtils>;
+    startIntercom(): Promise<void>;
+    stopIntercom(): void;
+    screenShot(): Promise<void>;
+    setVolume(percent: number): void;
+    private DisplayVolumn;
+    recordStart(): void;
+    recordStop(): void;
     private initEvents;
     private prepare;
     private prepareDirect;
     private closeWebrtc;
     showMediaStaticInfo({ audio, video, meta }: IStatsInfosV1): Promise<void>;
-    private refreshInfoModal;
+    private _getStatsInfosV1?;
+    set statsInfosV1(val: (() => Promise<IStatsInfosV1>) | undefined);
+    get statsInfosV1(): (() => Promise<IStatsInfosV1>) | undefined;
+    refreshInfoModal(): Promise<void>;
     togglePtz(): Promise<void>;
     enableCanvas(enable: boolean, captureStream?: () => MediaStream): void;
     replaceCanvas(canvas: HTMLCanvasElement): void;

package/dist/types/plugins/slider.d.ts

@@ -15,6 +15,7 @@ declare class SliderPlugin extends Plugin<HTMLDivElement, ISliderPluginEventMap>
     constructor(className?: string);
     set percent(v: number);
     get percent(): number;
+    setVolume(percent: number): void;
     protected beforeDestroy(): void;
     init(_container?: RenderTarget): RenderTarget;
 }

package/dist/types/plugins/video.d.ts

@@ -46,7 +46,10 @@ declare class VideoPlugin extends Plugin<HTMLDivElement, IVideoPluginEventMap> {
     setCaptureProvider(capture?: () => MediaStream): void;
     play(): Promise<void>;
     pause(): void;
-    screenshot(): void;
+    screenshot(): Promise<{
+        blob: Blob | null;
+        download(): void;
+    } | undefined>;
     private _genFileName;
     recordStart(): void;
     recordStop(): void;

package/dist/types/utils/media.d.ts

@@ -33,8 +33,14 @@ declare global {
 declare function webcodecVisiableChangeResumePlay(videoEle: HTMLVideoElement): void;
 declare const media: {
     canvasToBlob: (canvas: HTMLCanvasElement) => Promise<Blob | null>;
-    screenshotByCanvas: (canvas?: HTMLCanvasElement | null, fileName?: string) => Promise<void>;
-    screenshot: (videoEl?: HTMLVideoElement | null, fileName?: string) => Promise<void>;
+    screenshotByCanvas: (canvas?: HTMLCanvasElement | null, fileName?: string) => Promise<{
+        blob: Blob | null;
+        download(): void;
+    } | undefined>;
+    screenshot: (videoEl?: HTMLVideoElement | null, fileName?: string) => Promise<{
+        blob: Blob | null;
+        download(): void;
+    } | undefined>;
     record: (element: IStreamProvider, stream?: MediaStream | null, fileName?: string) => [MediaRecorder?, MediaStream?];
     getMediaDir: (option: IMediaOption) => number;
     video2Canvas: (video: HTMLVideoElement, opts: IVideo2CanvasOptions) => ICanvasControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besovideo/webrtc-player",
-  "version": "0.8.77",
+  "version": "0.8.78",
   "description": "@besovideo/webrtc-player desc",
   "type": "module",
   "types": "./dist/types/main.d.ts",