trtc-electron-sdk 12.2.115-alpha.20 → 12.2.115-alpha.23

package/liteav/MediaMixingDesigner/index.d.ts

@@ -3,7 +3,7 @@ export declare type TRTCMediaInfo = {
     id: string;
     rect: Rect;
     isSelected: boolean;
-    zOrder?: number;
+    zOrder: number;
     origin: any;
 };
 declare class TRTCMediaMixingDesigner {
@@ -48,6 +48,7 @@ declare class TRTCMediaMixingDesigner {
     addMedia(media: TRTCMediaInfo): void;
     removeMedia(media: TRTCMediaInfo): void;
     updateMedia(media: TRTCMediaInfo): void;
+    removeAllMedia(): void;
     on(event: string, func: (...args: any[]) => void): void;
     off(event: string, func: (...args: any[]) => void): void;
     destroy(): void;

package/liteav/MediaMixingDesigner/index.js

@@ -73,9 +73,23 @@ class TRTCMediaMixingDesigner {
         }
     }
     addMedia(media) {
-        this.mediaList.unshift(media);
+        // sort by zOrder desc
+        const length = this.mediaList.length;
+        let insertIndex = -1;
+        for (let i = 0; i < length; i++) {
+            if (media.zOrder >= this.mediaList[i].zOrder) {
+                insertIndex = i;
+                break;
+            }
+        }
+        if (insertIndex >= 0) {
+            this.mediaList.splice(insertIndex, 0, media);
+        }
+        else {
+            this.mediaList.push(media);
+        }
         if (media.isSelected) {
-            this.selectedMediaIndex = 0;
+            this.selectedMediaIndex = insertIndex >= 0 ? insertIndex : (this.mediaList.length - 1);
             this.updateOverlay();
         }
     }
@@ -90,15 +104,24 @@ class TRTCMediaMixingDesigner {
         }
     }
     updateMedia(media) {
-        const targetIndex = this.mediaList.findIndex(item => item.id === media.id);
+        let targetIndex = this.mediaList.findIndex(item => item.id === media.id);
         if (targetIndex !== -1) {
+            const isZOrderChanged = media.zOrder !== this.mediaList[targetIndex].zOrder;
             this.mediaList[targetIndex] = Object.assign({}, this.mediaList[targetIndex], media);
+            if (isZOrderChanged) {
+                this.mediaList.sort((a, b) => b.zOrder - a.zOrder);
+                targetIndex = this.mediaList.findIndex(item => item.id === media.id);
+            }
             if (media.isSelected) {
                 this.selectedMediaIndex = targetIndex;
                 this.updateOverlay();
             }
         }
     }
+    removeAllMedia() {
+        this.mediaList = [];
+        this.selectedMediaIndex = -1;
+    }
     on(event, func) {
         var _a;
         (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.on(event, func);

package/liteav/base/DevicePixelRatioObserver.d.ts

@@ -0,0 +1,12 @@
+declare class DevicePixelRatioObserver {
+    private mediaQueryString;
+    private mediaQuery;
+    private eventEmitter;
+    constructor();
+    destroy(): void;
+    on(event: string, func: (...args: any[]) => void): void;
+    off(event: string, func: (...args: any[]) => void): void;
+    private onPixelRatioChanged;
+}
+declare const devicePixelRationObserver: DevicePixelRatioObserver;
+export default devicePixelRationObserver;

package/liteav/base/DevicePixelRatioObserver.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const events_1 = require("events");
+class DevicePixelRatioObserver {
+    constructor() {
+        this.mediaQueryString = `(resolution: ${window.devicePixelRatio}dppx)`;
+        this.mediaQuery = window.matchMedia(this.mediaQueryString);
+        this.eventEmitter = new events_1.EventEmitter();
+        this.onPixelRatioChanged = this.onPixelRatioChanged.bind(this);
+        this.mediaQuery.addEventListener('change', this.onPixelRatioChanged);
+    }
+    destroy() {
+        var _a;
+        (_a = this.mediaQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onPixelRatioChanged);
+        this.mediaQuery = null;
+        this.eventEmitter = null;
+    }
+    on(event, func) {
+        var _a;
+        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.on(event, func);
+    }
+    off(event, func) {
+        var _a;
+        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.off(event, func);
+    }
+    onPixelRatioChanged() {
+        var _a;
+        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit('change');
+    }
+}
+const devicePixelRationObserver = new DevicePixelRatioObserver();
+exports.default = devicePixelRationObserver;

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

@@ -373,6 +373,7 @@ export declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
      * @returns {Promise<void>}
      */
     stopMediaMixingServer(): Promise<void>;
+    callExperimentalAPI(jsonStr: string): void;
     /**
      * 注册事件监听
      *
@@ -393,7 +394,7 @@ export declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
     private setDisplayRect;
     private createDesigner;
     private destroyDesigner;
-    private createorUpdateLayoutManager;
+    private createOrUpdateLayoutManager;
     private destroyLayoutManager;
     private updateMixingVideoSize;
     private listenDesignerEvent;
@@ -409,13 +410,15 @@ export declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
     private findSelectedMediaSource;
     private unselectMediaSource;
     private handleCppCallbackEvent;
-    private onMediaSourceAddedOrRemoved;
+    private onMediaSourceAdded;
+    private onMediaSourceRemoved;
     private onMediaSourceSizeChanged;
     private onPhoneMirrorSourceChanged;
     private onMediaServerState;
     private onMediaMixingServerLost;
     private onCallExperimentalAPIFinish;
     private recoverMediaMixingServer;
+    private onDevicePixelRatioChange;
     startCameraDeviceTest(windowID: number | Uint8Array, rect?: Rect): Promise<number>;
     stopCameraDeviceTest(): Promise<number>;
     setCameraTestRenderMirror(mirror: boolean): void;

package/liteav/extensions/MediaMixingManager/MediaMixingManager.js

@@ -15,11 +15,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRTCMediaMixingManager = exports.TRTCMediaMixingEvent = void 0;
 const events_1 = require("events");
 const trtc_define_1 = require("../../trtc_define");
+const types_1 = require("./types");
 const utils_1 = require("../../utils");
 const constant_1 = require("../../constant");
 const index_1 = __importDefault(require("../../MediaMixingDesigner/index"));
 const StreamLayout_1 = require("./StreamLayout");
 const PromiseStore_1 = __importDefault(require("../../base/PromiseStore"));
+const DevicePixelRatioObserver_1 = __importDefault(require("../../base/DevicePixelRatioObserver"));
 const logger_1 = __importDefault(require("../../logger"));
 const NodeTRTCEngine = require('../../../build/Release/trtc_electron_sdk.node');
 /**
@@ -307,9 +309,12 @@ class TRTCMediaMixingManager {
         this.onPreviewAreaResize = this.onPreviewAreaResize.bind(this);
         this.onVisibilityChange = this.onVisibilityChange.bind(this);
         document.addEventListener('visibilitychange', this.onVisibilityChange);
+        this.onDevicePixelRatioChange = this.onDevicePixelRatioChange.bind(this);
+        DevicePixelRatioObserver_1.default.on('change', this.onDevicePixelRatioChange);
     }
     destroy() {
         return __awaiter(this, void 0, void 0, function* () {
+            DevicePixelRatioObserver_1.default.off('change', this.onDevicePixelRatioChange);
             document.removeEventListener('visibilitychange', this.onVisibilityChange);
             if (this.resizeObserver && this.view) {
                 this.resizeObserver.unobserve(this.view);
@@ -480,7 +485,10 @@ class TRTCMediaMixingManager {
         logger_1.default.log(`${this.logPrefix}addMediaSource:`, mediaSource);
         const index = this.findMediaSourceIndex(mediaSource);
         if (index !== -1) {
-            throw new Error("Media source already existed");
+            return Promise.reject({
+                code: types_1.TRTCMediaMixingErrorCode.InvalidParams,
+                message: "Media source already existed"
+            });
         }
         const newMediaSource = (0, utils_1.safelyParse)(JSON.stringify(mediaSource));
         if (newMediaSource.isSelected) {
@@ -498,6 +506,7 @@ class TRTCMediaMixingManager {
                 id: `${newMediaSource.sourceType}__${newMediaSource.sourceId}`,
                 rect: newMediaSource.rect,
                 isSelected: newMediaSource.isSelected || false,
+                zOrder: newMediaSource.zOrder,
                 origin: newMediaSource
             });
             this.sourceList.push(newMediaSource);
@@ -512,20 +521,15 @@ class TRTCMediaMixingManager {
         logger_1.default.log(`${this.logPrefix}removeMediaSource:`, mediaSource);
         const index = this.findMediaSourceIndex(mediaSource);
         if (index === -1) {
-            throw new Error("Not existing media source to remove");
+            return Promise.reject({
+                code: types_1.TRTCMediaMixingErrorCode.NotFoundSource,
+                message: "Not existing media source to remove"
+            });
         }
         return new Promise((resolve, reject) => {
-            var _a;
             const key = `${promiseKeys.removeMediaSource}-${mediaSource.sourceType}-${mediaSource.sourceId}`;
             this.promiseStore.addPromise(key, resolve, reject);
             this.nodeMediaMixingPlugin.removeMediaSource(mediaSource);
-            (_a = this.mediaMixingDesigner) === null || _a === void 0 ? void 0 : _a.removeMedia({
-                id: `${mediaSource.sourceType}__${mediaSource.sourceId}`,
-                rect: mediaSource.rect,
-                isSelected: mediaSource.isSelected || false,
-                origin: (0, utils_1.safelyParse)(JSON.stringify(mediaSource))
-            });
-            this.sourceList.splice(index, 1);
         });
     }
     /**
@@ -539,7 +543,10 @@ class TRTCMediaMixingManager {
             logger_1.default.log(`${this.logPrefix}updateMediaSource:`, mediaSource);
             const index = this.findMediaSourceIndex(mediaSource);
             if (index === -1) {
-                throw new Error("Not existing media source to update");
+                return Promise.reject({
+                    code: types_1.TRTCMediaMixingErrorCode.NotFoundSource,
+                    message: "Not existing media source to update"
+                });
             }
             const newMediaSource = Object.assign(Object.assign({}, this.sourceList[index]), (0, utils_1.safelyParse)(JSON.stringify(mediaSource)));
             if (mediaSource.isSelected) {
@@ -553,6 +560,7 @@ class TRTCMediaMixingManager {
                 id: `${mediaSource.sourceType}__${mediaSource.sourceId}`,
                 rect: mediaSource.rect,
                 isSelected: mediaSource.isSelected || false,
+                zOrder: mediaSource.zOrder,
                 origin: (0, utils_1.safelyParse)(JSON.stringify(mediaSource))
             });
             this.sourceList[index] = newMediaSource;
@@ -639,30 +647,26 @@ class TRTCMediaMixingManager {
                     minVideoBitrate: 0,
                     enableAdjustRes: 0,
                 } }));
-            this.nodeMediaMixingPlugin.callExperimentalAPI(JSON.stringify({
-                api: 'setVideoEncodeParamEx',
-                params: {
-                    videoWidth: this.mixingVideoWidth > this.mixingVideoHeight ? this.mixingVideoWidth : this.mixingVideoHeight,
-                    videoHeight: this.mixingVideoWidth > this.mixingVideoHeight ? this.mixingVideoHeight : this.mixingVideoWidth,
-                    videoFps: params.videoEncoderParams.videoFps,
-                    videoBitrate: params.videoEncoderParams.videoBitrate,
-                    gop: 1,
-                    resolutionMode: params.videoEncoderParams.resMode,
-                    streamType: trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig,
-                }
-            }));
+            const encodeParamEx = {
+                videoWidth: this.mixingVideoWidth > this.mixingVideoHeight ? this.mixingVideoWidth : this.mixingVideoHeight,
+                videoHeight: this.mixingVideoWidth > this.mixingVideoHeight ? this.mixingVideoHeight : this.mixingVideoWidth,
+                videoFps: params.videoEncoderParams.videoFps,
+                videoBitrate: params.videoEncoderParams.videoBitrate,
+                gop: 1,
+                resolutionMode: params.videoEncoderParams.resMode,
+                streamType: trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig,
+            };
             if (params.videoEncoderParams.colorRange !== undefined
                 || params.videoEncoderParams.colorSpace !== undefined
                 || params.videoEncoderParams.complexity !== undefined) {
-                this.nodeMediaMixingPlugin.callExperimentalAPI(JSON.stringify({
-                    "api": "setVideoEncodeParamEx",
-                    "params": {
-                        "colorRange": params.videoEncoderParams.colorRange || trtc_define_1.TRTCVideoColorRange.TRTCVideoColorRange_Auto,
-                        "colorSpace": params.videoEncoderParams.colorSpace || trtc_define_1.TRTCVideoColorSpace.TRTCVideoColorSpace_Auto,
-                        "complexity": params.videoEncoderParams.complexity || trtc_define_1.TRTCVideoEncodeComplexity.TRTCVideoEncodeComplexity_Fastest,
-                    }
-                }));
+                encodeParamEx.colorRange = params.videoEncoderParams.colorRange || trtc_define_1.TRTCVideoColorRange.TRTCVideoColorRange_Auto;
+                encodeParamEx.colorSpace = params.videoEncoderParams.colorSpace || trtc_define_1.TRTCVideoColorSpace.TRTCVideoColorSpace_Auto;
+                encodeParamEx.complexity = params.videoEncoderParams.complexity || trtc_define_1.TRTCVideoEncodeComplexity.TRTCVideoEncodeComplexity_Fastest;
             }
+            this.nodeMediaMixingPlugin.callExperimentalAPI(JSON.stringify({
+                api: 'setVideoEncodeParamEx',
+                params: encodeParamEx
+            }));
             return result;
         });
     }
@@ -749,8 +753,7 @@ class TRTCMediaMixingManager {
                 this.paramsStore.streamLayout = undefined;
             }
         }
-        this.createorUpdateLayoutManager(layout);
-        let transferredUserList = layout.userList;
+        this.createOrUpdateLayoutManager(layout);
         if (this.view) {
             const viewRect = this.view.getBoundingClientRect();
             if ((_a = layout.userList) === null || _a === void 0 ? void 0 : _a.length) {
@@ -764,26 +767,13 @@ class TRTCMediaMixingManager {
                         bottom: workingArea.bottom / viewRect.height,
                     }, localUser.fillMode);
                 }
-                transferredUserList = layout.userList.map((user) => {
-                    if (user.rect) {
-                        return Object.assign(Object.assign({}, 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,
-                            } });
-                    }
-                    else {
-                        return user;
-                    }
-                });
                 logger_1.default.log(`${this.logPrefix}setStreamLayout transfer layout to pixel unit:`, JSON.stringify(layout));
             }
         }
         else {
             logger_1.default.warn(`${this.logPrefix}setStreamLayout: view is null, no container HTML element. User control the layout manually in device pixel unit.`);
         }
-        (_c = this.streamLayoutManager) === null || _c === void 0 ? void 0 : _c.setLayout(Object.assign(Object.assign({}, layout), { userList: transferredUserList }));
+        (_c = this.streamLayoutManager) === null || _c === void 0 ? void 0 : _c.setLayout(layout);
     }
     /**
      * @private
@@ -846,6 +836,10 @@ class TRTCMediaMixingManager {
             });
         });
     }
+    callExperimentalAPI(jsonStr) {
+        logger_1.default.debug(`${this.logPrefix}callExperimentalAPI:${jsonStr}`);
+        this.nodeMediaMixingPlugin.callExperimentalAPI(jsonStr);
+    }
     /**
      * 注册事件监听
      *
@@ -919,6 +913,7 @@ class TRTCMediaMixingManager {
                         id: `${mediaSource.sourceType}__${mediaSource.sourceId}`,
                         rect: mediaSource.rect,
                         isSelected: mediaSource.isSelected || false,
+                        zOrder: mediaSource.zOrder,
                         origin: mediaSource
                     });
                 }));
@@ -933,7 +928,7 @@ class TRTCMediaMixingManager {
             this.mediaMixingDesigner = null;
         }
     }
-    createorUpdateLayoutManager(layout) {
+    createOrUpdateLayoutManager(layout) {
         const context = {
             container: this.view,
             mixingVideoSize: {
@@ -1052,6 +1047,7 @@ class TRTCMediaMixingManager {
                 id: `${this.sourceList[index].sourceType}__${this.sourceList[index].sourceId}`,
                 rect: this.sourceList[index].rect,
                 isSelected: this.sourceList[index].isSelected || false,
+                zOrder: this.sourceList[index].zOrder,
                 origin: (0, utils_1.safelyParse)(JSON.stringify(this.sourceList[index]))
             });
         });
@@ -1063,8 +1059,10 @@ class TRTCMediaMixingManager {
         // To do: 待完善
         switch (key) {
             case "onMediaSourceAdded":
+                this.onMediaSourceAdded(data);
+                break;
             case "onMediaSourceRemoved":
-                this.onMediaSourceAddedOrRemoved(key, data);
+                this.onMediaSourceRemoved(data);
                 break;
             case TRTCMediaMixingEvent.onMediaSourceSizeChanged:
                 this.onMediaSourceSizeChanged(data);
@@ -1083,18 +1081,64 @@ class TRTCMediaMixingManager {
                 break;
         }
     }
-    onMediaSourceAddedOrRemoved(key, data) {
-        var _a;
-        let promiseKey;
-        if (key === "onMediaSourceAdded") {
-            promiseKey = `${promiseKeys.addMediaSource}-${data.sourceType}-${data.sourceId}`;
+    onMediaSourceAdded(data) {
+        var _a, _b;
+        const promiseKey = `${promiseKeys.addMediaSource}-${data.sourceType}-${data.sourceId}`;
+        let flag = false;
+        if (data.errCode === 0) {
+            flag = this.promiseStore.resolvePromise(promiseKey, undefined);
         }
         else {
-            // 'onMediaSourceRemoved'
-            promiseKey = `${promiseKeys.removeMediaSource}-${data.sourceType}-${data.sourceId}`;
+            const newSourceIndex = this.findMediaSourceIndex({
+                sourceId: data.sourceId,
+                sourceType: data.sourceType,
+            });
+            if (newSourceIndex !== -1) {
+                const newMediaSource = this.sourceList[newSourceIndex];
+                (_a = this.mediaMixingDesigner) === null || _a === void 0 ? void 0 : _a.removeMedia({
+                    id: `${newMediaSource.sourceType}__${newMediaSource.sourceId}`,
+                    rect: newMediaSource.rect,
+                    isSelected: newMediaSource.isSelected || false,
+                    zOrder: newMediaSource.zOrder,
+                    origin: newMediaSource
+                });
+                this.sourceList.splice(newSourceIndex, 1);
+            }
+            flag = this.promiseStore.rejectPromise(promiseKey, {
+                code: data.errCode,
+                message: data.errMsg,
+            });
+        }
+        if (data.errCode !== 0 && !flag) {
+            // event triggered internally, not by method invoked by user
+            const index = this.findMediaSourceIndex(data);
+            let mediaSource = undefined;
+            if (index !== -1) {
+                mediaSource = Object.assign({}, this.sourceList[index]);
+            }
+            (_b = this.eventEmitter) === null || _b === void 0 ? void 0 : _b.emit(TRTCMediaMixingEvent.onError, data.errCode, data.errMsg, mediaSource);
         }
+    }
+    onMediaSourceRemoved(data) {
+        var _a, _b;
+        const promiseKey = `${promiseKeys.removeMediaSource}-${data.sourceType}-${data.sourceId}`;
         let flag = false;
         if (data.errCode === 0) {
+            const sourceIndex = this.findMediaSourceIndex({
+                sourceId: data.sourceId,
+                sourceType: data.sourceType
+            });
+            if (sourceIndex !== -1) {
+                const mediaSource = this.sourceList[sourceIndex];
+                (_a = this.mediaMixingDesigner) === null || _a === void 0 ? void 0 : _a.removeMedia({
+                    id: `${mediaSource.sourceType}__${mediaSource.sourceId}`,
+                    rect: mediaSource.rect,
+                    isSelected: mediaSource.isSelected || false,
+                    zOrder: mediaSource.zOrder,
+                    origin: (0, utils_1.safelyParse)(JSON.stringify(mediaSource))
+                });
+                this.sourceList.splice(sourceIndex, 1);
+            }
             flag = this.promiseStore.resolvePromise(promiseKey, undefined);
         }
         else {
@@ -1110,7 +1154,7 @@ class TRTCMediaMixingManager {
             if (index !== -1) {
                 mediaSource = Object.assign({}, this.sourceList[index]);
             }
-            (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit(TRTCMediaMixingEvent.onError, data.errCode, data.errMsg, mediaSource);
+            (_b = this.eventEmitter) === null || _b === void 0 ? void 0 : _b.emit(TRTCMediaMixingEvent.onError, data.errCode, data.errMsg, mediaSource);
         }
     }
     onMediaSourceSizeChanged(data) {
@@ -1183,14 +1227,15 @@ class TRTCMediaMixingManager {
         });
     }
     onMediaMixingServerLost() {
-        var _a;
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             if (this.autoControlServer) {
                 yield this.recoverMediaMixingServer();
             }
             else {
                 this.sourceList = [];
-                (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit(TRTCMediaMixingEvent.onMediaMixingServerLost);
+                (_a = this.mediaMixingDesigner) === null || _a === void 0 ? void 0 : _a.removeAllMedia();
+                (_b = this.eventEmitter) === null || _b === void 0 ? void 0 : _b.emit(TRTCMediaMixingEvent.onMediaMixingServerLost);
             }
         });
     }
@@ -1209,14 +1254,7 @@ class TRTCMediaMixingManager {
                     this.setStreamLayout(this.paramsStore.streamLayout);
                 }
                 this.sourceList.forEach((item) => {
-                    var _a;
                     this.nodeMediaMixingPlugin.addMediaSource(item);
-                    (_a = this.mediaMixingDesigner) === null || _a === void 0 ? void 0 : _a.addMedia({
-                        id: `${item.sourceType}__${item.sourceId}`,
-                        rect: item.rect,
-                        isSelected: item.isSelected || false,
-                        origin: item
-                    });
                 });
                 if (((_b = this.trtcParamsStore) === null || _b === void 0 ? void 0 : _b.enterRoomParams) && ((_c = this.trtcParamsStore) === null || _c === void 0 ? void 0 : _c.enterRoomScene)) {
                     this.nodeTRTCCloud.enterRoom(this.trtcParamsStore.enterRoomParams, this.trtcParamsStore.enterRoomScene);
@@ -1228,6 +1266,10 @@ class TRTCMediaMixingManager {
             }
         });
     }
+    onDevicePixelRatioChange() {
+        logger_1.default.debug(`${this.logPrefix}onDevicePixelRatioChange:`, window.devicePixelRatio);
+        this.setDisplayRect();
+    }
     // ******   这一部分接口暴露不合理，暂时不对暴露在 API 文档上   **************/
     startCameraDeviceTest(windowID, rect) {
         var _a;

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

@@ -27,5 +27,6 @@ declare class BaseStreamLayoutManager implements ITRTCStreamLayoutManager {
     private onResize;
     private setResizeObserver;
     private updateDisplayArea;
+    private onDevicePixelRatioChange;
 }
 export default BaseStreamLayoutManager;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const types_1 = require("../types");
+const DevicePixelRatioObserver_1 = __importDefault(require("../../../base/DevicePixelRatioObserver"));
 const utils_1 = require("../../../utils");
 const logger_1 = __importDefault(require("../../../logger"));
 class BaseStreamLayoutManager {
@@ -33,6 +34,8 @@ class BaseStreamLayoutManager {
         else {
             logger_1.default.warn(`${this.logPrefix}constructor failed, no context.container.`);
         }
+        this.onDevicePixelRatioChange = (0, utils_1.debounce)(this.onDevicePixelRatioChange.bind(this), 100);
+        DevicePixelRatioObserver_1.default.on('change', this.onDevicePixelRatioChange);
     }
     setLayout(layout) {
         this.layout = layout;
@@ -58,6 +61,7 @@ class BaseStreamLayoutManager {
             this.resizeObserver.disconnect();
             this.resizeObserver = null;
         }
+        DevicePixelRatioObserver_1.default.off('change', this.onDevicePixelRatioChange);
     }
     refreshLayout() {
         logger_1.default.warn(`${this.logPrefix}refreshLayout should be implemented by sub-class.`);
@@ -102,5 +106,9 @@ class BaseStreamLayoutManager {
             logger_1.default.warn(`${this.logPrefix}updateDisplayArea failed, no container.`);
         }
     }
+    onDevicePixelRatioChange() {
+        logger_1.default.debug(`${this.logPrefix}onDevicePixelRatioChange:`, window.devicePixelRatio);
+        this.refreshLayout();
+    }
 }
 exports.default = BaseStreamLayoutManager;

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

@@ -23,7 +23,23 @@ class CustomStreamLayoutManager extends BaseStreamLayoutManager_1.default {
     refreshLayout() {
         var _a;
         if (this.layout.userList) {
-            this.nativeStreamLayoutManager.setStreamLayout(this.layout.userList);
+            let transferredUserList = this.layout.userList;
+            if (this.container) {
+                transferredUserList = this.layout.userList.map((user) => {
+                    if (user.rect) {
+                        return Object.assign(Object.assign({}, 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,
+                            } });
+                    }
+                    else {
+                        return user;
+                    }
+                });
+            }
+            this.nativeStreamLayoutManager.setStreamLayout(transferredUserList);
         }
         else if (this.layout.size && this.layout.streams) {
             const userList = this.convertRelativeToAbsolute(this.layout);

package/liteav/trtc.d.ts

@@ -20,6 +20,7 @@ declare class TRTCCloud extends EventEmitter {
     private logger;
     private id;
     private static isIPCMode;
+    private static ipcModeReferenceCount;
     private static sharedTRTCCloudInstance;
     private static subInstances;
     private stateStore;
@@ -1983,7 +1984,7 @@ declare class TRTCCloud extends EventEmitter {
      *  true // enable highlight
      * );
      */
-    selectScreenCaptureTarget(source: TRTCScreenCaptureSourceInfo | number, captureRect: Rect | string, property: TRTCScreenCaptureProperty | string, deprecatedCaptureRect?: Rect, captureMouse?: boolean, highlightWindow?: boolean): any;
+    selectScreenCaptureTarget(source: TRTCScreenCaptureSourceInfo | number, captureRect: Rect | string, property: TRTCScreenCaptureProperty | string, deprecatedCaptureRect?: Rect, captureMouse?: boolean, highlightWindow?: boolean): void;
     /**
      * 启动屏幕分享，支持选择使用主路或辅路进行屏幕分享。
      *

package/liteav/trtc.js

@@ -174,9 +174,11 @@ class TRTCCloud extends events_1.EventEmitter {
         const newConfig = Object.assign({ jsVersion: pkg.version, componentNO }, config);
         if (!TRTCCloud.isIPCMode) {
             this.rtcCloud = new NodeTRTCEngine.NodeTRTCCloud(newConfig);
+            TRTCCloud.ipcModeReferenceCount = 0;
         }
         else {
             this.rtcCloud = new NodeTRTCEngine.NodeRemoteTRTCCloud(newConfig);
+            TRTCCloud.ipcModeReferenceCount = 1;
         }
         this.stateStore = new Map();
         this.videoRendererMap = new Map();
@@ -308,6 +310,7 @@ class TRTCCloud extends events_1.EventEmitter {
             return null;
         }
         if (TRTCCloud.isIPCMode) {
+            TRTCCloud.ipcModeReferenceCount = TRTCCloud.ipcModeReferenceCount + 1;
             return TRTCCloud.sharedTRTCCloudInstance;
         }
         return new TRTCCloud(config);
@@ -348,6 +351,12 @@ class TRTCCloud extends events_1.EventEmitter {
      */
     destroy() {
         var _a, _b;
+        if (TRTCCloud.isIPCMode) {
+            TRTCCloud.ipcModeReferenceCount = TRTCCloud.ipcModeReferenceCount - 1;
+            if (TRTCCloud.ipcModeReferenceCount > 0) {
+                return;
+            }
+        }
         if (this === TRTCCloud.sharedTRTCCloudInstance) {
             if (TRTCCloud.subInstances) {
                 TRTCCloud.subInstances.forEach(sub => {
@@ -5261,7 +5270,7 @@ class TRTCCloud extends events_1.EventEmitter {
             }
         }
         catch (error) {
-            this.logger.warn(`callExperimentalAPI invalid JSON parameter`, error);
+            this.logger.warn(`callExperimentalAPI invalid JSON parameter`, error, jsonStr);
         }
     }
     /**

package/package.json

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