trtc-cloud-js-sdk 2.12.2-beta.1 → 2.12.2-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trtc-cloud-js-sdk",
-  "version": "2.12.2-beta.1",
+  "version": "2.12.2-beta.10",
   "description": "Tencent Cloud RTC SDK for Web And Electron",
   "main": "trtc-cloud-js-sdk.js",
   "module": "trtc-cloud-js-sdk.esm.js",
@@ -19,6 +19,6 @@
   "author": "Tencent Cloud Client R&D Center",
   "license": "ISC",
   "dependencies": {
-    "trtc-sdk-v5": "5.18.0"
+    "trtc-sdk-v5": "5.18.1-beta.5"
   }
 }

package/trtc-cloud-js-sdk.d.ts

@@ -2,6 +2,7 @@ import EventEmitter from 'eventemitter3';
 import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';
 import { BasicBeauty } from 'trtc-sdk-v5/plugins/video-effect/basic-beauty';
 import VideoMixer from 'trtc-sdk-v5/plugins/video-effect/video-mixer';
+import Whiteboard from 'trtc-sdk-v5/plugins/whiteboard';
 
 declare enum TRTCVideoResolution {
     TRTCVideoResolution_120_120 = 1,
@@ -780,11 +781,14 @@ interface ITRTCMediaMixingManager {
     addMediaSource(mediaSource: TRTCMediaSource): Promise<void>;
     removeMediaSource(mediaSource: TRTCMediaSource): Promise<void>;
     updateMediaSource(mediaSource: TRTCMediaSource): Promise<void>;
-    startPublish(): Promise<void>;
+    startPublish(options?: {
+        streamType?: TRTCVideoStreamType;
+    }): Promise<void>;
     stopPublish(): Promise<void>;
     updatePublishParams(params: TRTCMediaMixingEncParam): Promise<void>;
-    bindPreviewArea(view: HTMLElement | null): void;
-    destroy(): void;
+    bindPreviewArea(view: HTMLElement | null): Promise<void>;
+    updatePreviewArea(view: HTMLElement | null): Promise<void>;
+    destroy(): Promise<void>;
     on(event: string, func: (...args: any[]) => void): void;
     off(event: string, func: (...args: any[]) => void): void;
 }
@@ -813,6 +817,8 @@ declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
     private sourceList;
     private trtcSourceMap;
     private mixVideoTrack;
+    /** 记录混流输出的推流目标，stopPublish 时据此停止对应流 */
+    private publishStreamType;
     private selectedSource;
     private logger;
     private trtc;
@@ -853,6 +859,12 @@ declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
      * mediaMixingManager.bindPreviewArea( previewDOM);
      */
     bindPreviewArea(view: HTMLElement | null): Promise<void>;
+    /**
+     * 更新本地混流预览容器，不重启 VideoMixer 或替换混流输出 Track。
+     * 用于 RoomKit 布局切换时，将现有预览迁移到新的 DOM 容器。
+     * @param view {HTMLElement | null} - 新的本地混流预览容器
+     */
+    updatePreviewArea(view: HTMLElement | null): Promise<void>;
     private _getTRTCSourceKey;
     private _getTRTCFillMode;
     private _getTRTCVideoProfile;
@@ -881,9 +893,14 @@ declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
     updateMediaSource(mediaSource: TRTCMediaSource): Promise<void>;
     /**
      * 开始推流
+     * @param options {Object} - 推流参数，可选
+     * @param options.streamType {TRTCVideoStreamType} - 混流输出推流目标，默认 `TRTCVideoStreamTypeBig`（主流）。
+     *  传入 `TRTCVideoStreamTypeSub`（辅流）时，混流输出走屏幕分享辅流通道，远端按屏幕分享订阅（对齐 RoomKit「辅流 = 混流输出」模型）。
      * @returns {Promise<void>}
      */
-    startPublish(): Promise<void>;
+    startPublish(options?: {
+        streamType?: TRTCVideoStreamType;
+    }): Promise<void>;
     /**
      * 停止推流
      * @returns {Promise<void>}
@@ -925,6 +942,245 @@ declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
     private unselectMediaSource;
 }
 
+/**
+ * 互动白板类型定义
+ *
+ * 设计目标：Web 端对上层 RoomEngine 的对外契约与 Native 完全对齐。
+ * - 下行（RoomEngine -> SDK）：通过 `callExperimentalAPI` 透传 `OnRecvWhiteboardCommand` 指令
+ * - 上行（SDK -> RoomEngine）：通过 `WhiteboardDelegate.onSendWhiteboardCommand` 回调笔迹数据
+ *
+ * 为了与 Native 的 JSON 线上格式保持一致，字段命名沿用 Native 的 snake_case。
+ */
+/**
+ * 绘图工具类型
+ * @enum {String}
+ */
+declare type WhiteboardToolType = 'pen' | 'rect' | 'ellipse' | 'arrow' | 'eraserObject';
+/**
+ * 白板操作指令
+ * - undo / redo / clearall：下行（远端控制）
+ * - clearself：上行 payload 中使用
+ * @enum {String}
+ */
+declare type WhiteboardOp = 'undo' | 'redo' | 'clearall' | 'clearself';
+/**
+ * 白板事件名
+ */
+declare enum TRTCWhiteboardEvent {
+    /** 上行：本端笔迹/操作数据，需上层转发给远端 */
+    onSendWhiteboardCommand = "onSendWhiteboardCommand"
+}
+/**
+ * 工具配置
+ */
+interface WhiteboardToolConfig {
+    /** 工具类型，默认 pen */
+    type?: WhiteboardToolType;
+    /** 画笔颜色，支持 '#RRGGBB' / '#AARRGGBB' / 0xAARRGGBB 整型 */
+    color?: string | number;
+    /** 线宽 */
+    line_width?: number;
+}
+declare const WhiteboardToolConfig: any;
+/**
+ * 画布尺寸
+ */
+interface WhiteboardCanvasInfo {
+    width: number;
+    height: number;
+}
+declare const WhiteboardCanvasInfo: any;
+/**
+ * 下行指令参数 —— 与 Native `OnRecvWhiteboardCommand` 的 `params` 对齐。
+ *
+ * 该指令承担两类职责：
+ * 1. 配置/生命周期：`enable`、`canvas`、`tool`、`whiteboard.interactive`、`view_handle`
+ * 2. 远端协同：`owner_id`、`stroke_id`、`op`，以及远端笔迹点数据（`xs`/`ys`/`tool`/`color`/`lw`）
+ */
+interface WhiteboardRecvCommand {
+    /** 1=启用, 0=关闭；关闭时其余字段忽略 */
+    enable: number;
+    /** 笔迹 id */
+    stroke_id?: string;
+    /** 操作指令 undo|redo|clearall */
+    op?: WhiteboardOp;
+    /** 操作/笔迹归属用户；存在时表示这是一条远端协同指令 */
+    owner_id?: string;
+    /**
+     * 视图句柄。
+     * - Native：int64 句柄
+     * - Web：传入绑定事件的 DOM 元素或其 id（HTMLElement | string）。
+     *   白板启动后再次传入时，会将现有画布和交互迁移到新的视图。
+     */
+    view_handle?: number | string | HTMLElement;
+    /** 接收 Native 回调数据的实例句柄（Web 端忽略，仅为兼容 Native 透传） */
+    whiteboard_delegate_handle?: number;
+    /** 画布尺寸 */
+    canvas?: WhiteboardCanvasInfo;
+    /** 工具配置 */
+    tool?: WhiteboardToolConfig;
+    /** 白板交互配置 */
+    whiteboard?: {
+        /** canvas 是否响应触摸/鼠标交互事件 */
+        interactive?: boolean;
+    };
+    /** 远端笔迹：是否首包（仅 pen） */
+    is_first?: boolean;
+    /** 远端笔迹颜色（与上行 payload 对齐） */
+    color?: string | number;
+    /** 远端笔迹线宽（line_width 简写，与上行 payload 对齐） */
+    lw?: number;
+    /** 远端笔迹 x 坐标序列（base64 编码，与上行 payload 对齐） */
+    xs?: string;
+    /** 远端笔迹 y 坐标序列（base64 编码，与上行 payload 对齐） */
+    ys?: string;
+}
+declare const WhiteboardRecvCommand: any;
+/**
+ * 上行回调 payload —— 与 Native `OnSendWhiteboardCommand` 的 payload 对齐。
+ */
+interface WhiteboardSendPayload {
+    /** stroke_id */
+    id: string;
+    /** 仅 pen 的时候发，首包哨兵 */
+    is_first?: boolean;
+    /** 工具类型 */
+    tool?: WhiteboardToolType;
+    /** 颜色 */
+    color?: string;
+    /** 线宽 */
+    lw?: number;
+    /** x 坐标序列（base64 编码） */
+    xs?: string;
+    /** y 坐标序列（base64 编码） */
+    ys?: string;
+    /** 操作指令 undo|redo|clearself */
+    op?: WhiteboardOp;
+}
+declare const WhiteboardSendPayload: any;
+/**
+ * 白板上行数据回调通道 —— 与 Native `WhiteboardDelegate` 对齐。
+ */
+interface WhiteboardDelegate {
+    /**
+     * Native/SDK 返回给上层 room 的信令数据
+     * @param isNeedAck 是否需要 ack
+     * @param payload   JSON 字符串，结构见 {@link WhiteboardSendPayload}
+     */
+    onSendWhiteboardCommand(isNeedAck: boolean, payload: string): void;
+}
+declare const WhiteboardDelegate: any;
+/**
+ * 白板管理器对外接口
+ */
+interface ITRTCWhiteboardManager {
+    /** 设置上行数据回调（与 Native WhiteboardDelegate 对齐） */
+    setDelegate(delegate: WhiteboardDelegate | null): void;
+    /** 处理下行指令（对应 callExperimentalAPI 的 OnRecvWhiteboardCommand） */
+    onRecvWhiteboardCommand(command: WhiteboardRecvCommand): Promise<void>;
+    /** 销毁，释放插件与监听 */
+    destroy(): Promise<void>;
+    on(event: string, func: (...args: any[]) => void): void;
+    off(event: string, func: (...args: any[]) => void): void;
+}
+declare const ITRTCWhiteboardManager: any;
+
+/**
+ * 互动白板管理器
+ *
+ * 对上层（RoomEngine）暴露与 Native 完全一致的契约：
+ * - 下行：{@link onRecvWhiteboardCommand}（由 `trtcCloud.callExperimentalAPI('OnRecvWhiteboardCommand', ...)` 路由进来）
+ * - 上行：{@link WhiteboardDelegate#onSendWhiteboardCommand}（或 `on('onSendWhiteboardCommand', cb)` 事件）
+ *
+ * 内部依赖 Web 端 `Whiteboard` 插件完成本地渲染并合流到 VideoMixer，因此使用前必须先启动 VideoMixer
+ * （通常通过 `trtcCloud.getMediaMixingManager().bindPreviewArea(view)`）。
+ */
+declare class TRTCWhiteboardManager implements ITRTCWhiteboardManager {
+    static whiteboardManager: TRTCWhiteboardManager | null;
+    private readonly logPrefix;
+    private logger;
+    private trtc;
+    private trtcCloud;
+    private eventEmitter;
+    private delegate;
+    /** 白板插件是否已启动 */
+    private started;
+    /** 绑定交互事件的 view */
+    private view;
+    constructor(options: {
+        logger: any;
+        trtc: any;
+        trtcCloud: any;
+    });
+    /**
+     * 设置上行数据回调（与 Native WhiteboardDelegate 对齐）
+     * @param delegate 回调实例，传 null 取消
+     */
+    setDelegate(delegate: WhiteboardDelegate | null): void;
+    /**
+     * 处理下行指令 —— 对应 Native `OnRecvWhiteboardCommand`。
+     *
+     * @param command {@link WhiteboardRecvCommand}
+     */
+    onRecvWhiteboardCommand(command: WhiteboardRecvCommand): Promise<void>;
+    /**
+     * 启动白板插件
+     */
+    private _start;
+    /**
+     * 更新白板配置（视图、工具、颜色、线宽、交互）
+     */
+    private _update;
+    /**
+     * 停止白板插件
+     */
+    private _stop;
+    /**
+     * 执行本端操作（undo/redo/clearall）
+     */
+    private _applyLocalOp;
+    /**
+     * 远端协同指令（带 owner_id）。
+     *
+     * 说明：Web `Whiteboard` 插件的跨端笔迹同步由插件内部通过 TRTC customMessage + SEI 自动完成
+     * （guest 在本地预览 canvas 绘制并同步给 host，host 合流进推流），无需上层 RoomEngine 转发
+     * 远端笔迹点数据。因此这里对远端笔迹数据（xs/ys）不做注入，仅记录日志，保持与 Native 契约形态一致。
+     */
+    private _applyRemoteCommand;
+    /**
+     * native tool 配置 -> Web 插件 tool 分组对象（{ name, color, lineWidth }）
+     */
+    private _buildToolGroup;
+    /**
+     * native whiteboard.interactive -> Web 插件 config 分组对象（{ interactive }）
+     */
+    private _buildConfigGroup;
+    /**
+     * native canvas -> Web 插件 canvasInfo 分组对象（{ width, height }）
+     */
+    private _buildCanvasInfo;
+    /**
+     * native op(undo|redo|clearall|clearself) -> Web 插件 operation(undo|redo|clear)
+     */
+    private _opToOperation;
+    /**
+     * 颜色归一化：支持 '#RRGGBB' / '#AARRGGBB' / 0xAARRGGBB 整型 -> CSS 颜色字符串
+     */
+    private _normalizeColor;
+    /**
+     * 解析 view 句柄。
+     * - HTMLElement：直接使用
+     * - string：作为元素 id 查找
+     * - number（Native int64 句柄）：Web 端无法使用，回退到 VideoMixer 默认 view
+     */
+    private _resolveView;
+    on(event: string, func: (...args: any[]) => void): void;
+    off(event: string, func: (...args: any[]) => void): void;
+    destroy(): Promise<void>;
+    private log;
+    private logError;
+}
+
 /**
  * 转录参数
  */
@@ -1127,7 +1383,7 @@ declare class TRTC_Cloud extends EventEmitter {
     private _hasJoinedRoom;
     private _isExitingRoom;
     constructor(config?: ITRTCCloudConfig);
-    static getPlugin(pluginName: string): typeof VirtualBackground | typeof BasicBeauty | typeof VideoMixer | null;
+    static getPlugin(pluginName: string): typeof VirtualBackground | typeof BasicBeauty | typeof VideoMixer | typeof Whiteboard | null;
     /**
      * 创建 TRTCCloud 对象单例
      * @param {ITRTCCloudConfig} config 构造函数初始化
@@ -1673,10 +1929,13 @@ declare class TRTC_Cloud extends EventEmitter {
      *  await trtcCloud.stopScreenShare();
      */
     stopScreenShare(): Promise<void>;
-    _startPublishVideoTrack({ videoTrack }: {
+    _startPublishVideoTrack({ videoTrack, streamType }: {
         videoTrack: MediaStreamTrack;
+        streamType?: TRTCVideoStreamType;
+    }): Promise<void>;
+    _stopPublishVideoTrack({ streamType }?: {
+        streamType?: TRTCVideoStreamType;
     }): Promise<void>;
-    _stopPublishVideoTrack(): Promise<void>;
     startScreenCapture(): void;
     pauseScreenCapture(): void;
     resumeScreenCapture(): void;
@@ -2040,7 +2299,34 @@ declare class TRTC_Cloud extends EventEmitter {
        * @returns {TRTCMediaMixingManager | null}
        */
     getMediaMixingManager(): TRTCMediaMixingManager;
+    /**
+     * 获取互动白板管理器
+     *
+     * 白板依赖 VideoMixer，使用前请先通过 `getMediaMixingManager().bindPreviewArea(view)` 启动 VideoMixer。
+     * 对上层（RoomEngine）的契约与 Native 对齐：
+     * - 下行：`callExperimentalAPI(JSON.stringify({ api: 'OnRecvWhiteboardCommand', params: {...} }))`
+     * - 上行：`getWhiteboardManager().setDelegate({ onSendWhiteboardCommand })`
+     *   或 `getWhiteboardManager().on('onSendWhiteboardCommand', (isNeedAck, payload) => {})`
+     *
+     * @example
+     * import TRTCCloud from 'trtc-cloud-js-sdk';
+     *
+     * const trtcCloud = TRTCCloud.getTRTCShareInstance();
+     * const whiteboardManager = trtcCloud.getWhiteboardManager();
+     * whiteboardManager.setDelegate({
+     *   onSendWhiteboardCommand(isNeedAck, payload) {
+     *     // 转发给远端
+     *   },
+     * });
+     * trtcCloud.callExperimentalAPI(JSON.stringify({
+     *   api: 'OnRecvWhiteboardCommand',
+     *   params: { enable: 1, tool: { type: 'pen', color: '#ff0000', line_width: 3 } },
+     * }));
+     *
+     * @returns {TRTCWhiteboardManager}
+     */
+    getWhiteboardManager(): TRTCWhiteboardManager;
     getAITranscriberManager(): AITranscriberManager;
 }
 
-export { AITranscriberListener, AudioMuteType, IAITranscriberManager, ITRTCMediaMixingEvent, ITRTCMediaMixingManager, InteractionOption, Rect, TRTCAppScene, TRTCAudioQuality, TRTCAudioSceneEx, TRTCBeautyStyle, TRTCCameraCaptureMode, TRTCCameraCaptureParams, TRTCDeviceInfo, TRTCDeviceState, TRTCDeviceType, TRTCImageBuffer, TRTCLocalStatistics, TRTCLogLevel, TRTCMediaMixingEncParam, TRTCMediaMixingErrorCode, TRTCMediaMixingEvent, TRTCMediaSource, TRTCMediaSourceType, TRTCMixInputType, TRTCMixUser, TRTCNetworkQosParam, TRTCParams, TRTCPublishCDNParam, TRTCQosControlMode, TRTCQuality, TRTCQualityInfo, TRTCRemoteStatistics, TRTCRenderParams, TRTCRoleType, TRTCScreenCaptureProperty, TRTCScreenCaptureSourceInfo, TRTCScreenCaptureSourceType, TRTCStatistics, TRTCTranscodingConfig, TRTCTranscodingConfigMode, TRTCVideoEncParam, TRTCVideoFillMode, TRTCVideoMirrorType, TRTCVideoQosPreference, TRTCVideoResolution, TRTCVideoResolutionMode, TRTCVideoRotation, TRTCVideoStreamType, TRTCVolumeInfo, TranscriberMessage, TranscriberParams, TRTC_Cloud as default };
+export { AITranscriberListener, AudioMuteType, IAITranscriberManager, ITRTCMediaMixingEvent, ITRTCMediaMixingManager, ITRTCWhiteboardManager, InteractionOption, Rect, TRTCAppScene, TRTCAudioQuality, TRTCAudioSceneEx, TRTCBeautyStyle, TRTCCameraCaptureMode, TRTCCameraCaptureParams, TRTCDeviceInfo, TRTCDeviceState, TRTCDeviceType, TRTCImageBuffer, TRTCLocalStatistics, TRTCLogLevel, TRTCMediaMixingEncParam, TRTCMediaMixingErrorCode, TRTCMediaMixingEvent, TRTCMediaSource, TRTCMediaSourceType, TRTCMixInputType, TRTCMixUser, TRTCNetworkQosParam, TRTCParams, TRTCPublishCDNParam, TRTCQosControlMode, TRTCQuality, TRTCQualityInfo, TRTCRemoteStatistics, TRTCRenderParams, TRTCRoleType, TRTCScreenCaptureProperty, TRTCScreenCaptureSourceInfo, TRTCScreenCaptureSourceType, TRTCStatistics, TRTCTranscodingConfig, TRTCTranscodingConfigMode, TRTCVideoEncParam, TRTCVideoFillMode, TRTCVideoMirrorType, TRTCVideoQosPreference, TRTCVideoResolution, TRTCVideoResolutionMode, TRTCVideoRotation, TRTCVideoStreamType, TRTCVolumeInfo, TRTCWhiteboardEvent, TranscriberMessage, TranscriberParams, WhiteboardCanvasInfo, WhiteboardDelegate, WhiteboardOp, WhiteboardRecvCommand, WhiteboardSendPayload, WhiteboardToolConfig, WhiteboardToolType, TRTC_Cloud as default };