@besovideo/webrtc-player 0.10.28 → 0.10.30

package/README.md

@@ -484,10 +484,16 @@ instance.open()
 
 **水印配置**
 
-`PuPlayer` 和 `PlayBack` 支持水印层。水印是播放窗口上的 DOM/CSS 叠层，不会写入本地录像文件。
+`PuPlayer`、`PlayBack`、`CreateCallEndPoint` 和 `callEndPointUtils.pushLocalMedia` 支持水印层。水印是播放窗口上的 DOM/CSS 叠层，不会写入本地录像文件。
 
 ```typescript
-import { globalConfigHandler, PuPlayer, PlayBack } from "@besovideo/webrtc-player";
+import {
+  globalConfigHandler,
+  PuPlayer,
+  PlayBack,
+  CreateCallEndPoint,
+  callEndPointUtils,
+} from "@besovideo/webrtc-player";
 
 interface IWatermarkConfig {
   // 是否启用水印
@@ -520,7 +526,7 @@ interface IWatermarkConfig {
   zIndex?: number;
 }
 
-// 全局配置：影响之后创建的 PuPlayer 和 PlayBack 实例
+// 全局配置：影响之后创建的播放器、回放、通话和推流预览实例
 globalConfigHandler.setDefaultProps({
   watermark: {
     // 支持 string 或 string[]，数组会按多行显示
@@ -571,6 +577,22 @@ PlayBack({
     enable: false,
   },
 });
+
+// 通话端点窗口覆盖全局配置，本地和远端视频区域都会显示水印
+CreateCallEndPoint({
+  // ...
+  watermark: {
+    text: "通话水印",
+  },
+});
+
+// 推送本地媒体流预览覆盖全局配置
+callEndPointUtils.pushLocalMedia({
+  // ...
+  watermark: {
+    text: "推流预览水印",
+  },
+});
 ```
 
 水印间距会根据播放窗口大小自动调整。`gapX` / `gapY` 表示最小间距，`maxColumns` / `maxRows` 用于限制大屏下最多显示的水印密度：
@@ -588,6 +610,8 @@ const callEndPointUtils: {
     token: string;
     // div 用于渲染
     container?: HTMLDivElement;
+    // 播放窗口水印配置，支持全局配置和实例覆盖
+    watermark?: IWatermarkConfig;
     // 是否获取视频
     video?: boolean;
     // 是否获取音频

package/dist/main.browser.css

@@ -353,7 +353,6 @@
 .bvplayer-modal_title-bar {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 8px;
   font-size: 16px;
 }
 .bvplayer-modal_title-bar_close {
@@ -361,7 +360,6 @@
   pointer-events: auto;
 }
 .bvplayer-modal_body {
-  padding: 8px;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -899,8 +897,8 @@
   position: absolute;
 }
 .bvplayer-player .bvplayer-modal {
-  min-width: 120px;
-  min-height: 100px;
+  max-width: calc(100% - 40px);
+  max-height: calc(100% - 40px);
 }
 .bvplayer-player-fit--contain .bvplayer-video_screen {
   -o-object-fit: contain;
@@ -924,12 +922,11 @@
 }
 .bvplayer-player_info-modal_content {
   width: 280px;
-  min-height: 180px;
   display: flex;
   flex-direction: column;
 }
 .bvplayer-player_info-modal_section:not(:last-child) {
-  margin-bottom: 16px;
+  margin-bottom: 0px;
 }
 .bvplayer-player_info-modal_section_title {
   display: inline-block;
@@ -955,7 +952,7 @@
   white-space: nowrap;
 }
 .bvplayer-player_info-modal_list_item:not(:last-child) {
-  margin-bottom: 8px;
+  margin-bottom: 2px;
 }
 .bvplayer-player_info-modal_list_item_label {
   display: inline-block;
@@ -1203,6 +1200,19 @@
   line-height: 30px;
   padding-left: 10px;
 }
+.videoCall_dialogPanel .switchType {
+  border: 1px solid #c4c4c4;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 1px;
+  position: absolute;
+  right: 180px;
+  top: 2px;
+  color: #8d8d8d;
+}
+.videoCall_dialogPanel .switchType:hover {
+  color: #636363;
+}
 .videoCall_dialogPanel .remoteView {
   display: inline-block;
   vertical-align: top;

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.28", PROJECT_NAMESPACE: "bvplayer" };
+      define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.10.30", PROJECT_NAMESPACE: "bvplayer" };
     }
   });
 
@@ -22010,7 +22010,7 @@ padding: 2px 5px;
     logger_default.api("device media bvrtc open dialog: ", { params, resData });
     if (!resData || resData.code !== 0 || !((_a = resData.data) == null ? void 0 : _a.dialogid)) {
       if (resData.code == 7) {
-        throw new OpenDialogError(`${t("hui-fang-wen-jian-bu-cun-zai")}`);
+        throw new OpenDialogError(`${t("X_CODE_7")}`);
       }
       throw new OpenDialogError(
         `${t("da-kai-chuan-shu-tong-dao-shi-bai")}: ${resData.msg}`
@@ -29705,7 +29705,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
             value: audio.codec.clockRate + "Hz@" + audio.rtp.sampleRates
           },
           ...Number.isNaN(audio.rtp.bitRate) ? [] : [{
-            label: t("data-received") + audio.rtp.bitRate,
+            label: t("data-received"),
             value: audio.rtp.bitRate.toFixed(0) + " kbps, loss" + audio.rtp.packageLostTotal
           }],
           ...Number.isNaN(audio.rtp.avaragePackageLostRate) ? [] : [
@@ -29729,7 +29729,7 @@ ${event.candidate ? event.candidate.candidate : "(null)"}`
             value: `${video.codec.width}x${video.codec.height}@${video.rtp.sampleRates.toFixed(0)}fps`
           },
           ...Number.isNaN(video.rtp.bitRate) ? [] : [{
-            label: t("data-received") + video.rtp.bitRate,
+            label: t("data-received"),
             value: String(video.rtp.bitRate.toFixed(0)) + " kbps, loss" + video.rtp.packageLostTotal
           }],
           ...Number.isNaN(video.rtp.avaragePackageLostRate) ? [] : [
@@ -35413,7 +35413,16 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
     }
     let remoteUserTitle = core_default.dom.create("div", "remoteUserTitle");
     let localUserTitle = core_default.dom.create("div", "localUserTitle");
-    const dialog = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h(jsx_default.Fragment, null, /* @__PURE__ */ jsx_default.h("div", { className: `${clsName}_dialogPanel` }, /* @__PURE__ */ jsx_default.h("div", { className: "titleBar" }, titleBar, closeBtn), statusSpan, mainStatusSpan, /* @__PURE__ */ jsx_default.h("div", { className: `full-view` }, myVideo), /* @__PURE__ */ jsx_default.h("div", { className: `mini-view` }, remoteVideo, remoteUserTitle), /* @__PURE__ */ jsx_default.h("div", { className: "localUserDiv" }, localUserTitle))));
+    const toggleViewType = () => {
+      if (myVideo.parentElement && myVideo.parentElement.className.includes("mini-view")) {
+        SetViewType("localFull", true);
+      } else {
+        SetViewType("remoteFull", true);
+      }
+    };
+    const dialog = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h(jsx_default.Fragment, null, /* @__PURE__ */ jsx_default.h("div", { className: `${clsName}_dialogPanel` }, /* @__PURE__ */ jsx_default.h("div", { className: "titleBar" }, titleBar, closeBtn), statusSpan, mainStatusSpan, /* @__PURE__ */ jsx_default.h("div", { className: `full-view` }, myVideo), /* @__PURE__ */ jsx_default.h("div", { className: `mini-view` }, remoteVideo, remoteUserTitle), /* @__PURE__ */ jsx_default.h("div", { className: "localUserDiv", style: "position: relative;" }, localUserTitle, /* @__PURE__ */ jsx_default.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", class: "switchType", onclick: () => {
+      toggleViewType();
+    } }, /* @__PURE__ */ jsx_default.h("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ jsx_default.h("path", { fill: "currentColor", d: "M14.293 2.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L16.586 8H5a1 1 0 0 1 0-2h11.586l-2.293-2.293a1 1 0 0 1 0-1.414m-4.586 10a1 1 0 0 1 0 1.414L7.414 16H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0" }))))));
     core_default.dom.append(callContainer, dialog);
     const titleBarCancelMove = EnableMoveEle(titleBar.parentElement, callContainer);
     if (!beCall) {
@@ -35438,13 +35447,15 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
     }
     const gUserInfo = {
       localName: "",
+      localId: "",
       remoteName: "",
+      remoteId: "",
       localResolution: "",
       remoteResolution: ""
     };
     function updateUserTitle() {
-      const localTitle = gUserInfo.localName + ` ${gUserInfo.localResolution}`;
-      const remoteTitle = gUserInfo.remoteName + ` ${gUserInfo.remoteResolution}`;
+      const localTitle = gUserInfo.localName + ` (${gUserInfo.localId})`;
+      const remoteTitle = gUserInfo.remoteName + ` (${gUserInfo.remoteId})`;
       if (localUserTitle.innerText != localTitle) {
         localUserTitle.innerText = localTitle;
       }
@@ -35454,7 +35465,9 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
     }
     function setUserInfo(userInfo) {
       gUserInfo.localName = userInfo.localName;
+      gUserInfo.localId = userInfo.localId;
       gUserInfo.remoteName = userInfo.remoteName;
+      gUserInfo.remoteId = userInfo.remoteId;
       updateUserTitle();
     }
     function setTitie(title) {
@@ -35743,6 +35756,17 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
         dialogPanelHandle.setZIndex(createParams.zIndex);
       }
       const { myVideo, remoteVideo } = dialogPanelHandle;
+      const watermarkConfig = mergeWatermarkConfig(
+        globalConfigHandler.getDefaultProps().watermark,
+        createParams.watermark
+      );
+      const addWatermark = (container) => {
+        const watermark = new watermark_default(watermarkConfig);
+        core_default.dom.append(container, watermark.init());
+        processHandle.reg(() => {
+          watermark.destroy();
+        });
+      };
       const intervalDestoryHandle = GenProcessDestoryHandle();
       const open = (openParams) => __async(this, null, function* () {
         var _a2, _b, _c;
@@ -35754,11 +35778,13 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
         try {
           const useInfo = yield user_default.info(createParams.token);
           dialogPanelHandle.setUserInfo({
+            localId: useInfo.data.id,
             localName: useInfo.data.name,
+            remoteId: openParams.user || "",
             remoteName: openParams.name
           });
           processHandle.setRc("PUSH_LOCAL_MEDIA_ERROR", t("tui-song-ben-di-mei-ti-shi-bai"));
-          dialogPanelHandle.SetViewType("localFull");
+          dialogPanelHandle.SetViewType("remoteFull", true);
           let currentSecond = Date.now();
           const intervalHandle = () => {
             const pastSeconds = Math.floor((Date.now() - currentSecond) / 1e3);
@@ -35793,6 +35819,7 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
             }
             throw openMedia.message;
           }
+          addWatermark(myVideo);
           const openResult = yield openMedia == null ? void 0 : openMedia.push();
           if (openResult.code != "SUCCESS") {
             throw openResult.message;
@@ -35842,6 +35869,7 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
                   hasVideo: !!waitRemoteResult.data.video,
                   events: dialogPanelHandle.closeHandle
                 }, dialogPanelHandle.pcSink);
+                addWatermark(remoteVideo);
                 processHandle.reg(() => {
                   var _a3;
                   (_a3 = remoteOpenResult.close) == null ? void 0 : _a3.call(remoteOpenResult);
@@ -35860,6 +35888,7 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
                 hasVideo: avCall2.video,
                 events: dialogPanelHandle.closeHandle
               }, dialogPanelHandle.pcSink);
+              addWatermark(remoteVideo);
               processHandle.reg(() => {
                 var _a3;
                 (_a3 = remoteOpenResult.close) == null ? void 0 : _a3.call(remoteOpenResult);
@@ -35975,7 +36004,8 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
       playerConfig: {
         disabledControls: (params == null ? void 0 : params.disabledControls) ? [...params == null ? void 0 : params.disabledControls, "ptzControl", "mike"] : ["ptzControl", "mike"],
         enableController: !!(params == null ? void 0 : params.enableController)
-      }
+      },
+      watermark: params == null ? void 0 : params.watermark
     });
     const videoEle = player.video.getVideoEl();
     let firstTime = 0;
@@ -36061,7 +36091,7 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
   // src/components/callEndPointUtils.ts
   function pushLocalMedia(params) {
     return __async(this, null, function* () {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g;
       i18n_default(params.locale || "zh");
       const processHandle = GenProcessDestoryHandle();
       let container = null;
@@ -36071,7 +36101,13 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
         container.style.width = "100%";
         container.style.position = "relative";
         core_default.dom.append(params.container, container);
-        container.player = CreatePlayerPlugin(container, params.renderParams);
+        container.player = CreatePlayerPlugin(container, __spreadProps(__spreadValues({}, params.renderParams), {
+          watermark: mergeWatermarkConfig(
+            globalConfigHandler.getDefaultProps().watermark,
+            (_a = params.renderParams) == null ? void 0 : _a.watermark,
+            params.watermark
+          )
+        }));
       }
       processHandle.reg(() => {
         if (container) {
@@ -36086,7 +36122,7 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
       });
       const resultResult = yield mediaEndPoint.open({
         container,
-        videoEle: (_a = container == null ? void 0 : container.player) == null ? void 0 : _a.getVideoEle(),
+        videoEle: (_b = container == null ? void 0 : container.player) == null ? void 0 : _b.getVideoEle(),
         call: {
           videoCall: !!params.video,
           name: "",
@@ -36114,7 +36150,7 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
       }
       const pushResult = yield resultResult.push();
       if (pushResult.code != "SUCCESS") {
-        (_b = resultResult.close) == null ? void 0 : _b.call(resultResult);
+        (_c = resultResult.close) == null ? void 0 : _c.call(resultResult);
         return pushResult;
       }
       const close = () => __async(this, null, function* () {
@@ -36123,20 +36159,20 @@ a=fmtp:${pt} x-google-start-bitrate=${bitrate}`
         (_b2 = resultResult.close) == null ? void 0 : _b2.call(resultResult);
         processHandle.invoke();
       });
-      if ((_c = pushResult.streamIdInfo) == null ? void 0 : _c.mediaStream) {
-        const mediaStream = (_d = pushResult.streamIdInfo) == null ? void 0 : _d.mediaStream;
+      if ((_d = pushResult.streamIdInfo) == null ? void 0 : _d.mediaStream) {
+        const mediaStream = (_e = pushResult.streamIdInfo) == null ? void 0 : _e.mediaStream;
         const configHandle = GetInnerConfig(callEndPointConfig).pushMediaStream({
           stream: mediaStream,
           isShare: !!params.displayMedia
         });
         if (params.container) {
-          (_e = container == null ? void 0 : container.player) == null ? void 0 : _e.setMediaStream(mediaStream);
+          (_f = container == null ? void 0 : container.player) == null ? void 0 : _f.setMediaStream(mediaStream);
         }
         processHandle.reg(() => {
           configHandle.remove();
         });
       }
-      if ((_f = pushResult.streamIdInfo) == null ? void 0 : _f.duration) {
+      if ((_g = pushResult.streamIdInfo) == null ? void 0 : _g.duration) {
         let containerTrialShow2 = function() {
           if (container && !params.customDisTrial) {
             const ele = document.createElement("div");

package/dist/main.es.css

@@ -353,7 +353,6 @@
 .bvplayer-modal_title-bar {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 8px;
   font-size: 16px;
 }
 .bvplayer-modal_title-bar_close {
@@ -361,7 +360,6 @@
   pointer-events: auto;
 }
 .bvplayer-modal_body {
-  padding: 8px;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -899,8 +897,8 @@
   position: absolute;
 }
 .bvplayer-player .bvplayer-modal {
-  min-width: 120px;
-  min-height: 100px;
+  max-width: calc(100% - 40px);
+  max-height: calc(100% - 40px);
 }
 .bvplayer-player-fit--contain .bvplayer-video_screen {
   -o-object-fit: contain;
@@ -924,12 +922,11 @@
 }
 .bvplayer-player_info-modal_content {
   width: 280px;
-  min-height: 180px;
   display: flex;
   flex-direction: column;
 }
 .bvplayer-player_info-modal_section:not(:last-child) {
-  margin-bottom: 16px;
+  margin-bottom: 0px;
 }
 .bvplayer-player_info-modal_section_title {
   display: inline-block;
@@ -955,7 +952,7 @@
   white-space: nowrap;
 }
 .bvplayer-player_info-modal_list_item:not(:last-child) {
-  margin-bottom: 8px;
+  margin-bottom: 2px;
 }
 .bvplayer-player_info-modal_list_item_label {
   display: inline-block;
@@ -1203,6 +1200,19 @@
   line-height: 30px;
   padding-left: 10px;
 }
+.videoCall_dialogPanel .switchType {
+  border: 1px solid #c4c4c4;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 1px;
+  position: absolute;
+  right: 180px;
+  top: 2px;
+  color: #8d8d8d;
+}
+.videoCall_dialogPanel .switchType:hover {
+  color: #636363;
+}
 .videoCall_dialogPanel .remoteView {
   display: inline-block;
   vertical-align: top;

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.28", PROJECT_NAMESPACE: "bvplayer" };
+    define_processenv_default = { NODE_ENV: "production", SH_LIB_NAME: "@besovideo/webrtc-player", SH_LIB_VERSION: "0.10.30", PROJECT_NAMESPACE: "bvplayer" };
   }
 });
 
@@ -21992,7 +21992,7 @@ var getPlaybackBvrtc = (param, token, signal) => __async(void 0, null, function*
   logger_default.api("device media bvrtc open dialog: ", { params, resData });
   if (!resData || resData.code !== 0 || !((_a = resData.data) == null ? void 0 : _a.dialogid)) {
     if (resData.code == 7) {
-      throw new OpenDialogError(`${t("hui-fang-wen-jian-bu-cun-zai")}`);
+      throw new OpenDialogError(`${t("X_CODE_7")}`);
     }
     throw new OpenDialogError(
       `${t("da-kai-chuan-shu-tong-dao-shi-bai")}: ${resData.msg}`
@@ -29687,7 +29687,7 @@ var PlayerPlugin = class extends Plugin {
           value: audio.codec.clockRate + "Hz@" + audio.rtp.sampleRates
         },
         ...Number.isNaN(audio.rtp.bitRate) ? [] : [{
-          label: t("data-received") + audio.rtp.bitRate,
+          label: t("data-received"),
           value: audio.rtp.bitRate.toFixed(0) + " kbps, loss" + audio.rtp.packageLostTotal
         }],
         ...Number.isNaN(audio.rtp.avaragePackageLostRate) ? [] : [
@@ -29711,7 +29711,7 @@ var PlayerPlugin = class extends Plugin {
           value: `${video.codec.width}x${video.codec.height}@${video.rtp.sampleRates.toFixed(0)}fps`
         },
         ...Number.isNaN(video.rtp.bitRate) ? [] : [{
-          label: t("data-received") + video.rtp.bitRate,
+          label: t("data-received"),
           value: String(video.rtp.bitRate.toFixed(0)) + " kbps, loss" + video.rtp.packageLostTotal
         }],
         ...Number.isNaN(video.rtp.avaragePackageLostRate) ? [] : [
@@ -35395,7 +35395,16 @@ function CreateDialogPanel(container, events, beCall) {
   }
   let remoteUserTitle = core_default.dom.create("div", "remoteUserTitle");
   let localUserTitle = core_default.dom.create("div", "localUserTitle");
-  const dialog = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h(jsx_default.Fragment, null, /* @__PURE__ */ jsx_default.h("div", { className: `${clsName}_dialogPanel` }, /* @__PURE__ */ jsx_default.h("div", { className: "titleBar" }, titleBar, closeBtn), statusSpan, mainStatusSpan, /* @__PURE__ */ jsx_default.h("div", { className: `full-view` }, myVideo), /* @__PURE__ */ jsx_default.h("div", { className: `mini-view` }, remoteVideo, remoteUserTitle), /* @__PURE__ */ jsx_default.h("div", { className: "localUserDiv" }, localUserTitle))));
+  const toggleViewType = () => {
+    if (myVideo.parentElement && myVideo.parentElement.className.includes("mini-view")) {
+      SetViewType("localFull", true);
+    } else {
+      SetViewType("remoteFull", true);
+    }
+  };
+  const dialog = core_default.dom.createByJsx(/* @__PURE__ */ jsx_default.h(jsx_default.Fragment, null, /* @__PURE__ */ jsx_default.h("div", { className: `${clsName}_dialogPanel` }, /* @__PURE__ */ jsx_default.h("div", { className: "titleBar" }, titleBar, closeBtn), statusSpan, mainStatusSpan, /* @__PURE__ */ jsx_default.h("div", { className: `full-view` }, myVideo), /* @__PURE__ */ jsx_default.h("div", { className: `mini-view` }, remoteVideo, remoteUserTitle), /* @__PURE__ */ jsx_default.h("div", { className: "localUserDiv", style: "position: relative;" }, localUserTitle, /* @__PURE__ */ jsx_default.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", class: "switchType", onclick: () => {
+    toggleViewType();
+  } }, /* @__PURE__ */ jsx_default.h("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ jsx_default.h("path", { fill: "currentColor", d: "M14.293 2.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L16.586 8H5a1 1 0 0 1 0-2h11.586l-2.293-2.293a1 1 0 0 1 0-1.414m-4.586 10a1 1 0 0 1 0 1.414L7.414 16H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0" }))))));
   core_default.dom.append(callContainer, dialog);
   const titleBarCancelMove = EnableMoveEle(titleBar.parentElement, callContainer);
   if (!beCall) {
@@ -35420,13 +35429,15 @@ function CreateDialogPanel(container, events, beCall) {
   }
   const gUserInfo = {
     localName: "",
+    localId: "",
     remoteName: "",
+    remoteId: "",
     localResolution: "",
     remoteResolution: ""
   };
   function updateUserTitle() {
-    const localTitle = gUserInfo.localName + ` ${gUserInfo.localResolution}`;
-    const remoteTitle = gUserInfo.remoteName + ` ${gUserInfo.remoteResolution}`;
+    const localTitle = gUserInfo.localName + ` (${gUserInfo.localId})`;
+    const remoteTitle = gUserInfo.remoteName + ` (${gUserInfo.remoteId})`;
     if (localUserTitle.innerText != localTitle) {
       localUserTitle.innerText = localTitle;
     }
@@ -35436,7 +35447,9 @@ function CreateDialogPanel(container, events, beCall) {
   }
   function setUserInfo(userInfo) {
     gUserInfo.localName = userInfo.localName;
+    gUserInfo.localId = userInfo.localId;
     gUserInfo.remoteName = userInfo.remoteName;
+    gUserInfo.remoteId = userInfo.remoteId;
     updateUserTitle();
   }
   function setTitie(title) {
@@ -35725,6 +35738,17 @@ function CreateCallEndPoint(createParams) {
       dialogPanelHandle.setZIndex(createParams.zIndex);
     }
     const { myVideo, remoteVideo } = dialogPanelHandle;
+    const watermarkConfig = mergeWatermarkConfig(
+      globalConfigHandler.getDefaultProps().watermark,
+      createParams.watermark
+    );
+    const addWatermark = (container) => {
+      const watermark = new watermark_default(watermarkConfig);
+      core_default.dom.append(container, watermark.init());
+      processHandle.reg(() => {
+        watermark.destroy();
+      });
+    };
     const intervalDestoryHandle = GenProcessDestoryHandle();
     const open = (openParams) => __async(this, null, function* () {
       var _a2, _b, _c;
@@ -35736,11 +35760,13 @@ function CreateCallEndPoint(createParams) {
       try {
         const useInfo = yield user_default.info(createParams.token);
         dialogPanelHandle.setUserInfo({
+          localId: useInfo.data.id,
           localName: useInfo.data.name,
+          remoteId: openParams.user || "",
           remoteName: openParams.name
         });
         processHandle.setRc("PUSH_LOCAL_MEDIA_ERROR", t("tui-song-ben-di-mei-ti-shi-bai"));
-        dialogPanelHandle.SetViewType("localFull");
+        dialogPanelHandle.SetViewType("remoteFull", true);
         let currentSecond = Date.now();
         const intervalHandle = () => {
           const pastSeconds = Math.floor((Date.now() - currentSecond) / 1e3);
@@ -35775,6 +35801,7 @@ function CreateCallEndPoint(createParams) {
           }
           throw openMedia.message;
         }
+        addWatermark(myVideo);
         const openResult = yield openMedia == null ? void 0 : openMedia.push();
         if (openResult.code != "SUCCESS") {
           throw openResult.message;
@@ -35824,6 +35851,7 @@ function CreateCallEndPoint(createParams) {
                 hasVideo: !!waitRemoteResult.data.video,
                 events: dialogPanelHandle.closeHandle
               }, dialogPanelHandle.pcSink);
+              addWatermark(remoteVideo);
               processHandle.reg(() => {
                 var _a3;
                 (_a3 = remoteOpenResult.close) == null ? void 0 : _a3.call(remoteOpenResult);
@@ -35842,6 +35870,7 @@ function CreateCallEndPoint(createParams) {
               hasVideo: avCall2.video,
               events: dialogPanelHandle.closeHandle
             }, dialogPanelHandle.pcSink);
+            addWatermark(remoteVideo);
             processHandle.reg(() => {
               var _a3;
               (_a3 = remoteOpenResult.close) == null ? void 0 : _a3.call(remoteOpenResult);
@@ -35957,7 +35986,8 @@ function CreatePlayerPlugin(container, params) {
     playerConfig: {
       disabledControls: (params == null ? void 0 : params.disabledControls) ? [...params == null ? void 0 : params.disabledControls, "ptzControl", "mike"] : ["ptzControl", "mike"],
       enableController: !!(params == null ? void 0 : params.enableController)
-    }
+    },
+    watermark: params == null ? void 0 : params.watermark
   });
   const videoEle = player.video.getVideoEl();
   let firstTime = 0;
@@ -36043,7 +36073,7 @@ function CreatePlayerPlugin(container, params) {
 // src/components/callEndPointUtils.ts
 function pushLocalMedia(params) {
   return __async(this, null, function* () {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     i18n_default(params.locale || "zh");
     const processHandle = GenProcessDestoryHandle();
     let container = null;
@@ -36053,7 +36083,13 @@ function pushLocalMedia(params) {
       container.style.width = "100%";
       container.style.position = "relative";
       core_default.dom.append(params.container, container);
-      container.player = CreatePlayerPlugin(container, params.renderParams);
+      container.player = CreatePlayerPlugin(container, __spreadProps(__spreadValues({}, params.renderParams), {
+        watermark: mergeWatermarkConfig(
+          globalConfigHandler.getDefaultProps().watermark,
+          (_a = params.renderParams) == null ? void 0 : _a.watermark,
+          params.watermark
+        )
+      }));
     }
     processHandle.reg(() => {
       if (container) {
@@ -36068,7 +36104,7 @@ function pushLocalMedia(params) {
     });
     const resultResult = yield mediaEndPoint.open({
       container,
-      videoEle: (_a = container == null ? void 0 : container.player) == null ? void 0 : _a.getVideoEle(),
+      videoEle: (_b = container == null ? void 0 : container.player) == null ? void 0 : _b.getVideoEle(),
       call: {
         videoCall: !!params.video,
         name: "",
@@ -36096,7 +36132,7 @@ function pushLocalMedia(params) {
     }
     const pushResult = yield resultResult.push();
     if (pushResult.code != "SUCCESS") {
-      (_b = resultResult.close) == null ? void 0 : _b.call(resultResult);
+      (_c = resultResult.close) == null ? void 0 : _c.call(resultResult);
       return pushResult;
     }
     const close = () => __async(this, null, function* () {
@@ -36105,20 +36141,20 @@ function pushLocalMedia(params) {
       (_b2 = resultResult.close) == null ? void 0 : _b2.call(resultResult);
       processHandle.invoke();
     });
-    if ((_c = pushResult.streamIdInfo) == null ? void 0 : _c.mediaStream) {
-      const mediaStream = (_d = pushResult.streamIdInfo) == null ? void 0 : _d.mediaStream;
+    if ((_d = pushResult.streamIdInfo) == null ? void 0 : _d.mediaStream) {
+      const mediaStream = (_e = pushResult.streamIdInfo) == null ? void 0 : _e.mediaStream;
       const configHandle = GetInnerConfig(callEndPointConfig).pushMediaStream({
         stream: mediaStream,
         isShare: !!params.displayMedia
       });
       if (params.container) {
-        (_e = container == null ? void 0 : container.player) == null ? void 0 : _e.setMediaStream(mediaStream);
+        (_f = container == null ? void 0 : container.player) == null ? void 0 : _f.setMediaStream(mediaStream);
       }
       processHandle.reg(() => {
         configHandle.remove();
       });
     }
-    if ((_f = pushResult.streamIdInfo) == null ? void 0 : _f.duration) {
+    if ((_g = pushResult.streamIdInfo) == null ? void 0 : _g.duration) {
       let containerTrialShow2 = function() {
         if (container && !params.customDisTrial) {
           const ele = document.createElement("div");

package/dist/types/api/user.d.ts

@@ -4,6 +4,7 @@ declare const userApi: {
         code: number;
         data: {
             name: string;
+            id: string;
         };
     }>;
 };

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

@@ -2,6 +2,7 @@ import { AvCallPayload } from "src/api/call";
 import initI18n from "../locales/i18n";
 import { ICommandWsGetter } from "./callComponents/commandWsManager";
 import { CallEndPointConfigManagerUser } from "./callComponents/callEndPointConfig";
+import { IWatermarkConfig } from "../plugins/watermark";
 declare enum ECallSteps {
     "GET_USER_INFO" = "GET_USER_INFO",
     "START_CALL" = "START_CALL",
@@ -24,6 +25,7 @@ type TCreateEndPointParams = ICommandWsGetter & {
     onClose?: () => void;
     zIndex?: number;
     locale?: Parameters<typeof initI18n>[0];
+    watermark?: IWatermarkConfig;
 };
 export declare function CreateProcessHandle<T extends string, TData = void>(): {
     reg(handle: (data: TData) => void | Promise<void>): {

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

@@ -1,6 +1,7 @@
 import { IOpenResult } from "./callComponents/mediaEndPoint";
 import { IOpenParams } from "./callEndPoint";
 import { CreatePlayerPlugin } from "./callEndPointUtilsPlayer";
+import { IWatermarkConfig } from "../plugins/watermark";
 export type IPushLocalMediaResult = IOpenResult & {
     streamIdInfo?: {
         id: string;
@@ -15,6 +16,7 @@ declare function pushLocalMedia(params: {
     locale?: "zh" | "en";
     container?: HTMLDivElement;
     renderParams?: Parameters<typeof CreatePlayerPlugin>[1];
+    watermark?: IWatermarkConfig;
     video?: boolean;
     audio?: boolean;
     displayMedia?: IOpenParams["displayMedia"];

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

@@ -1,7 +1,9 @@
 import { IControlPluginMap } from "../plugins/controller";
+import { IWatermarkConfig } from "../plugins/watermark";
 export declare function CreatePlayerPlugin(container: HTMLDivElement, params?: {
-    disabledControls: (keyof IControlPluginMap)[];
-    enableController: boolean;
+    disabledControls?: (keyof IControlPluginMap)[];
+    enableController?: boolean;
+    watermark?: IWatermarkConfig;
 }): {
     setMediaStream(stream: MediaStream): void;
     destory(): void;

package/package.json

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