trtc-electron-sdk 12.2.115-beta.7 → 12.2.115-beta.8

package/liteav/MediaMixingDesigner/index.js

@@ -225,10 +225,10 @@ class TRTCMediaMixingDesigner {
     }
     updateOverlay() {
         if (this.moveAndResizeOverlay) {
-            let left = `${this.absoluteWorkingArea.left + this.previewLeft}px`;
-            let top = `${this.absoluteWorkingArea.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 = {
@@ -237,16 +237,33 @@ class TRTCMediaMixingDesigner {
                     right: this.mediaList[this.selectedMediaIndex].rect.right * this.previewScale,
                     bottom: this.mediaList[this.selectedMediaIndex].rect.bottom * this.previewScale
                 };
-                left = `${this.absoluteWorkingArea.left + this.previewLeft + selectedPreviewRect.left}px`;
-                top = `${this.absoluteWorkingArea.top + this.previewTop + selectedPreviewRect.top}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;
             }
-            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}`);
+            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';
+            }
+            logger_1.default.debug(`${this.logPrefix}updateOverlay: ${left} ${top} ${width} ${height} ${renderScale}`);
         }
     }
     onMove(left, top) {

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;

package/liteav/extensions/MediaMixingManager/StreamLayout/BaseStreamLayoutManager.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("../types");
+const utils_1 = require("../../../utils");
+const logger_1 = __importDefault(require("../../../logger"));
+class BaseStreamLayoutManager {
+    constructor(nativeStreamLayoutManager, context) {
+        this.logPrefix = "[BaseStreamLayoutManager]";
+        this.container = null;
+        this.displayArea = {
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: 0,
+            height: 0,
+        };
+        this.resizeObserver = null;
+        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
+        this.layout = {
+            layoutMode: types_1.TRTCStreamLayoutMode.None,
+        };
+        this.context = context;
+        this.container = context.container;
+        this.onResize = (0, utils_1.debounce)(this.onResize.bind(this), 100);
+        if (this.container) {
+            this.setResizeObserver();
+            this.updateDisplayArea();
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}constructor failed, no context.container.`);
+        }
+    }
+    setLayout(layout) {
+        this.layout = layout;
+        this.refreshLayout();
+    }
+    getLayoutMode() {
+        return this.layout.layoutMode;
+    }
+    destroy() {
+        this.layout = {
+            layoutMode: types_1.TRTCStreamLayoutMode.None,
+        };
+        this.container = null;
+        this.context = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    refreshLayout() {
+        logger_1.default.warn(`${this.logPrefix}refreshLayout should be implemented by sub-class.`);
+    }
+    onResize(entries) {
+        logger_1.default.log(`${this.logPrefix}onResize entries:`, entries);
+        for (const entry of entries) {
+            if (entry.target === this.container) {
+                logger_1.default.debug(`${this.logPrefix}onResize:`, this.container.getBoundingClientRect());
+                this.updateDisplayArea();
+                this.refreshLayout();
+                break;
+            }
+        }
+    }
+    setResizeObserver() {
+        logger_1.default.debug(`${this.logPrefix}setResizeObserver container:`, this.container, ' resizeObserver:', this.resizeObserver);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.container) {
+            this.resizeObserver = new ResizeObserver(this.onResize);
+            this.resizeObserver.observe(this.container);
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}setResizeObserver failed, container is null.`);
+        }
+    }
+    updateDisplayArea() {
+        if (this.container) {
+            const containerRect = this.container.getBoundingClientRect();
+            this.displayArea = {
+                left: containerRect.left,
+                top: containerRect.top,
+                right: containerRect.right,
+                bottom: containerRect.bottom,
+                width: containerRect.width,
+                height: containerRect.height,
+            };
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}updateDisplayArea failed, no container.`);
+        }
+    }
+}
+exports.default = BaseStreamLayoutManager;

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

@@ -1,15 +1,11 @@
-import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
-import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
-declare class CustomStreamLayoutManager implements ITRTCStreamLayoutManager {
-    private logPrefix;
-    private layoutMode;
-    private nativeStreamLayoutManager;
-    private layout;
-    private context;
-    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
+import BaseStreamLayoutManager from "./BaseStreamLayoutManager";
+import { TRTCStreamLayout } from "../types";
+import { INativeStreamLayoutManager, TRTCStreamLayoutContext } from "./types";
+declare class CustomStreamLayoutManager extends BaseStreamLayoutManager {
+    protected logPrefix: string;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context: TRTCStreamLayoutContext);
     setLayout(layout: TRTCStreamLayout): void;
-    getLayoutMode(): TRTCStreamLayoutMode;
-    setContext(context: Record<string, any>): void;
-    destroy(): void;
+    protected refreshLayout(): void;
+    private convertRelativeToAbsolute;
 }
 export default CustomStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/CustomStreamLayoutManager.js

@@ -3,34 +3,117 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const BaseStreamLayoutManager_1 = __importDefault(require("./BaseStreamLayoutManager"));
 const types_1 = require("../types");
+const trtc_define_1 = require("../../../trtc_define");
 const logger_1 = __importDefault(require("../../../logger"));
-class CustomStreamLayoutManager {
+const constant_1 = require("../../../constant");
+class CustomStreamLayoutManager extends BaseStreamLayoutManager_1.default {
     constructor(nativeStreamLayoutManager, context) {
+        super(nativeStreamLayoutManager, context);
         this.logPrefix = "[TRTCCustomStreamLayoutManager]";
-        this.layoutMode = types_1.TRTCStreamLayoutMode.Custom;
-        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
-        this.layout = null;
-        this.context = context;
+        this.layout = {
+            layoutMode: types_1.TRTCStreamLayoutMode.Custom,
+        };
     }
     setLayout(layout) {
-        this.layout = layout;
-        if (layout.userList) {
-            this.nativeStreamLayoutManager.setStreamLayout(layout.userList);
+        this.layout = Object.assign(Object.assign({}, layout), { layoutMode: types_1.TRTCStreamLayoutMode.Custom });
+        this.refreshLayout();
+    }
+    refreshLayout() {
+        var _a;
+        if (this.layout.userList) {
+            this.nativeStreamLayoutManager.setStreamLayout(this.layout.userList);
+        }
+        else if (this.layout.size && this.layout.streams) {
+            const userList = this.convertRelativeToAbsolute(this.layout);
+            if (userList) {
+                logger_1.default.debug(`${this.logPrefix}refreshLayout userList:`, userList);
+                const localUser = userList.filter(user => user.userId === constant_1.LOCAL_USER_ID)[0];
+                if ((localUser === null || localUser === void 0 ? void 0 : localUser.rect) && ((_a = this.context) === null || _a === void 0 ? void 0 : _a.mediaMixingDesigner)) {
+                    const workingArea = localUser.rect;
+                    this.context.mediaMixingDesigner.setWorkingArea({
+                        left: workingArea.left / this.displayArea.width,
+                        top: workingArea.top / this.displayArea.height,
+                        right: workingArea.right / this.displayArea.width,
+                        bottom: workingArea.bottom / this.displayArea.height,
+                    }, localUser.fillMode);
+                }
+                userList.forEach(user => {
+                    if (user.rect) {
+                        user.rect = {
+                            left: user.rect.left * window.devicePixelRatio,
+                            right: user.rect.right * window.devicePixelRatio,
+                            top: user.rect.top * window.devicePixelRatio,
+                            bottom: user.rect.bottom * window.devicePixelRatio,
+                        };
+                    }
+                });
+                logger_1.default.debug(`${this.logPrefix}refreshLayout transfer layout to pixel unit::`, userList);
+                this.nativeStreamLayoutManager.setStreamLayout(userList);
+            }
+            else {
+                logger_1.default.error(`${this.logPrefix}refreshLayout invalid parameter, no 'streams' or 'size'`, JSON.stringify(this.layout));
+            }
         }
         else {
-            logger_1.default.error(`${this.logPrefix}setLayout invalid parameter, no 'userList'`);
+            logger_1.default.error(`${this.logPrefix}refreshLayout invalid parameter:`, JSON.stringify(this.layout));
         }
     }
-    getLayoutMode() {
-        return this.layoutMode;
-    }
-    setContext(context) {
-        this.context = context;
-    }
-    destroy() {
-        this.layout = null;
-        this.context = null;
+    convertRelativeToAbsolute(serverMixingLayout) {
+        if (!serverMixingLayout.streams || !serverMixingLayout.size) {
+            return null;
+        }
+        // 1. calculate valid video content width and height
+        let minX = 1;
+        let minY = 1;
+        let maxX = 0;
+        let maxY = 0;
+        for (let i = 0; i < serverMixingLayout.streams.length; i++) {
+            const stream = serverMixingLayout.streams[i];
+            minX = Math.min(minX, stream.x);
+            minY = Math.min(minY, stream.y);
+            maxX = Math.max(maxX, stream.x + stream.w);
+            maxY = Math.max(maxY, stream.y + stream.h);
+        }
+        const xLength = maxX - minX;
+        const yLength = maxY - minY;
+        const contentWidth = xLength * serverMixingLayout.size.width;
+        const contentHeight = yLength * serverMixingLayout.size.height;
+        // 2. calculate fitting scale rate and fitting area
+        const scaleRate = Math.min(this.displayArea.width / contentWidth, this.displayArea.height / contentHeight);
+        const fittingArea = {
+            width: contentWidth * scaleRate,
+            height: contentHeight * scaleRate,
+            left: (this.displayArea.width - contentWidth * scaleRate) / 2,
+            top: (this.displayArea.height - contentHeight * scaleRate) / 2,
+            right: (this.displayArea.width + contentWidth * scaleRate) / 2,
+            bottom: (this.displayArea.height + contentHeight * scaleRate) / 2,
+        };
+        // 3. transfer relative coordinates to absolute coordinates
+        return serverMixingLayout.streams.map((stream, index, list) => {
+            // 3.1 cut left and top black area
+            // 3.2 transfer relative video ratio to valid video content ratio
+            // 3.3 fit valid video content to dispaying area, that is fitting area
+            const result = {
+                x: (stream.x - minX) / xLength * contentWidth * scaleRate + fittingArea.left,
+                y: (stream.y - minY) / yLength * contentHeight * scaleRate + fittingArea.top,
+                w: (stream.w) / xLength * contentWidth * scaleRate,
+                h: (stream.h) / yLength * contentHeight * scaleRate,
+            };
+            // 3.4 convert to TRTCStreamLayout.userList item
+            return {
+                userId: stream.userId,
+                fillMode: list.length >= 2 ? trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fill : trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit,
+                zOrder: index,
+                rect: {
+                    left: Math.round(result.x),
+                    top: Math.round(result.y),
+                    right: Math.round(result.x + result.w),
+                    bottom: Math.round(result.y + result.h),
+                }
+            };
+        });
     }
 }
 exports.default = CustomStreamLayoutManager;

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

@@ -1,16 +1,11 @@
-import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
-import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
-declare class NoneStreamLayoutManager implements ITRTCStreamLayoutManager {
-    private logPrefix;
-    private layoutMode;
-    private nativeStreamLayoutManager;
-    private layout;
-    private context;
-    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
+import BaseStreamLayoutManager from "./BaseStreamLayoutManager";
+import { TRTCStreamLayout } from "../types";
+import { INativeStreamLayoutManager, TRTCStreamLayoutContext } from "./types";
+declare class NoneStreamLayoutManager extends BaseStreamLayoutManager {
+    protected logPrefix: string;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context: TRTCStreamLayoutContext);
     setLayout(layout: TRTCStreamLayout): void;
-    getLayoutMode(): TRTCStreamLayoutMode;
-    setContext(context: Record<string, any>): void;
-    destroy(): void;
+    protected refreshLayout(): void;
     private centerLiveOwner;
 }
 export default NoneStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/NoneStreamLayoutManager.js

@@ -3,20 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const BaseStreamLayoutManager_1 = __importDefault(require("./BaseStreamLayoutManager"));
 const types_1 = require("../types");
 const trtc_define_1 = require("../../../trtc_define");
 const logger_1 = __importDefault(require("../../../logger"));
-class NoneStreamLayoutManager {
+class NoneStreamLayoutManager extends BaseStreamLayoutManager_1.default {
     constructor(nativeStreamLayoutManager, context) {
+        super(nativeStreamLayoutManager, context);
         this.logPrefix = "[TRTCNoneStreamLayoutManager]";
-        this.layoutMode = types_1.TRTCStreamLayoutMode.None;
-        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
-        this.layout = null;
-        this.context = context;
     }
     setLayout(layout) {
+        this.layout = Object.assign(Object.assign({}, layout), { layoutMode: types_1.TRTCStreamLayoutMode.None, userList: [] });
+        this.refreshLayout();
+    }
+    refreshLayout() {
         var _a;
-        this.layout = layout || { layoutMode: types_1.TRTCStreamLayoutMode.None, userList: [] };
         if (this.context && this.layout.userList) {
             this.centerLiveOwner();
             (_a = this.nativeStreamLayoutManager) === null || _a === void 0 ? void 0 : _a.setStreamLayout(this.layout.userList);
@@ -25,20 +26,10 @@ class NoneStreamLayoutManager {
             logger_1.default.error(`${this.logPrefix}setLayout context is null or no user`);
         }
     }
-    getLayoutMode() {
-        return this.layoutMode;
-    }
-    setContext(context) {
-        this.context = context;
-    }
-    destroy() {
-        this.layout = null;
-        this.context = null;
-    }
     centerLiveOwner() {
         if (this.context && this.layout) {
-            const layoutPixelWidth = this.context.layoutPixelRect.width;
-            const layoutPixelHeight = this.context.layoutPixelRect.height;
+            const layoutPixelWidth = this.displayArea.width * window.devicePixelRatio;
+            const layoutPixelHeight = this.displayArea.height * window.devicePixelRatio;
             const mixingVideoWidth = this.context.mixingVideoSize.width;
             const mixingVideoHeight = this.context.mixingVideoSize.height;
             // Live Owner(local user)

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

@@ -1,7 +1,7 @@
 import { TRTCStreamLayoutMode } from '../types';
-import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from './types';
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager, TRTCStreamLayoutContext } from './types';
 export * from './types';
-declare function create(layoutMode: TRTCStreamLayoutMode, nativeStreamLayoutManager: INativeStreamLayoutManager): ITRTCStreamLayoutManager;
+declare function create(layoutMode: TRTCStreamLayoutMode, nativeStreamLayoutManager: INativeStreamLayoutManager, context: TRTCStreamLayoutContext): ITRTCStreamLayoutManager;
 export declare const StreamLayoutFactory: {
     create: typeof create;
 };

package/liteav/extensions/MediaMixingManager/StreamLayout/index.js

@@ -14,26 +14,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StreamLayoutFactory = void 0;
-const FloatStreamLayoutManager_1 = __importDefault(require("./FloatStreamLayoutManager"));
-const GridStreamLayoutManager_1 = __importDefault(require("./GridStreamLayoutManager"));
 const CustomStreamLayoutManager_1 = __importDefault(require("./CustomStreamLayoutManager"));
 const NoneStreamLayoutManager_1 = __importDefault(require("./NoneStreamLayoutManager"));
 const types_1 = require("../types");
 __exportStar(require("./types"), exports);
-function create(layoutMode, nativeStreamLayoutManager) {
+function create(layoutMode, nativeStreamLayoutManager, context) {
     let layoutManager;
     if (layoutMode === types_1.TRTCStreamLayoutMode.Custom) {
-        layoutManager = new CustomStreamLayoutManager_1.default(nativeStreamLayoutManager);
-    }
-    else if (layoutMode === types_1.TRTCStreamLayoutMode.Float) {
-        layoutManager = new FloatStreamLayoutManager_1.default(nativeStreamLayoutManager);
-    }
-    else if (layoutMode === types_1.TRTCStreamLayoutMode.Grid) {
-        layoutManager = new GridStreamLayoutManager_1.default(nativeStreamLayoutManager);
+        layoutManager = new CustomStreamLayoutManager_1.default(nativeStreamLayoutManager, context);
     }
     else {
         // layoutMode === TRTCStreamLayoutMode.None
-        layoutManager = new NoneStreamLayoutManager_1.default(nativeStreamLayoutManager);
+        layoutManager = new NoneStreamLayoutManager_1.default(nativeStreamLayoutManager, context);
     }
     return layoutManager;
 }

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

@@ -1,13 +1,21 @@
-import { TRTCStreamInfo, TRTCStreamLayout, TRTCStreamLayoutMode } from '../types';
+import { TRTCUserStream, TRTCStreamLayout, TRTCStreamLayoutMode } from '../types';
+import TRTCMediaMixingDesigner from '../../../MediaMixingDesigner';
 export interface INativeStreamLayoutManager {
-    setStreamLayout: (streamList: Array<TRTCStreamInfo>) => void;
+    setStreamLayout: (streamList: Array<TRTCUserStream>) => void;
+}
+export interface TRTCStreamLayoutContext {
+    container: HTMLElement | null;
+    mixingVideoSize: {
+        width: number;
+        height: number;
+    };
+    mediaMixingDesigner: TRTCMediaMixingDesigner | null;
 }
 export interface ITRTCStreamLayoutManager {
     setLayout(layout: TRTCStreamLayout): void;
     getLayoutMode(): TRTCStreamLayoutMode;
     destroy(): void;
-    setContext(context: Record<string, any>): void;
 }
 export interface ITRTCStreamLayoutEvent {
-    onStreamLayoutChanged(streams: Array<TRTCStreamInfo>): void;
+    onStreamLayoutChanged(streams: Array<TRTCUserStream>): void;
 }

package/liteav/extensions/MediaMixingManager/index.d.ts

@@ -1,7 +1,7 @@
 import { TRTCCameraCaptureParams, Rect, TRTCScreenCaptureProperty } from '../../trtc_define';
 import { TRTCMediaSource, TRTCMediaMixingEncParam, ITRTCMediaMixingManager, TRTCPhoneMirrorParam, TRTCStreamLayout } from './types';
 import { TRTCDeviceManager } from '../DeviceManager';
-export { TRTCMediaMixingErrorCode, TRTCMediaSourceType, TRTCMediaSource, TRTCMediaMixingEncParam, TRTCPhoneMirrorParam, TRTCStreamLayoutMode, TRTCStreamInfo, TRTCStreamLayout } from './types';
+export { TRTCMediaMixingErrorCode, TRTCMediaSourceType, TRTCMediaSource, TRTCMediaMixingEncParam, TRTCPhoneMirrorParam, TRTCStreamLayoutMode, TRTCUserStream, TRTCStreamInfo, TRTCStreamLayout } from './types';
 declare const NodeTRTCEngine: any;
 /**
  * @namespace TRTCMediaMixingEvent

package/liteav/extensions/MediaMixingManager/index.js

@@ -16,6 +16,7 @@ exports.TRTCMediaMixingManager = exports.TRTCMediaMixingEvent = exports.TRTCStre
 const events_1 = require("events");
 const trtc_define_1 = require("../../trtc_define");
 const utils_1 = require("../../utils");
+const constant_1 = require("../../constant");
 const logger_1 = __importDefault(require("../../logger"));
 const index_1 = __importDefault(require("../../MediaMixingDesigner/index"));
 const StreamLayout_1 = require("./StreamLayout");
@@ -146,7 +147,6 @@ const initResolutionMap = () => {
     return map;
 };
 const resolutionMap = initResolutionMap();
-const LOCAL_USER_ID = '';
 /**
  * @namespace TRTCMediaMixingEvent
  * @description 目前只支持 `Windows` 操作系统
@@ -653,32 +653,26 @@ class TRTCMediaMixingManager {
     setStreamLayout(layout) {
         var _a, _b;
         logger_1.default.log(`${this.logPrefix}setStreamLayout:`, layout);
+        const context = {
+            container: this.view,
+            mixingVideoSize: {
+                width: this.mixingVideoWidth,
+                height: this.mixingVideoHeight
+            },
+            mediaMixingDesigner: this.mediaMixingDesigner
+        };
         if (!this.streamLayoutManager) {
-            this.streamLayoutManager = StreamLayout_1.StreamLayoutFactory.create(layout.layoutMode, this.nodeMediaMixingPlugin);
+            this.streamLayoutManager = StreamLayout_1.StreamLayoutFactory.create(layout.layoutMode, this.nodeMediaMixingPlugin, context);
         }
         else if (this.streamLayoutManager.getLayoutMode() !== layout.layoutMode) {
             this.streamLayoutManager.destroy();
-            this.streamLayoutManager = StreamLayout_1.StreamLayoutFactory.create(layout.layoutMode, this.nodeMediaMixingPlugin);
+            this.streamLayoutManager = StreamLayout_1.StreamLayoutFactory.create(layout.layoutMode, this.nodeMediaMixingPlugin, context);
         }
         let transferredUserList = layout.userList;
         if (this.view) {
             const viewRect = this.view.getBoundingClientRect();
-            this.streamLayoutManager.setContext({
-                mixingVideoSize: {
-                    width: this.mixingVideoWidth,
-                    height: this.mixingVideoHeight
-                },
-                layoutPixelRect: {
-                    left: viewRect.left * window.devicePixelRatio,
-                    right: viewRect.right * window.devicePixelRatio,
-                    top: viewRect.top * window.devicePixelRatio,
-                    bottom: viewRect.bottom * window.devicePixelRatio,
-                    width: viewRect.width * window.devicePixelRatio,
-                    height: viewRect.height * window.devicePixelRatio
-                }
-            });
             if ((_a = layout.userList) === null || _a === void 0 ? void 0 : _a.length) {
-                const localUser = layout.userList.filter(user => user.userId === LOCAL_USER_ID)[0];
+                const localUser = layout.userList.filter(user => user.userId === constant_1.LOCAL_USER_ID)[0];
                 if (localUser === null || localUser === void 0 ? void 0 : localUser.rect) {
                     const workingArea = localUser.rect;
                     (_b = this.mediaMixingDesigner) === null || _b === void 0 ? void 0 : _b.setWorkingArea({
@@ -731,7 +725,7 @@ class TRTCMediaMixingManager {
             else {
                 const { resourcesPath, execPath } = globalThis.process;
                 if (execPath.endsWith('electron.exe')) {
-                    serverPath = '..\\..\\..\\..\\node_modules\\trtc-electron-sdk\\build\\Release\\liteav_media_server.exe';
+                    serverPath = 'node_modules\\trtc-electron-sdk\\build\\Release\\liteav_media_server.exe';
                 }
                 else {
                     serverPath = `${resourcesPath}\\liteav_media_server.exe`;

package/liteav/extensions/MediaMixingManager/types.d.ts

@@ -41,20 +41,32 @@ export declare type TRTCMediaMixingEncParam = {
     selectedBorderColor?: number | 0xFFFF00;
 };
 export declare enum TRTCStreamLayoutMode {
-    Float = "Float",
-    Grid = "Grid",
     Custom = "Custom",
     None = "None"
 }
-export declare type TRTCStreamInfo = {
+export declare type TRTCUserStream = {
     userId: string;
     fillMode?: TRTCVideoFillMode;
     rect?: Rect;
     zOrder?: number;
 };
+export declare type TRTCStreamInfo = {
+    userId: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    zOrder?: number;
+    fillMode?: TRTCVideoFillMode;
+};
 export declare type TRTCStreamLayout = {
     layoutMode: TRTCStreamLayoutMode;
-    userList?: Array<TRTCStreamInfo>;
+    userList?: Array<TRTCUserStream>;
+    size?: {
+        width: number;
+        height: number;
+    };
+    streams?: Array<TRTCStreamInfo>;
 };
 export interface ITRTCMediaMixingManager {
     addMediaSource(mediaSource: TRTCMediaSource): Promise<Rect>;

package/liteav/extensions/MediaMixingManager/types.js

@@ -21,8 +21,6 @@ var TRTCMediaSourceType;
 })(TRTCMediaSourceType = exports.TRTCMediaSourceType || (exports.TRTCMediaSourceType = {}));
 var TRTCStreamLayoutMode;
 (function (TRTCStreamLayoutMode) {
-    TRTCStreamLayoutMode["Float"] = "Float";
-    TRTCStreamLayoutMode["Grid"] = "Grid";
     TRTCStreamLayoutMode["Custom"] = "Custom";
     TRTCStreamLayoutMode["None"] = "None";
 })(TRTCStreamLayoutMode = exports.TRTCStreamLayoutMode || (exports.TRTCStreamLayoutMode = {}));

package/liteav/utils.d.ts

@@ -8,3 +8,30 @@ export declare function isNullOrUndefined(val: unknown): boolean;
  */
 export declare function safelyParse(data: string): unknown | Array<any> | Record<string, any>;
 export declare function convertUint8ArrayToNumber(value: Uint8Array): number;
+/**
+ * 防抖函数 (debounce)
+ *
+ * 适用场景：搜索框输入联想、窗口resize结束事件
+ *
+ * @param func 需要防抖的函数
+ * @param wait 等待时间（毫秒）
+ * @param immediate 是否立即执行第一次调用（true=立即执行，false=等待后执行）
+ * @returns 包装后的防抖函数
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number, immediate?: boolean): (...args: Parameters<T>) => void;
+/**
+ * 节流函数 (throttle)
+ *
+ * 适用场景：滚动事件、按钮防重复点击、鼠标移动事件
+ *
+ * @param func 需要节流的函数
+ * @param wait 等待时间（毫秒）
+ * @param options 配置选项
+ *        leading: 是否执行第一次调用（true=执行，false=跳过）
+ *        trailing: 是否执行最后一次调用（true=执行，false=跳过）
+ * @returns 包装后的节流函数
+ */
+export declare function throttle<T extends (...args: any[]) => any>(func: T, wait: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): (...args: Parameters<T>) => void;

package/liteav/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertUint8ArrayToNumber = exports.safelyParse = exports.isNullOrUndefined = exports.isUndefined = exports.isNull = void 0;
+exports.throttle = exports.debounce = exports.convertUint8ArrayToNumber = exports.safelyParse = exports.isNullOrUndefined = exports.isUndefined = exports.isNull = void 0;
 function isNull(val) {
     return val === null;
 }
@@ -47,3 +47,87 @@ function convertUint8ArrayToNumber(value) {
     return result;
 }
 exports.convertUint8ArrayToNumber = convertUint8ArrayToNumber;
+/**
+ * 防抖函数 (debounce)
+ *
+ * 适用场景：搜索框输入联想、窗口resize结束事件
+ *
+ * @param func 需要防抖的函数
+ * @param wait 等待时间（毫秒）
+ * @param immediate 是否立即执行第一次调用（true=立即执行，false=等待后执行）
+ * @returns 包装后的防抖函数
+ */
+function debounce(func, wait, immediate = false) {
+    let timeout = null;
+    let inWait = false; // 是否处于等待周期
+    return function (...args) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const context = this;
+        // 每次调用都清除现有定时器
+        if (timeout)
+            clearTimeout(timeout);
+        if (immediate && !inWait) {
+            // 立即执行模式且不在等待期
+            func.apply(context, args);
+            inWait = true;
+        }
+        // 设置新定时器
+        timeout = setTimeout(() => {
+            inWait = false;
+            if (!immediate) {
+                // 非立即执行模式：执行最后一次调用
+                func.apply(context, args);
+            }
+        }, wait);
+    };
+}
+exports.debounce = debounce;
+/**
+ * 节流函数 (throttle)
+ *
+ * 适用场景：滚动事件、按钮防重复点击、鼠标移动事件
+ *
+ * @param func 需要节流的函数
+ * @param wait 等待时间（毫秒）
+ * @param options 配置选项
+ *        leading: 是否执行第一次调用（true=执行，false=跳过）
+ *        trailing: 是否执行最后一次调用（true=执行，false=跳过）
+ * @returns 包装后的节流函数
+ */
+function throttle(func, wait, options = {}) {
+    const { leading = true, trailing = true } = options;
+    let lastExecTime = 0;
+    let timer = null;
+    let savedContext = null, savedArgs = null;
+    // 实际执行函数
+    const execute = () => {
+        lastExecTime = Date.now();
+        timer = null;
+        if (savedContext !== null && savedArgs !== null) {
+            func.apply(savedContext, savedArgs);
+        }
+    };
+    return function (...args) {
+        savedContext = this;
+        savedArgs = args;
+        const now = Date.now();
+        // 计算距离上次执行的时间差
+        const sinceLast = now - lastExecTime;
+        const remaining = wait - sinceLast;
+        // 超时情况：立即执行（无论是否在等待期）
+        if (remaining <= 0 || remaining > wait) {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            if (leading) {
+                execute();
+            }
+        }
+        else if (!timer && trailing) {
+            // 设置定时器执行尾部调用
+            timer = setTimeout(execute, remaining);
+        }
+    };
+}
+exports.throttle = throttle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trtc-electron-sdk",
-  "version": "12.2.115-beta.7",
+  "version": "12.2.115-beta.8",
   "description": "trtc electron sdk",
   "main": "./liteav/index.js",
   "types": "./liteav/index.d.ts",

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

@@ -1,15 +0,0 @@
-import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
-import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
-declare class FloatStreamLayoutManager implements ITRTCStreamLayoutManager {
-    private logPrefix;
-    private layoutMode;
-    private nativeStreamLayoutManager;
-    private layout;
-    private context;
-    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
-    setLayout(layout: TRTCStreamLayout): void;
-    getLayoutMode(): TRTCStreamLayoutMode;
-    setContext(context: Record<string, any>): void;
-    destroy(): void;
-}
-export default FloatStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/FloatStreamLayoutManager.js

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const types_1 = require("../types");
-const logger_1 = __importDefault(require("../../../logger"));
-class FloatStreamLayoutManager {
-    constructor(nativeStreamLayoutManager, context) {
-        this.logPrefix = "[TRTCFloatStreamLayoutManager]";
-        this.layoutMode = types_1.TRTCStreamLayoutMode.Float;
-        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
-        this.layout = null;
-        this.context = context;
-    }
-    setLayout(layout) {
-        this.layout = layout;
-        if (layout.userList) {
-            this.nativeStreamLayoutManager.setStreamLayout(layout.userList);
-        }
-        else {
-            logger_1.default.error(`${this.logPrefix}setLayout invalid parameter, no 'userList'`);
-        }
-    }
-    getLayoutMode() {
-        return this.layoutMode;
-    }
-    setContext(context) {
-        this.context = context;
-    }
-    destroy() {
-        this.layout = null;
-        this.context = null;
-    }
-}
-exports.default = FloatStreamLayoutManager;

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

@@ -1,15 +0,0 @@
-import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
-import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
-declare class GridStreamLayoutManager implements ITRTCStreamLayoutManager {
-    private logPrefix;
-    private layoutMode;
-    private nativeStreamLayoutManager;
-    private layout;
-    private context;
-    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
-    setLayout(layout: TRTCStreamLayout): void;
-    getLayoutMode(): TRTCStreamLayoutMode;
-    setContext(context: Record<string, any>): void;
-    destroy(): void;
-}
-export default GridStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/GridStreamLayoutManager.js

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const types_1 = require("../types");
-const logger_1 = __importDefault(require("../../../logger"));
-class GridStreamLayoutManager {
-    constructor(nativeStreamLayoutManager, context) {
-        this.logPrefix = "[TRTCGridStreamLayoutManager]";
-        this.layoutMode = types_1.TRTCStreamLayoutMode.Grid;
-        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
-        this.layout = null;
-        this.context = context;
-    }
-    setLayout(layout) {
-        this.layout = layout;
-        if (layout.userList) {
-            this.nativeStreamLayoutManager.setStreamLayout(layout.userList);
-        }
-        else {
-            logger_1.default.error(`${this.logPrefix}setLayout invalid parameter, no 'userList'`);
-        }
-    }
-    getLayoutMode() {
-        return this.layoutMode;
-    }
-    setContext(context) {
-        this.context = context;
-    }
-    destroy() {
-        this.layout = null;
-        this.context = null;
-    }
-}
-exports.default = GridStreamLayoutManager;