@besovideo/webrtc-player 0.10.26 → 0.10.28

package/README.md

@@ -33,7 +33,8 @@ import {
   IPuPlayerProps,
   IPuPlayerInstance,
   clearAllDialog,
-  callEndPointUtils
+  callEndPointUtils,
+  globalConfigHandler
 } from "@besovideo/webrtc-player";
 import "@besovideo/webrtc-player/dist/main.es.css";
 
@@ -98,6 +99,10 @@ const { instance } = PuPlayer({
   localRecordCfg?: {
     //多久产生一个录像文件 5 - 60， 默认 20
     minuteOneFile ?: number; 
+  },
+  // (可选) 播放窗口水印配置，支持 string 或 string[] 多行水印
+  watermark?: {
+    text: "测试水印",
   }
 });
 
@@ -465,7 +470,11 @@ const { instance } = PlayBack({
   zIndexMenu?: number,
 
   //（可选） 控制是否显示弹幕，默认显示
-  displayMode?: 'playback'
+  displayMode?: 'playback',
+  //（可选）播放窗口水印配置，支持全局配置和实例覆盖
+  watermark?: {
+      text: "测试水印",
+  }
 })
 
 // 打开回放
@@ -473,6 +482,104 @@ instance.open()
 
 ```
 
+**水印配置**
+
+`PuPlayer` 和 `PlayBack` 支持水印层。水印是播放窗口上的 DOM/CSS 叠层，不会写入本地录像文件。
+
+```typescript
+import { globalConfigHandler, PuPlayer, PlayBack } from "@besovideo/webrtc-player";
+
+interface IWatermarkConfig {
+  // 是否启用水印
+  enable?: boolean;
+  // 水印文本；数组会按多行显示
+  text?: string | string[];
+  // 水印透明度
+  opacity?: number;
+  // 字号
+  fontSize?: number;
+  // 字重
+  fontWeight?: number | string;
+  // 文字颜色
+  color?: string;
+  // 描边颜色
+  strokeColor?: string;
+  // 描边宽度
+  strokeWidth?: number;
+  // 旋转角度
+  rotate?: number;
+  // 最小横向间距
+  gapX?: number;
+  // 最小纵向间距
+  gapY?: number;
+  // 大屏自适应密度：最多显示的列数
+  maxColumns?: number;
+  // 大屏自适应密度：最多显示的行数
+  maxRows?: number;
+  // 可选，水印层级；默认不设置
+  zIndex?: number;
+}
+
+// 全局配置：影响之后创建的 PuPlayer 和 PlayBack 实例
+globalConfigHandler.setDefaultProps({
+  watermark: {
+    // 支持 string 或 string[]，数组会按多行显示
+    text: ["测试水印", "仅供内部使用"],
+    // 是否启用水印，默认 true；设置为 false 可关闭
+    enable: true,
+    // 水印透明度，默认 0.28
+    opacity: 0.28,
+    // 字号，默认 16
+    fontSize: 16,
+    // 字重，默认 normal
+    fontWeight: "normal",
+    // 文字颜色，默认 #fff
+    color: "#fff",
+    // 描边颜色，默认 #000，用于提升浅色/复杂画面上的可读性
+    strokeColor: "#000",
+    // 描边宽度，默认 2
+    strokeWidth: 2,
+    // 旋转角度，默认 -20
+    rotate: -20,
+    // 最小横向间距，默认 180
+    gapX: 180,
+    // 最小纵向间距，默认 120
+    gapY: 120,
+    // 大屏自适应密度：最多约 4 列，默认 4
+    maxColumns: 4,
+    // 大屏自适应密度：最多约 3 行，默认 3
+    maxRows: 3,
+    // 可选，水印层级；默认不设置，位于视频上方、遮罩和控制层下方
+    // zIndex: 1,
+  },
+});
+
+// 单实例覆盖全局配置
+PuPlayer({
+  // ...
+  watermark: {
+    text: "当前设备水印",
+    maxColumns: 3,
+    maxRows: 2,
+  },
+});
+
+// 单实例关闭水印
+PlayBack({
+  // ...
+  watermark: {
+    enable: false,
+  },
+});
+```
+
+水印间距会根据播放窗口大小自动调整。`gapX` / `gapY` 表示最小间距，`maxColumns` / `maxRows` 用于限制大屏下最多显示的水印密度：
+
+```typescript
+实际横向间距 = Math.max(gapX, 播放窗口宽度 / maxColumns)
+实际纵向间距 = Math.max(gapY, 播放窗口高度 / maxRows)
+```
+
 ***媒体流推送***
 ``` typescript
 const callEndPointUtils: {
@@ -665,8 +772,6 @@ yarn start
 yarn version
 yarn build
 yarn publish
-# 版本号按照 Major.Minor.Patch 规范
-# 可参考https://www.jianshu.com/p/c675121a8bfd
 
 
 ```

package/dist/main.browser.css

@@ -521,6 +521,18 @@
   width: 100%;
   height: 100%;
 }
+.bvplayer-watermark {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  background-repeat: repeat;
+}
 .bvplayer-controller {
   position: absolute;
   bottom: 0;

package/dist/main.browser.js

@@ -124,7 +124,7 @@ var bvPlayerCore = (() => {
   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.10.26", PROJECT_NAMESPACE: "bvplayer" };
+      define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.10.28", PROJECT_NAMESPACE: "bvplayer" };
     }
   });
 
@@ -21890,10 +21890,7 @@ padding: 2px 5px;
       return glbConfig;
     },
     setDefaultProps: function(props) {
-      Object.keys(props).forEach((itemKey) => {
-        const key = itemKey;
-        glbConfig[key] = props[key];
-      });
+      Object.assign(glbConfig, props);
     }
   };
 
@@ -29083,6 +29080,96 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
   };
   var recordState_default = RecordStatePlugin;
 
+  // src/plugins/watermark.ts
+  init_define_processenv();
+  init_jsx_shim();
+  var PLUGIN_NAME_WATERMARK = "watermark";
+  var defaultWatermarkConfig = {
+    enable: true,
+    opacity: 0.28,
+    fontSize: 16,
+    fontWeight: "normal",
+    color: "#fff",
+    strokeColor: "#000",
+    strokeWidth: 2,
+    rotate: -20,
+    gapX: 180,
+    gapY: 120,
+    maxColumns: 4,
+    maxRows: 3
+  };
+  var escapeXml = (text2) => text2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+  var normalizeText = (text2) => {
+    if (typeof text2 === "string")
+      return text2 ? [text2] : [];
+    return (text2 || []).filter((item) => item);
+  };
+  var createWatermarkSvg = (config) => {
+    const lineHeight = Math.round(config.fontSize * 1.5);
+    const startY = config.gapY / 2 - (config.text.length - 1) * lineHeight / 2;
+    const textNodes = config.text.map((item, index) => {
+      const y2 = startY + index * lineHeight;
+      return `<text x="50%" y="${y2}" text-anchor="middle">${escapeXml(item)}</text>`;
+    }).join("");
+    return `
+<svg xmlns="http://www.w3.org/2000/svg" width="${config.gapX}" height="${config.gapY}" viewBox="0 0 ${config.gapX} ${config.gapY}">
+  <g transform="rotate(${config.rotate} ${config.gapX / 2} ${config.gapY / 2})" fill="${escapeXml(config.color)}" fill-opacity="${config.opacity}" stroke="${escapeXml(config.strokeColor)}" stroke-opacity="${config.opacity}" stroke-width="${config.strokeWidth}" paint-order="stroke" font-size="${config.fontSize}" font-weight="${escapeXml(`${config.fontWeight}`)}" font-family="Arial, sans-serif">
+    ${textNodes}
+  </g>
+</svg>`;
+  };
+  var mergeWatermarkConfig = (...configs) => {
+    return configs.reduce((result, config) => {
+      if (!config)
+        return result;
+      return __spreadValues(__spreadValues({}, result), config);
+    }, {});
+  };
+  var WatermarkPlugin = class extends Plugin {
+    constructor(config) {
+      super(PLUGIN_NAME_WATERMARK, "div");
+      this._config = config || {};
+    }
+    init(_container) {
+      this.render();
+      if (this.el && window.ResizeObserver) {
+        this._resizeObserver = new ResizeObserver(() => {
+          this.render();
+        });
+        this._resizeObserver.observe(this.el);
+      }
+      return this.el;
+    }
+    beforeDestroy() {
+      var _a;
+      (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    }
+    render() {
+      if (!this.el)
+        return;
+      const config = __spreadProps(__spreadValues(__spreadValues({}, defaultWatermarkConfig), this._config), {
+        text: normalizeText(this._config.text)
+      });
+      if (!config.enable || !config.text.length) {
+        this.el.style.display = "none";
+        this.el.style.backgroundImage = "";
+        return;
+      }
+      const gapX = config.maxColumns > 0 ? Math.max(config.gapX, this.el.clientWidth / config.maxColumns) : config.gapX;
+      const gapY = config.maxRows > 0 ? Math.max(config.gapY, this.el.clientHeight / config.maxRows) : config.gapY;
+      const renderConfig = __spreadProps(__spreadValues({}, config), {
+        gapX,
+        gapY
+      });
+      const svg = createWatermarkSvg(renderConfig);
+      this.el.style.display = "block";
+      this.el.style.zIndex = typeof config.zIndex === "number" ? `${config.zIndex}` : "";
+      this.el.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}")`;
+      this.el.style.backgroundSize = `${gapX}px ${gapY}px`;
+    }
+  };
+  var watermark_default = WatermarkPlugin;
+
   // src/plugins/player/index.tsx
   var DIRECT_SUPPORT_TYPES = /* @__PURE__ */ ((DIRECT_SUPPORT_TYPES2) => {
     DIRECT_SUPPORT_TYPES2["MP4"] = "MP4";
@@ -29122,6 +29209,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
       this._spinner = new spinner_default({ spin: false });
       this._toast = new toast_default();
       this._mask = new mask_default({ visible: false });
+      this._watermark = new watermark_default(options == null ? void 0 : options.watermark);
       this._infoModal = new ModalPlugin({
         container: this.el,
         title: t("info"),
@@ -29172,6 +29260,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
       const spinnerEl = this._spinner.init();
       const toastEl = this._toast.init();
       const maskEl = this._mask.init();
+      const watermarkEl = this._watermark.init();
       const panelEls = this._panel ? this._panel.init() : [];
       const infoModalEl = this._infoModal.init();
       const ptzEl = this.ptz.init();
@@ -29179,6 +29268,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
       core_default.dom.append(
         this.el,
         videoEl,
+        watermarkEl,
         spinnerEl,
         maskEl,
         infoModalEl,
@@ -33511,6 +33601,7 @@ registerProcessor('bv-audio-processor', BVAudioProcessor);
       puOption,
       defaultMediaOption = { audio: true, video: true },
       testUrl,
+      watermark,
       videoFit = "fill",
       muted,
       apiPrefix,
@@ -33630,6 +33721,10 @@ registerProcessor('bv-audio-processor', BVAudioProcessor);
         enableController,
         disabledControls
       },
+      watermark: mergeWatermarkConfig(
+        globalConfigHandler.getDefaultProps().watermark,
+        watermark
+      ),
       recorderConfig: localRecordCfg
     });
     player.addEventListener("init", (e) => {
@@ -34816,6 +34911,7 @@ registerProcessor('bv-audio-processor', BVAudioProcessor);
                 }
               }
             } catch (e) {
+              console.error(e);
             }
             try {
               if (!mediaStream && !!openParams.beCall) {
@@ -36010,6 +36106,7 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
         disableAudio: !!!params.audio
       });
       if (resultResult.code != "SUCCESS") {
+        processHandle.invoke();
         return {
           code: resultResult.code,
           message: resultResult.message
@@ -37062,7 +37159,8 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
       zIndexMenu,
       displayMode,
       playbackUrl,
-      cryptkey
+      cryptkey,
+      watermark
     } = __spreadValues(__spreadValues({}, defaultProps3), props);
     i18n_default(locale);
     let hplayer = void 0;
@@ -37106,7 +37204,11 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
                 "mike"
               ],
               enableController: false
-            }
+            },
+            watermark: mergeWatermarkConfig(
+              globalConfigHandler.getDefaultProps().watermark,
+              watermark
+            )
           });
           const barHandle = new PlaybackBar();
           this.emitClick = () => {

package/dist/main.es.css

@@ -521,6 +521,18 @@
   width: 100%;
   height: 100%;
 }
+.bvplayer-watermark {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  background-repeat: repeat;
+}
 .bvplayer-controller {
   position: absolute;
   bottom: 0;

package/dist/main.es.js

@@ -118,7 +118,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.10.26", PROJECT_NAMESPACE: "bvplayer" };
+    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.10.28", PROJECT_NAMESPACE: "bvplayer" };
   }
 });
 
@@ -21872,10 +21872,7 @@ var globalConfigHandler = {
     return glbConfig;
   },
   setDefaultProps: function(props) {
-    Object.keys(props).forEach((itemKey) => {
-      const key = itemKey;
-      glbConfig[key] = props[key];
-    });
+    Object.assign(glbConfig, props);
   }
 };
 
@@ -29065,6 +29062,96 @@ var RecordStatePlugin = class extends Plugin {
 };
 var recordState_default = RecordStatePlugin;
 
+// src/plugins/watermark.ts
+init_define_processenv();
+init_jsx_shim();
+var PLUGIN_NAME_WATERMARK = "watermark";
+var defaultWatermarkConfig = {
+  enable: true,
+  opacity: 0.28,
+  fontSize: 16,
+  fontWeight: "normal",
+  color: "#fff",
+  strokeColor: "#000",
+  strokeWidth: 2,
+  rotate: -20,
+  gapX: 180,
+  gapY: 120,
+  maxColumns: 4,
+  maxRows: 3
+};
+var escapeXml = (text2) => text2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+var normalizeText = (text2) => {
+  if (typeof text2 === "string")
+    return text2 ? [text2] : [];
+  return (text2 || []).filter((item) => item);
+};
+var createWatermarkSvg = (config) => {
+  const lineHeight = Math.round(config.fontSize * 1.5);
+  const startY = config.gapY / 2 - (config.text.length - 1) * lineHeight / 2;
+  const textNodes = config.text.map((item, index) => {
+    const y2 = startY + index * lineHeight;
+    return `<text x="50%" y="${y2}" text-anchor="middle">${escapeXml(item)}</text>`;
+  }).join("");
+  return `
+<svg xmlns="http://www.w3.org/2000/svg" width="${config.gapX}" height="${config.gapY}" viewBox="0 0 ${config.gapX} ${config.gapY}">
+  <g transform="rotate(${config.rotate} ${config.gapX / 2} ${config.gapY / 2})" fill="${escapeXml(config.color)}" fill-opacity="${config.opacity}" stroke="${escapeXml(config.strokeColor)}" stroke-opacity="${config.opacity}" stroke-width="${config.strokeWidth}" paint-order="stroke" font-size="${config.fontSize}" font-weight="${escapeXml(`${config.fontWeight}`)}" font-family="Arial, sans-serif">
+    ${textNodes}
+  </g>
+</svg>`;
+};
+var mergeWatermarkConfig = (...configs) => {
+  return configs.reduce((result, config) => {
+    if (!config)
+      return result;
+    return __spreadValues(__spreadValues({}, result), config);
+  }, {});
+};
+var WatermarkPlugin = class extends Plugin {
+  constructor(config) {
+    super(PLUGIN_NAME_WATERMARK, "div");
+    this._config = config || {};
+  }
+  init(_container) {
+    this.render();
+    if (this.el && window.ResizeObserver) {
+      this._resizeObserver = new ResizeObserver(() => {
+        this.render();
+      });
+      this._resizeObserver.observe(this.el);
+    }
+    return this.el;
+  }
+  beforeDestroy() {
+    var _a;
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+  }
+  render() {
+    if (!this.el)
+      return;
+    const config = __spreadProps(__spreadValues(__spreadValues({}, defaultWatermarkConfig), this._config), {
+      text: normalizeText(this._config.text)
+    });
+    if (!config.enable || !config.text.length) {
+      this.el.style.display = "none";
+      this.el.style.backgroundImage = "";
+      return;
+    }
+    const gapX = config.maxColumns > 0 ? Math.max(config.gapX, this.el.clientWidth / config.maxColumns) : config.gapX;
+    const gapY = config.maxRows > 0 ? Math.max(config.gapY, this.el.clientHeight / config.maxRows) : config.gapY;
+    const renderConfig = __spreadProps(__spreadValues({}, config), {
+      gapX,
+      gapY
+    });
+    const svg = createWatermarkSvg(renderConfig);
+    this.el.style.display = "block";
+    this.el.style.zIndex = typeof config.zIndex === "number" ? `${config.zIndex}` : "";
+    this.el.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}")`;
+    this.el.style.backgroundSize = `${gapX}px ${gapY}px`;
+  }
+};
+var watermark_default = WatermarkPlugin;
+
 // src/plugins/player/index.tsx
 var DIRECT_SUPPORT_TYPES = /* @__PURE__ */ ((DIRECT_SUPPORT_TYPES2) => {
   DIRECT_SUPPORT_TYPES2["MP4"] = "MP4";
@@ -29104,6 +29191,7 @@ var PlayerPlugin = class extends Plugin {
     this._spinner = new spinner_default({ spin: false });
     this._toast = new toast_default();
     this._mask = new mask_default({ visible: false });
+    this._watermark = new watermark_default(options == null ? void 0 : options.watermark);
     this._infoModal = new ModalPlugin({
       container: this.el,
       title: t("info"),
@@ -29154,6 +29242,7 @@ var PlayerPlugin = class extends Plugin {
     const spinnerEl = this._spinner.init();
     const toastEl = this._toast.init();
     const maskEl = this._mask.init();
+    const watermarkEl = this._watermark.init();
     const panelEls = this._panel ? this._panel.init() : [];
     const infoModalEl = this._infoModal.init();
     const ptzEl = this.ptz.init();
@@ -29161,6 +29250,7 @@ var PlayerPlugin = class extends Plugin {
     core_default.dom.append(
       this.el,
       videoEl,
+      watermarkEl,
       spinnerEl,
       maskEl,
       infoModalEl,
@@ -33493,6 +33583,7 @@ var PuPlayer = (props) => {
     puOption,
     defaultMediaOption = { audio: true, video: true },
     testUrl,
+    watermark,
     videoFit = "fill",
     muted,
     apiPrefix,
@@ -33612,6 +33703,10 @@ var PuPlayer = (props) => {
       enableController,
       disabledControls
     },
+    watermark: mergeWatermarkConfig(
+      globalConfigHandler.getDefaultProps().watermark,
+      watermark
+    ),
     recorderConfig: localRecordCfg
   });
   player.addEventListener("init", (e) => {
@@ -34798,6 +34893,7 @@ function MediaEndPoint(params) {
               }
             }
           } catch (e) {
+            console.error(e);
           }
           try {
             if (!mediaStream && !!openParams.beCall) {
@@ -35992,6 +36088,7 @@ function pushLocalMedia(params) {
       disableAudio: !!!params.audio
     });
     if (resultResult.code != "SUCCESS") {
+      processHandle.invoke();
       return {
         code: resultResult.code,
         message: resultResult.message
@@ -37044,7 +37141,8 @@ var PlayBack = (props) => {
     zIndexMenu,
     displayMode,
     playbackUrl,
-    cryptkey
+    cryptkey,
+    watermark
   } = __spreadValues(__spreadValues({}, defaultProps3), props);
   i18n_default(locale);
   let hplayer = void 0;
@@ -37088,7 +37186,11 @@ var PlayBack = (props) => {
               "mike"
             ],
             enableController: false
-          }
+          },
+          watermark: mergeWatermarkConfig(
+            globalConfigHandler.getDefaultProps().watermark,
+            watermark
+          )
         });
         const barHandle = new PlaybackBar();
         this.emitClick = () => {

package/dist/types/components/global.config.d.ts

@@ -1,5 +1,7 @@
+import { IWatermarkConfig } from "../plugins/watermark";
 export interface IGlobalConfig {
     bNotSendHost?: boolean;
+    watermark?: IWatermarkConfig;
 }
 export declare const globalConfigHandler: {
     getDefaultProps: () => Partial<IGlobalConfig>;

package/dist/types/components/playBack.d.ts

@@ -1,6 +1,7 @@
 import { SFC, Props, IComponentInstance } from "../core/types";
 import { IVideoFits } from "../plugins/player";
 import initI18n from "../locales/i18n";
+import { IWatermarkConfig } from "../plugins/watermark";
 type Container = HTMLElement | Element | Node | null;
 interface IPlaybackProps extends Props {
     fileID: string;
@@ -26,6 +27,7 @@ interface IPlaybackProps extends Props {
     zIndexMenu?: number;
     displayMode?: 'playback';
     cryptkey?: string;
+    watermark?: IWatermarkConfig;
 }
 type IPlaybackPlayType = "ws-bvrtc" | "web" | "auto";
 interface IPlaybackInstance extends IComponentInstance {

package/dist/types/components/puPlayer.d.ts

@@ -4,6 +4,7 @@ import { IPuOption } from "./types";
 import { IControlPluginMap } from "../plugins/controller";
 import { MikeButton } from "./subComponent/mikeButton";
 import { CreatePlayerState } from "./subComponent/playState";
+import { IWatermarkConfig } from "../plugins/watermark";
 type Container = HTMLElement | Element | Node | null;
 type helperFunc = {
     getDefaultProps: () => Partial<IPuPlayerProps>;
@@ -26,6 +27,7 @@ export interface IPuPlayerProps extends Props {
     videoFit?: keyof IVideoFits;
     apiPrefix?: string;
     testUrl?: string;
+    watermark?: IWatermarkConfig;
     fullScreenOnDblclick?: boolean;
     enableController?: boolean;
     disabledControls?: (keyof IControlPluginMap)[];

package/dist/types/main.d.ts

@@ -10,3 +10,4 @@ declare const clearAllDialog: (token: string) => Promise<void>;
 import "./styles/main.scss";
 import { globalConfigHandler } from "./components/global.config";
 export { globalConfigHandler, PlayBack, PuPlayer, Intercom, Conference, IPuPlayerProps, IPuPlayerInstance, IIntercomProps, IIntercomInstance, IConferenceProps, IConferenceInstance, IPuOption, IConfOption, RemoteSdpFetcher, clearAllDialog, CreateCallEndPoint, callEndPointUtils };
+export type { IWatermarkConfig } from "./plugins/watermark";

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

@@ -12,6 +12,7 @@ import PtzPlugin from "../ptz";
 import { CreateIntercomUtils, MikeButton } from "../../components/subComponent/mikeButton";
 import { IPuOption } from "../../main";
 import { IRecorderConfig } from "src/utils/webmContainerUtils";
+import { IWatermarkConfig } from "../watermark";
 export declare enum PLAYER_MODES {
     DIRECT = "direct",
     PLUGIN = "plugin",
@@ -52,6 +53,7 @@ export interface IPlayerPluginOptions {
     direct: string;
     puOptions: IPuOption;
     recorderConfig?: IRecorderConfig;
+    watermark?: IWatermarkConfig;
 }
 declare class PlayerPlugin extends Plugin<HTMLDivElement, IPlayerPluginEventMap> {
     private _mode;
@@ -63,6 +65,7 @@ declare class PlayerPlugin extends Plugin<HTMLDivElement, IPlayerPluginEventMap>
     private _spinner;
     private _toast;
     private _mask;
+    private _watermark;
     private _panel?;
     private _infoModal;
     private _recordState;

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

@@ -0,0 +1,28 @@
+import { RenderTarget } from "../core/types";
+import { Plugin } from "./types";
+export interface IWatermarkConfig {
+    enable?: boolean;
+    text?: string | string[];
+    opacity?: number;
+    fontSize?: number;
+    fontWeight?: number | string;
+    color?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    rotate?: number;
+    gapX?: number;
+    gapY?: number;
+    maxColumns?: number;
+    maxRows?: number;
+    zIndex?: number;
+}
+export declare const mergeWatermarkConfig: (...configs: Array<IWatermarkConfig | undefined>) => IWatermarkConfig;
+declare class WatermarkPlugin extends Plugin<HTMLDivElement> {
+    private _config;
+    private _resizeObserver?;
+    constructor(config?: IWatermarkConfig);
+    init(_container?: RenderTarget): RenderTarget;
+    protected beforeDestroy(): void;
+    render(): void;
+}
+export default WatermarkPlugin;

package/package.json

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