trtc-electron-sdk 12.5.705-beta.0 → 12.6.705

package/liteav/Live/Pusher/index.d.ts

@@ -1,4 +1,5 @@
-import { V2LiveRotation, V2LiveFillMode, V2LiveAudioQuality, V2LiveVideoEncoderParam, V2LiveMirrorType, V2LiveMode, V2LivePusherEvent } from '../live_define';
+import { V2LiveRotation, V2LiveFillMode, V2LiveAudioQuality, V2LiveVideoEncoderParam, V2LiveMirrorType, V2LiveMode, V2LivePusherEvent, V2TXLiveTranscodingConfig } from '../live_define';
+import { TRTCCameraCaptureParams } from '../../trtc_define';
 import { TRTCDeviceInfo, TRTCDeviceType } from '../../trtc_define';
 /**
  * 腾讯云直播推流器
@@ -183,6 +184,13 @@ export declare class V2LivePusher {
      * @return {Number}                         - 参考 V2LiveCode 的定义
      */
     enableVolumeEvaluation(intervalMs: number): number;
+    /**
+     * 设置云端的混流转码参数
+     *
+     * @param {V2TXLiveTranscodingConfig | null} config   - 混流转码参数，参考 V2TXLiveTranscodingConfig 的定义。如果传入 null 则取消云端混流转码。
+     * @return {Number}
+     */
+    setMixTranscodingConfig(config: V2TXLiveTranscodingConfig | null): number;
     /**
      * 获取摄像头设备列表
      *
@@ -330,9 +338,16 @@ export declare class V2LivePusher {
      *  - false: 不跟随。只有当 SDK 使用的音频设备被移除后或插入新的音频设备为系统默认设备时，SDK 才切换至系统默认的音频设备。
      */
     enableFollowingDefaultAudioDevice(deviceType: TRTCDeviceType, enable: boolean): void;
+    /**
+     * 设置摄像头采集偏好
+     *
+     * @param {TRTCCameraCaptureParams} params - 摄像头采集参数
+     */
+    setCameraCapturerParam(params: TRTCCameraCaptureParams): void;
     private enableCustomVideoRender;
     private _createPusherRender;
     private _destroyPusherRender;
+    private _destroyCameraTestRender;
     private _setVideoRenderBuffer;
     private _addVideoRenderCallback;
     private _removeVideoRenderCallback;

package/liteav/Live/Pusher/index.js

@@ -60,7 +60,7 @@ class V2LivePusher {
     }
     destroy() {
         this._destroyPusherRender();
-        this.cameraTestVideoRender = null;
+        this._destroyCameraTestRender();
         this.livePusher.destroy();
         this.livePusher = null;
         this.deviceManager = null;
@@ -297,6 +297,17 @@ class V2LivePusher {
         this.logger.debug(`enableVolumeEvaluation, intervalMs:${intervalMs}`);
         return (_a = this.livePusher) === null || _a === void 0 ? void 0 : _a.enableVolumeEvaluation(intervalMs);
     }
+    /**
+     * 设置云端的混流转码参数
+     *
+     * @param {V2TXLiveTranscodingConfig | null} config   - 混流转码参数，参考 V2TXLiveTranscodingConfig 的定义。如果传入 null 则取消云端混流转码。
+     * @return {Number}
+     */
+    setMixTranscodingConfig(config) {
+        var _a;
+        this.logger.debug(`setMixTranscodingConfig, config:${config}`);
+        return (_a = this.livePusher) === null || _a === void 0 ? void 0 : _a.setMixTranscodingConfig(config);
+    }
     /////////////////////////////////////////////////////////////////////////////////
     //
     //                      （二）deviceManager相关接口函数
@@ -516,6 +527,16 @@ class V2LivePusher {
         this.logger.debug(`enableFollowingDefaultAudioDevice, deviceType:${deviceType}, enable:${enable}`);
         this.deviceManager.enableFollowingDefaultAudioDevice(deviceType, enable);
     }
+    /**
+     * 设置摄像头采集偏好
+     *
+     * @param {TRTCCameraCaptureParams} params - 摄像头采集参数
+     */
+    setCameraCapturerParam(params) {
+        var _a;
+        this.logger.debug(`setCameraCapturerParam, params:${JSON.stringify(params)}`);
+        (_a = this.deviceManager) === null || _a === void 0 ? void 0 : _a.setCameraCapturerParam(params);
+    }
     ////////////////////////////////////////////////////////////////////////////////
     //
     //                            内部接口
@@ -542,6 +563,11 @@ class V2LivePusher {
         this._removeVideoRenderCallback();
         this.enableCustomVideoRender(false, this.pixelFormat, live_define_1.V2LiveBufferType.V2LiveBufferTypeByteBuffer);
     }
+    _destroyCameraTestRender() {
+        if (this.cameraTestVideoRender) {
+            this.stopCameraDeviceTest();
+        }
+    }
     // videoRender callback and buffer
     _setVideoRenderBuffer() {
         var _a;

package/liteav/Live/live_define.d.ts

@@ -310,3 +310,78 @@ export declare enum V2LivePushStatus {
     V2LivePushStatusConnectSuccess = 2,
     V2LivePushStatusReconnecting = 3
 }
+export declare enum V2TXLiveMixInputType {
+    V2TXLiveMixInputTypeAudioVideo = 0,
+    V2TXLiveMixInputTypePureVideo = 1,
+    V2TXLiveMixInputTypePureAudio = 2
+}
+/**
+ * 云端混流中每一路子画面的位置信息
+ *
+ * @param {String} userId - 参与混流的 userId
+ * @param {String} streamId - 参与混流的 userId 所在对应的推流 streamId, 空的话表示当前推流 streamId。
+ * @param {Number} x - 图层位置 x 坐标（绝对像素值）。
+ * @param {Number} y - 图层位置 y 坐标（绝对像素值）。
+ * @param {Number} width - 图层位置宽度（绝对像素值）。
+ * @param {Number} height - 图层位置高度（绝对像素值）。
+ * @param {Number} zOrder - 图层层次（1 - 15）不可重复。
+ * @param {V2TXLiveMixInputType} inputType - 该直播流的输入类型。
+ */
+export declare class V2TXLiveMixStream {
+    userId: string;
+    streamId: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zOrder: number;
+    inputType: V2TXLiveMixInputType;
+    constructor(userId?: string, streamId?: string, x?: number, y?: number, width?: number, height?: number, zOrder?: number, inputType?: V2TXLiveMixInputType);
+}
+/**
+ * 云端混流（转码）配置
+ *
+ * @param {Number} videoWidth   - 【字段含义】最终转码后的视频分辨率的宽度。<br>
+ *                                【推荐取值】推荐值：360px ，如果你是纯音频推流，请将 width × height 设为 0px × 0px，否则混流后会携带一条画布背景的视频流。
+ * @param {Number} videoHeight  - 【字段含义】最终转码后的视频分辨率的高度。<br>
+ *                                【推荐取值】推荐值：640px ，如果你是纯音频推流，请将 width × height 设为 0px × 0px，否则混流后会携带一条画布背景的视频流。
+ * @param {Number} videoBitrate - 【字段含义】最终转码后的视频分辨率的码率（kbps）<br>
+ *                                【推荐取值】如果填0，后台会根据videoWidth和videoHeight来估算码率，您也可以参考枚举定义TRTCVideoResolution_640_480的注释。
+ * @param {Number} videoFramerate  - 【字段含义】最终转码后的视频分辨率的帧率（FPS）<br>
+ *                                   【推荐取值】默认值：15fps，取值范围是 (0,30]。
+ * @param {Number} videoGOP        - 【字段含义】最终转码后的视频分辨率的关键帧间隔（又称为 GOP）。<br>
+ *                                   【推荐取值】默认值：2，单位为秒，取值范围是 [1,8]。
+ * @param {Number} backgroundColor - 【字段含义】混合后画面的底色颜色，默认为黑色，格式为十六进制数字，比如：“0x61B9F1” 代表 RGB 分别为(97,158,241)。<br>
+ *                                   【推荐取值】默认值：0x000000，黑色
+ * @param {String} backgroundImage - 【字段含义】混合后画面的背景图。<br>
+ *                                   【推荐取值】默认值：''，即不设置背景图<br>
+ *                                   【特别说明】背景图需要您事先在 “[控制台](https://console.cloud.tencent.com/trtc) => 应用管理 => 功能配置 => 素材管理” 中上传，<br>
+ *                                    上传成功后可以获得对应的“图片ID”，然后将“图片ID”转换成字符串类型并设置到 backgroundImage 里即可。<br>
+ *                                    例如：假设“图片ID” 为 63，可以设置 backgroundImage = @"63";
+ * @param {Number} audioSampleRate - 【字段含义】最终转码后的音频采样率。<br>
+ *                                   【推荐取值】默认值：48000Hz。支持12000HZ、16000HZ、22050HZ、24000HZ、32000HZ、44100HZ、48000HZ。
+ * @param {Number} audioBitrate    - 【字段含义】最终转码后的音频码率。<br>
+ *                                   【推荐取值】默认值：64kbps，取值范围是 [32，192]。
+ * @param {Number} audioChannels   - 【字段含义】最终转码后的音频声道数<br>
+ *                                   【推荐取值】默认值：1。取值范围为 [1,2] 中的整型。
+ * @param {V2TXLiveMixStream[]} mixStreams - 【字段含义】每一路子画面的位置信息
+ * @param {String} outputStreamId  - 【字段含义】输出到 CDN 上的直播流 ID。<br>
+ *                                    如不设置该参数，SDK 会执行默认逻辑，即房间里的多路流会混合到该接口调用者的视频流上，也就是 A+B =>A；<br>
+ *                                    如果设置该参数，SDK 会将房间里的多路流混合到您指定的直播流 ID 上，也就是 A+B =>C。<br>
+ *                                   【推荐取值】默认值：''，即房间里的多路流会混合到该接口调用者的视频流上。
+ */
+export declare class V2TXLiveTranscodingConfig {
+    videoWidth: number;
+    videoHeight: number;
+    videoBitrate: number;
+    videoFramerate: number;
+    videoGOP: number;
+    backgroundColor: number;
+    backgroundImage: string;
+    audioSampleRate: number;
+    audioBitrate: number;
+    audioChannels: number;
+    mixStreams: V2TXLiveMixStream[];
+    outputStreamId: string;
+    constructor(videoWidth?: number, videoHeight?: number, videoBitrate?: number, videoFramerate?: number, videoGOP?: number, backgroundColor?: number, backgroundImage?: string, audioSampleRate?: number, audioBitrate?: number, audioChannels?: number, mixStreams?: any[], outputStreamId?: string);
+}

package/liteav/Live/live_define.js

@@ -3,7 +3,7 @@
  * V2Live 关键类型定义
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.V2LivePushStatus = exports.V2LivePlayerStatistics = exports.V2LivePusherStatistics = exports.V2LiveAudioQuality = exports.V2LiveBufferType = exports.V2LivePixelFormat = exports.V2LiveRotation = exports.V2LiveFillMode = exports.V2LiveMirrorType = exports.V2LiveVideoEncoderParam = exports.V2LiveVideoResolutionMode = exports.V2LiveVideoResolution = exports.V2LivePlayerEvent = exports.V2LivePusherEvent = exports.V2LiveMode = exports.V2LiveCode = void 0;
+exports.V2TXLiveTranscodingConfig = exports.V2TXLiveMixStream = exports.V2TXLiveMixInputType = exports.V2LivePushStatus = exports.V2LivePlayerStatistics = exports.V2LivePusherStatistics = exports.V2LiveAudioQuality = exports.V2LiveBufferType = exports.V2LivePixelFormat = exports.V2LiveRotation = exports.V2LiveFillMode = exports.V2LiveMirrorType = exports.V2LiveVideoEncoderParam = exports.V2LiveVideoResolutionMode = exports.V2LiveVideoResolution = exports.V2LivePlayerEvent = exports.V2LivePusherEvent = exports.V2LiveMode = exports.V2LiveCode = void 0;
 /////////////////////////////////////////////////////////////////////////////////
 //
 //                             V2 错误码和警告码
@@ -552,3 +552,101 @@ var V2LivePushStatus;
     V2LivePushStatus[V2LivePushStatus["V2LivePushStatusConnectSuccess"] = 2] = "V2LivePushStatusConnectSuccess";
     V2LivePushStatus[V2LivePushStatus["V2LivePushStatusReconnecting"] = 3] = "V2LivePushStatusReconnecting";
 })(V2LivePushStatus = exports.V2LivePushStatus || (exports.V2LivePushStatus = {}));
+/////////////////////////////////////////////////////////////////////////////////
+//
+//          （五）云端混流结构定义
+//
+/////////////////////////////////////////////////////////////////////////////////
+/**
+ * 混流输入类型配置
+ *
+ * @enum {Number}
+ */
+const V2TXLiveMixInputType_HACK_JSDOC = {
+    /** 混入音视频。 */
+    V2TXLiveMixInputTypeAudioVideo: 0,
+    /** 只混入视频。 */
+    V2TXLiveMixInputTypePureVideo: 1,
+    /** 只混入音频。 */
+    V2TXLiveMixInputTypePureAudio: 2,
+};
+var V2TXLiveMixInputType;
+(function (V2TXLiveMixInputType) {
+    V2TXLiveMixInputType[V2TXLiveMixInputType["V2TXLiveMixInputTypeAudioVideo"] = 0] = "V2TXLiveMixInputTypeAudioVideo";
+    V2TXLiveMixInputType[V2TXLiveMixInputType["V2TXLiveMixInputTypePureVideo"] = 1] = "V2TXLiveMixInputTypePureVideo";
+    V2TXLiveMixInputType[V2TXLiveMixInputType["V2TXLiveMixInputTypePureAudio"] = 2] = "V2TXLiveMixInputTypePureAudio";
+})(V2TXLiveMixInputType = exports.V2TXLiveMixInputType || (exports.V2TXLiveMixInputType = {}));
+/**
+ * 云端混流中每一路子画面的位置信息
+ *
+ * @param {String} userId - 参与混流的 userId
+ * @param {String} streamId - 参与混流的 userId 所在对应的推流 streamId, 空的话表示当前推流 streamId。
+ * @param {Number} x - 图层位置 x 坐标（绝对像素值）。
+ * @param {Number} y - 图层位置 y 坐标（绝对像素值）。
+ * @param {Number} width - 图层位置宽度（绝对像素值）。
+ * @param {Number} height - 图层位置高度（绝对像素值）。
+ * @param {Number} zOrder - 图层层次（1 - 15）不可重复。
+ * @param {V2TXLiveMixInputType} inputType - 该直播流的输入类型。
+ */
+class V2TXLiveMixStream {
+    constructor(userId = '', streamId = '', x = 0, y = 0, width = 0, height = 0, zOrder = 0, inputType = V2TXLiveMixInputType.V2TXLiveMixInputTypeAudioVideo) {
+        this.userId = userId;
+        this.streamId = streamId;
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.zOrder = zOrder;
+        this.inputType = inputType;
+    }
+}
+exports.V2TXLiveMixStream = V2TXLiveMixStream;
+/**
+ * 云端混流（转码）配置
+ *
+ * @param {Number} videoWidth   - 【字段含义】最终转码后的视频分辨率的宽度。<br>
+ *                                【推荐取值】推荐值：360px ，如果你是纯音频推流，请将 width × height 设为 0px × 0px，否则混流后会携带一条画布背景的视频流。
+ * @param {Number} videoHeight  - 【字段含义】最终转码后的视频分辨率的高度。<br>
+ *                                【推荐取值】推荐值：640px ，如果你是纯音频推流，请将 width × height 设为 0px × 0px，否则混流后会携带一条画布背景的视频流。
+ * @param {Number} videoBitrate - 【字段含义】最终转码后的视频分辨率的码率（kbps）<br>
+ *                                【推荐取值】如果填0，后台会根据videoWidth和videoHeight来估算码率，您也可以参考枚举定义TRTCVideoResolution_640_480的注释。
+ * @param {Number} videoFramerate  - 【字段含义】最终转码后的视频分辨率的帧率（FPS）<br>
+ *                                   【推荐取值】默认值：15fps，取值范围是 (0,30]。
+ * @param {Number} videoGOP        - 【字段含义】最终转码后的视频分辨率的关键帧间隔（又称为 GOP）。<br>
+ *                                   【推荐取值】默认值：2，单位为秒，取值范围是 [1,8]。
+ * @param {Number} backgroundColor - 【字段含义】混合后画面的底色颜色，默认为黑色，格式为十六进制数字，比如：“0x61B9F1” 代表 RGB 分别为(97,158,241)。<br>
+ *                                   【推荐取值】默认值：0x000000，黑色
+ * @param {String} backgroundImage - 【字段含义】混合后画面的背景图。<br>
+ *                                   【推荐取值】默认值：''，即不设置背景图<br>
+ *                                   【特别说明】背景图需要您事先在 “[控制台](https://console.cloud.tencent.com/trtc) => 应用管理 => 功能配置 => 素材管理” 中上传，<br>
+ *                                    上传成功后可以获得对应的“图片ID”，然后将“图片ID”转换成字符串类型并设置到 backgroundImage 里即可。<br>
+ *                                    例如：假设“图片ID” 为 63，可以设置 backgroundImage = @"63";
+ * @param {Number} audioSampleRate - 【字段含义】最终转码后的音频采样率。<br>
+ *                                   【推荐取值】默认值：48000Hz。支持12000HZ、16000HZ、22050HZ、24000HZ、32000HZ、44100HZ、48000HZ。
+ * @param {Number} audioBitrate    - 【字段含义】最终转码后的音频码率。<br>
+ *                                   【推荐取值】默认值：64kbps，取值范围是 [32，192]。
+ * @param {Number} audioChannels   - 【字段含义】最终转码后的音频声道数<br>
+ *                                   【推荐取值】默认值：1。取值范围为 [1,2] 中的整型。
+ * @param {V2TXLiveMixStream[]} mixStreams - 【字段含义】每一路子画面的位置信息
+ * @param {String} outputStreamId  - 【字段含义】输出到 CDN 上的直播流 ID。<br>
+ *                                    如不设置该参数，SDK 会执行默认逻辑，即房间里的多路流会混合到该接口调用者的视频流上，也就是 A+B =>A；<br>
+ *                                    如果设置该参数，SDK 会将房间里的多路流混合到您指定的直播流 ID 上，也就是 A+B =>C。<br>
+ *                                   【推荐取值】默认值：''，即房间里的多路流会混合到该接口调用者的视频流上。
+ */
+class V2TXLiveTranscodingConfig {
+    constructor(videoWidth = 0, videoHeight = 0, videoBitrate = 0, videoFramerate = 15, videoGOP = 2, backgroundColor = 0, backgroundImage = '', audioSampleRate = 64, audioBitrate = 48000, audioChannels = 1, mixStreams = [], outputStreamId = '') {
+        this.videoWidth = videoWidth;
+        this.videoHeight = videoHeight;
+        this.videoBitrate = videoBitrate;
+        this.videoFramerate = videoFramerate;
+        this.videoGOP = videoGOP;
+        this.backgroundColor = backgroundColor;
+        this.backgroundImage = backgroundImage;
+        this.audioSampleRate = audioSampleRate;
+        this.audioBitrate = audioBitrate;
+        this.audioChannels = audioChannels;
+        this.mixStreams = mixStreams;
+        this.outputStreamId = outputStreamId;
+    }
+}
+exports.V2TXLiveTranscodingConfig = V2TXLiveTranscodingConfig;

package/liteav/MediaMixingDesigner/index.d.ts

@@ -1,4 +1,4 @@
-import { TRTCVideoResolution, TRTCVideoResolutionMode, Rect } from "../trtc_define";
+import { Rect, TRTCVideoFillMode } from "../trtc_define";
 export declare type TRTCMediaInfo = {
     id: string;
     rect: Rect;
@@ -9,8 +9,6 @@ export declare type TRTCMediaInfo = {
 declare class TRTCMediaMixingDesigner {
     private logPrefix;
     private container;
-    private videoResolution;
-    private resMode;
     private mixingVideoWidth;
     private mixingVideoHeight;
     private canExceedContainer;
@@ -33,16 +31,20 @@ declare class TRTCMediaMixingDesigner {
     private mousedownTop;
     private eventButton;
     private resizeObserver;
+    private relativeWorkingArea;
+    private absoluteWorkingArea;
+    private fillMode;
     constructor(options: {
         view: HTMLElement;
-        videoResolution: TRTCVideoResolution;
-        resMode: TRTCVideoResolutionMode;
+        width: number;
+        height: number;
         canExceedContainer: boolean;
     });
     updateOptions(options: {
-        videoResolution?: TRTCVideoResolution;
-        resMode?: TRTCVideoResolutionMode;
+        width: number;
+        height: number;
     }): void;
+    setWorkingArea(relative: Rect | null | undefined, fillMode?: TRTCVideoFillMode): void;
     addMedia(media: TRTCMediaInfo): void;
     removeMedia(media: TRTCMediaInfo): void;
     updateMedia(media: TRTCMediaInfo): void;
@@ -54,6 +56,7 @@ declare class TRTCMediaMixingDesigner {
     private initContainerMouseEventHander;
     private initContainerResizeObserver;
     private onPreviewAreaResize;
+    private updateWorkingArea;
     private updatePreviewProperty;
     private updateOverlay;
     private onMove;

package/liteav/MediaMixingDesigner/index.js

@@ -5,26 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const events_1 = require("events");
 const trtc_define_1 = require("../trtc_define");
-const utils_1 = require("../utils");
 const logger_1 = __importDefault(require("../logger"));
 const Movable_1 = __importDefault(require("./Movable"));
 const Resizable_1 = __importDefault(require("./Resizable"));
 const MIN_MOVE_DISTANCE = 5; // minimum moving distance
-const initResolutionMap = () => {
-    const map = new Map();
-    for (const key in trtc_define_1.TRTCVideoResolution) {
-        if (isNaN(Number(key))) {
-            const value = trtc_define_1.TRTCVideoResolution[key];
-            const tmp = key.split('_');
-            map.set(value, {
-                width: parseInt(tmp[1]),
-                height: parseInt(tmp[2]),
-            });
-        }
-    }
-    return map;
-};
-const resolutionMap = initResolutionMap();
 class TRTCMediaMixingDesigner {
     constructor(options) {
         this.logPrefix = '[TRTCMediaMixingDesigner]';
@@ -48,19 +32,12 @@ class TRTCMediaMixingDesigner {
         this.resizeObserver = null;
         this.container = options.view;
         this.container.style.position = 'absolute';
-        this.videoResolution = options.videoResolution;
-        this.resMode = options.resMode;
-        if (resolutionMap.has(options.videoResolution)) {
-            const { width, height } = resolutionMap.get(options.videoResolution);
-            if (this.resMode === trtc_define_1.TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape) {
-                this.mixingVideoWidth = width;
-                this.mixingVideoHeight = height;
-            }
-            else {
-                this.mixingVideoWidth = height;
-                this.mixingVideoHeight = width;
-            }
-        }
+        this.relativeWorkingArea = { left: 0, top: 0, right: 1, bottom: 1 };
+        this.absoluteWorkingArea = {};
+        this.fillMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+        this.updateWorkingArea();
+        this.mixingVideoWidth = options.width;
+        this.mixingVideoHeight = options.height;
         this.updatePreviewProperty();
         this.canExceedContainer = options.canExceedContainer || false;
         this.eventEmitter = new events_1.EventEmitter();
@@ -75,24 +52,25 @@ class TRTCMediaMixingDesigner {
         this.initContainerResizeObserver();
     }
     updateOptions(options) {
-        if (!(0, utils_1.isNullOrUndefined)(options.videoResolution) || !(0, utils_1.isNullOrUndefined)(options.resMode)) {
-            this.resMode = !(0, utils_1.isNullOrUndefined)(options.resMode) ? options.resMode : this.resMode;
-            if (options.videoResolution) {
-                if (resolutionMap.has(options.videoResolution)) {
-                    const { width, height } = resolutionMap.get(options.videoResolution);
-                    if (this.resMode === trtc_define_1.TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape) {
-                        this.mixingVideoWidth = width;
-                        this.mixingVideoHeight = height;
-                    }
-                    else {
-                        this.mixingVideoWidth = height;
-                        this.mixingVideoHeight = width;
-                    }
-                }
-            }
+        if (this.mixingVideoWidth !== options.width || this.mixingVideoHeight !== options.height) {
+            this.mixingVideoWidth = options.width;
+            this.mixingVideoHeight = options.height;
+            this.updatePreviewProperty();
+            this.updateOverlay();
+        }
+    }
+    setWorkingArea(relative, fillMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit) {
+        logger_1.default.log(`${this.logPrefix}setWorkingArea:`, JSON.stringify(relative), `fillMode:${fillMode}`);
+        if (relative) {
+            this.relativeWorkingArea = Object.assign({}, relative);
+            this.fillMode = fillMode;
+            this.updateWorkingArea();
             this.updatePreviewProperty();
             this.updateOverlay();
         }
+        else {
+            logger_1.default.error(`${this.logPrefix}setWorkingArea invalid parameter:`, relative);
+        }
     }
     addMedia(media) {
         this.mediaList.unshift(media);
@@ -194,50 +172,98 @@ class TRTCMediaMixingDesigner {
         logger_1.default.log(`${this.logPrefix}onPreviewAreaResize:`, entries);
         for (const entry of entries) {
             if (entry.target === this.container) {
+                this.updateWorkingArea();
                 this.updatePreviewProperty();
                 this.updateOverlay();
                 break;
             }
         }
     }
+    updateWorkingArea() {
+        if (this.relativeWorkingArea && this.container) {
+            const containerRect = this.container.getBoundingClientRect();
+            this.absoluteWorkingArea = {
+                left: this.relativeWorkingArea.left * containerRect.width,
+                top: this.relativeWorkingArea.top * containerRect.height,
+                right: this.relativeWorkingArea.right * containerRect.width,
+                bottom: this.relativeWorkingArea.bottom * containerRect.height,
+                width: (this.relativeWorkingArea.right - this.relativeWorkingArea.left) * containerRect.width,
+                height: (this.relativeWorkingArea.bottom - this.relativeWorkingArea.top) * containerRect.height,
+            };
+            logger_1.default.log(`${this.logPrefix}updateWorkingArea absolute working area:`, JSON.stringify(this.absoluteWorkingArea));
+        }
+        else {
+            logger_1.default.error(`${this.logPrefix}updateWorkingArea no data:`, this.relativeWorkingArea, this.container);
+        }
+    }
     updatePreviewProperty() {
-        if (this.container) {
-            const containerWidth = this.container.offsetWidth;
-            const containerHeight = this.container.offsetHeight;
-            const widthScale = containerWidth / this.mixingVideoWidth;
-            const heightScale = containerHeight / this.mixingVideoHeight;
-            this.previewScale = widthScale > heightScale ? heightScale : widthScale;
+        if (this.absoluteWorkingArea) {
+            if (this.mixingVideoWidth <= 0 || this.mixingVideoHeight <= 0) {
+                logger_1.default.error(`${this.logPrefix}updatePreviewProperty failed, mixingVideoWidth or mixingVideoHeight is zero`);
+                return;
+            }
+            const workingAreaWidth = this.absoluteWorkingArea.width;
+            const workingAreaHeight = this.absoluteWorkingArea.height;
+            const widthScale = workingAreaWidth / this.mixingVideoWidth;
+            const heightScale = workingAreaHeight / this.mixingVideoHeight;
+            if (this.fillMode === trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fill) {
+                this.previewScale = widthScale > heightScale ? widthScale : heightScale;
+            }
+            else {
+                this.fillMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+                this.previewScale = widthScale > heightScale ? heightScale : widthScale;
+            }
             this.previewWidth = this.mixingVideoWidth * this.previewScale;
             this.previewHeight = this.mixingVideoHeight * this.previewScale;
-            this.previewLeft = (containerWidth - this.previewWidth) / 2;
-            this.previewTop = (containerHeight - this.previewHeight) / 2;
+            this.previewLeft = (workingAreaWidth - this.previewWidth) / 2;
+            this.previewTop = (workingAreaHeight - this.previewHeight) / 2;
+            logger_1.default.debug(`${this.logPrefix}updatePreviewProperty: fillMode: ${this.fillMode} previewScale: ${this.previewScale}, previewWidth: ${this.previewWidth}, previewHeight: ${this.previewHeight}, previewLeft: ${this.previewLeft}, previewTop: ${this.previewTop}`);
         }
         else {
-            logger_1.default.error(`${this.logPrefix}calcPreviewScale failed, no HTML element to display`);
+            logger_1.default.error(`${this.logPrefix}updatePreviewProperty failed, no HTML element to display`);
         }
     }
     updateOverlay() {
         if (this.moveAndResizeOverlay) {
-            let left = `${this.previewLeft}px`;
-            let top = `${this.previewTop}px`;
-            let width = '0px';
-            let height = '0px';
+            let left = this.absoluteWorkingArea.left + this.previewLeft;
+            let top = this.absoluteWorkingArea.top + this.previewTop;
+            let width = 0;
+            let height = 0;
             if (this.selectedMediaIndex >= 0) {
+                logger_1.default.debug(`${this.logPrefix}updateOverlay: selected media:`, this.mediaList[this.selectedMediaIndex].rect);
                 const selectedPreviewRect = {
                     left: this.mediaList[this.selectedMediaIndex].rect.left * this.previewScale,
                     top: this.mediaList[this.selectedMediaIndex].rect.top * this.previewScale,
                     right: this.mediaList[this.selectedMediaIndex].rect.right * this.previewScale,
                     bottom: this.mediaList[this.selectedMediaIndex].rect.bottom * this.previewScale
                 };
-                left = `${selectedPreviewRect.left + this.previewLeft}px`;
-                top = `${selectedPreviewRect.top + this.previewTop}px`;
-                width = `${selectedPreviewRect.right - selectedPreviewRect.left}px`;
-                height = `${selectedPreviewRect.bottom - selectedPreviewRect.top}px`;
+                left = this.absoluteWorkingArea.left + this.previewLeft + selectedPreviewRect.left;
+                top = this.absoluteWorkingArea.top + this.previewTop + selectedPreviewRect.top;
+                width = selectedPreviewRect.right - selectedPreviewRect.left;
+                height = selectedPreviewRect.bottom - selectedPreviewRect.top;
+            }
+            let renderScale = 1;
+            if (this.container) {
+                const containerLayoutWidth = this.container.offsetWidth;
+                const containerRenderWidth = Math.round(this.container.getBoundingClientRect().width);
+                if (containerLayoutWidth !== containerRenderWidth) {
+                    logger_1.default.warn(`${this.logPrefix}updateOverlay container layout width: ${containerLayoutWidth} container render width: ${containerRenderWidth}`);
+                    renderScale = containerRenderWidth / containerLayoutWidth;
+                }
+            }
+            this.moveAndResizeOverlay.style.left = `${left}px`;
+            this.moveAndResizeOverlay.style.top = `${top}px`;
+            this.moveAndResizeOverlay.style.width = `${width}px`;
+            this.moveAndResizeOverlay.style.height = `${height}px`;
+            if (renderScale !== 1) {
+                this.moveAndResizeOverlay.style.transform = `scale(${1 / renderScale})`;
+                this.moveAndResizeOverlay.style.transformOrigin = `-${left}px -${top}px`; // Why?
+            }
+            else {
+                this.moveAndResizeOverlay.style.transform = 'none';
+                this.moveAndResizeOverlay.style.transformOrigin = 'none';
             }
-            this.moveAndResizeOverlay.style.left = left;
-            this.moveAndResizeOverlay.style.top = top;
-            this.moveAndResizeOverlay.style.width = width;
-            this.moveAndResizeOverlay.style.height = height;
+            logger_1.default.debug(`${this.logPrefix}updateOverlay: ${left} ${top} ${width} ${height} ${renderScale}`);
         }
     }
     onMove(left, top) {
@@ -247,10 +273,10 @@ class TRTCMediaMixingDesigner {
         if (target && this.moveAndResizeOverlay) {
             // calc new preview rect
             const newPreviewRect = {
-                left: left - this.previewLeft,
-                top: top - this.previewTop,
-                right: left - this.previewLeft + this.moveAndResizeOverlay.offsetWidth,
-                bottom: top - this.previewTop + this.moveAndResizeOverlay.offsetHeight,
+                left: left - this.absoluteWorkingArea.left - this.previewLeft,
+                top: top - this.absoluteWorkingArea.top - this.previewTop,
+                right: left - this.absoluteWorkingArea.left - this.previewLeft + this.moveAndResizeOverlay.offsetWidth,
+                bottom: top - this.absoluteWorkingArea.top - this.previewTop + this.moveAndResizeOverlay.offsetHeight,
             };
             this.doAdsorption(newPreviewRect);
             // calc new mixing rect
@@ -260,6 +286,8 @@ class TRTCMediaMixingDesigner {
                 right: Math.round(newPreviewRect.right / this.previewScale),
                 bottom: Math.round(newPreviewRect.bottom / this.previewScale),
             };
+            logger_1.default.debug(`${this.logPrefix}onMove new preview rect: ${JSON.stringify(newPreviewRect)}`);
+            logger_1.default.debug(`${this.logPrefix}onMove new rect in mixing: ${JSON.stringify(newRectInMixing)}`);
             (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit('onSourceMoved', Object.assign({}, target), newRectInMixing);
         }
         else {
@@ -292,10 +320,10 @@ class TRTCMediaMixingDesigner {
         if (target) {
             // calc new preview rect
             const newPreviewRect = {
-                left: left - this.previewLeft,
-                top: top - this.previewTop,
-                right: left - this.previewLeft + width,
-                bottom: top - this.previewTop + height,
+                left: left - this.absoluteWorkingArea.left - this.previewLeft,
+                top: top - this.absoluteWorkingArea.top - this.previewTop,
+                right: left - this.absoluteWorkingArea.left - this.previewLeft + width,
+                bottom: top - this.absoluteWorkingArea.top - this.previewTop + height,
             };
             // calc new mixing rect
             const newRectInMixing = {
@@ -335,8 +363,8 @@ class TRTCMediaMixingDesigner {
             // calc click point coordinates in mix video image
             logger_1.default.log(`${this.logPrefix}onContainerMousedown mix video image clicked`);
             const containerBounds = this.container.getBoundingClientRect();
-            const xInPreviewImage = event.clientX - containerBounds.x - this.previewLeft;
-            const yInPreviewImage = event.clientY - containerBounds.y - this.previewTop;
+            const xInPreviewImage = event.clientX - containerBounds.left - this.absoluteWorkingArea.left - this.previewLeft;
+            const yInPreviewImage = event.clientY - containerBounds.top - this.absoluteWorkingArea.top - this.previewTop;
             const xInImage = xInPreviewImage / this.previewScale;
             const yInImage = yInPreviewImage / this.previewScale;
             logger_1.default.log(`${this.logPrefix}onContainerMousedown click point coordinates in mix video:`, xInPreviewImage, yInPreviewImage, xInImage, yInImage);

package/liteav/constant.d.ts

@@ -0,0 +1 @@
+export declare const LOCAL_USER_ID = "";

package/liteav/constant.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOCAL_USER_ID = void 0;
+exports.LOCAL_USER_ID = '';

package/liteav/extensions/MediaMixingManager/StreamLayout/BaseStreamLayoutManager.d.ts

@@ -0,0 +1,27 @@
+import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager, TRTCStreamLayoutContext } from "./types";
+declare class BaseStreamLayoutManager implements ITRTCStreamLayoutManager {
+    protected logPrefix: string;
+    protected nativeStreamLayoutManager: INativeStreamLayoutManager;
+    protected layout: TRTCStreamLayout;
+    protected context: TRTCStreamLayoutContext | null;
+    protected container: HTMLElement | null;
+    protected displayArea: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    protected resizeObserver: ResizeObserver | null;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context: TRTCStreamLayoutContext);
+    setLayout(layout: TRTCStreamLayout): void;
+    getLayoutMode(): TRTCStreamLayoutMode;
+    destroy(): void;
+    protected refreshLayout(): void;
+    private onResize;
+    private setResizeObserver;
+    private updateDisplayArea;
+}
+export default BaseStreamLayoutManager;