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

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

@@ -234,6 +234,7 @@ export declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
      * @returns {Promise<void>}
      */
     removeMediaSource(mediaSource: TRTCMediaSource): Promise<void>;
+    private syncRemoveMediaSource;
     /**
      * 更新本地混流媒体源
      * @param mediaSource {TRTCMediaSource} - 媒体源信息
@@ -373,6 +374,7 @@ export declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
      * @returns {Promise<void>}
      */
     stopMediaMixingServer(): Promise<void>;
+    callExperimentalAPI(jsonStr: string): void;
     /**
      * 注册事件监听
      *
@@ -387,13 +389,14 @@ export declare class TRTCMediaMixingManager implements ITRTCMediaMixingManager {
      * @param func {Function} - 事件回调函数
      */
     off(event: TRTCMediaMixingEvent, func: (...args: any[]) => void): void;
-    private initResizeObserver;
+    private createResizeObserver;
+    private destroyResizeObserver;
     private onPreviewAreaResize;
     private onVisibilityChange;
     private setDisplayRect;
     private createDesigner;
     private destroyDesigner;
-    private createorUpdateLayoutManager;
+    private createOrUpdateLayoutManager;
     private destroyLayoutManager;
     private updateMixingVideoSize;
     private listenDesignerEvent;
@@ -409,13 +412,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,14 +309,15 @@ 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);
-                this.resizeObserver.disconnect();
-            }
+            this.destroyResizeObserver();
+            this.destroyLayoutManager();
             this.view = null;
             this.windowID = 0;
             this.destroyDesigner();
@@ -448,7 +451,7 @@ class TRTCMediaMixingManager {
                     this.destroyDesigner();
                     this.view = viewOrRegion;
                     this.setDisplayRect();
-                    this.initResizeObserver();
+                    this.createResizeObserver();
                     this.createDesigner();
                 }
                 else {
@@ -466,8 +469,10 @@ class TRTCMediaMixingManager {
             }
         }
         else {
+            this.destroyResizeObserver();
             this.destroyLayoutManager();
             this.destroyDesigner();
+            this.view = null;
             this.nodeMediaMixingPlugin.setDisplayParams(realWindowID, { left: 0, right: 0, top: 0, bottom: 0 });
         }
     }
@@ -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);
@@ -509,24 +518,46 @@ class TRTCMediaMixingManager {
      * @returns {Promise<void>}
      */
     removeMediaSource(mediaSource) {
+        var _a;
         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);
+        else {
+            const mediaSourceToDelete = this.sourceList[index];
+            if ((_a = mediaSourceToDelete === null || mediaSourceToDelete === void 0 ? void 0 : mediaSourceToDelete.control) === null || _a === void 0 ? void 0 : _a.isAddFailed) {
+                this.syncRemoveMediaSource(mediaSource, index);
+                return Promise.resolve();
+            }
+            else {
+                return new Promise((resolve, reject) => {
+                    const key = `${promiseKeys.removeMediaSource}-${mediaSource.sourceType}-${mediaSource.sourceId}`;
+                    this.promiseStore.addPromise(key, resolve, reject);
+                    this.syncRemoveMediaSource(mediaSource, index);
+                });
+            }
+        }
+    }
+    syncRemoveMediaSource(mediaSource, index) {
+        var _a;
+        try {
             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,
+                zOrder: mediaSource.zOrder,
                 origin: (0, utils_1.safelyParse)(JSON.stringify(mediaSource))
             });
             this.sourceList.splice(index, 1);
-        });
+        }
+        catch (error) {
+            logger_1.default.warn(`${this.logPrefix}removeMediaSource exception:`, error);
+        }
     }
     /**
      * 更新本地混流媒体源
@@ -539,7 +570,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 +587,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 +674,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;
         });
     }
@@ -740,7 +771,7 @@ class TRTCMediaMixingManager {
      */
     setStreamLayout(layout) {
         var _a, _b, _c;
-        logger_1.default.log(`${this.logPrefix}setStreamLayout:`, layout);
+        logger_1.default.debug(`${this.logPrefix}setStreamLayout:`, JSON.stringify(layout));
         if (this.paramsStore) {
             try {
                 this.paramsStore.streamLayout = JSON.parse(JSON.stringify(layout));
@@ -749,9 +780,8 @@ class TRTCMediaMixingManager {
                 this.paramsStore.streamLayout = undefined;
             }
         }
-        this.createorUpdateLayoutManager(layout);
-        let transferredUserList = layout.userList;
         if (this.view) {
+            this.createOrUpdateLayoutManager(layout);
             const viewRect = this.view.getBoundingClientRect();
             if ((_a = layout.userList) === null || _a === void 0 ? void 0 : _a.length) {
                 const localUser = layout.userList.filter(user => user.userId === constant_1.LOCAL_USER_ID)[0];
@@ -764,26 +794,12 @@ 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 +862,10 @@ class TRTCMediaMixingManager {
             });
         });
     }
+    callExperimentalAPI(jsonStr) {
+        logger_1.default.debug(`${this.logPrefix}callExperimentalAPI:${jsonStr}`);
+        this.nodeMediaMixingPlugin.callExperimentalAPI(jsonStr);
+    }
     /**
      * 注册事件监听
      *
@@ -866,12 +886,20 @@ class TRTCMediaMixingManager {
         var _a;
         (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.off(event, func);
     }
-    initResizeObserver() {
+    createResizeObserver() {
         if (this.view) {
             this.resizeObserver = new ResizeObserver(this.onPreviewAreaResize);
             this.resizeObserver.observe(this.view);
         }
     }
+    destroyResizeObserver() {
+        if (this.resizeObserver) {
+            if (this.view) {
+                this.resizeObserver.unobserve(this.view);
+            }
+            this.resizeObserver.disconnect();
+        }
+    }
     onPreviewAreaResize(entries) {
         logger_1.default.log(`${this.logPrefix}onPreviewAreaResize:`, entries);
         for (const entry of entries) {
@@ -899,6 +927,7 @@ class TRTCMediaMixingManager {
                 top: clientRect.top * window.devicePixelRatio,
                 bottom: clientRect.bottom * window.devicePixelRatio,
             };
+            logger_1.default.debug(`${this.logPrefix}setDisplayRect:`, this.windowID, rect);
             this.nodeMediaMixingPlugin.setDisplayParams(this.windowID, rect);
         }
     }
@@ -919,6 +948,7 @@ class TRTCMediaMixingManager {
                         id: `${mediaSource.sourceType}__${mediaSource.sourceId}`,
                         rect: mediaSource.rect,
                         isSelected: mediaSource.isSelected || false,
+                        zOrder: mediaSource.zOrder,
                         origin: mediaSource
                     });
                 }));
@@ -933,7 +963,7 @@ class TRTCMediaMixingManager {
             this.mediaMixingDesigner = null;
         }
     }
-    createorUpdateLayoutManager(layout) {
+    createOrUpdateLayoutManager(layout) {
         const context = {
             container: this.view,
             mixingVideoSize: {
@@ -1052,6 +1082,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 +1094,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,16 +1116,43 @@ class TRTCMediaMixingManager {
                 break;
         }
     }
-    onMediaSourceAddedOrRemoved(key, data) {
+    onMediaSourceAdded(data) {
         var _a;
-        let promiseKey;
-        if (key === "onMediaSourceAdded") {
-            promiseKey = `${promiseKeys.addMediaSource}-${data.sourceType}-${data.sourceId}`;
+        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];
+                if (!newMediaSource.control) {
+                    newMediaSource.control = {};
+                }
+                newMediaSource.control.isAddFailed = true;
+            }
+            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]);
+            }
+            (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit(TRTCMediaMixingEvent.onError, data.errCode, data.errMsg, mediaSource);
+        }
+    }
+    onMediaSourceRemoved(data) {
+        var _a;
+        const promiseKey = `${promiseKeys.removeMediaSource}-${data.sourceType}-${data.sourceId}`;
         let flag = false;
         if (data.errCode === 0) {
             flag = this.promiseStore.resolvePromise(promiseKey, undefined);
@@ -1183,14 +1243,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 +1270,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 +1282,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,24 @@ 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: Math.round(user.rect.left * window.devicePixelRatio),
+                                right: Math.round(user.rect.right * window.devicePixelRatio),
+                                top: Math.round(user.rect.top * window.devicePixelRatio),
+                                bottom: Math.round(user.rect.bottom * window.devicePixelRatio),
+                            } });
+                    }
+                    else {
+                        return user;
+                    }
+                });
+            }
+            logger_1.default.debug(`${this.logPrefix}refreshLayout:`, JSON.stringify(transferredUserList));
+            this.nativeStreamLayoutManager.setStreamLayout(transferredUserList);
         }
         else if (this.layout.size && this.layout.streams) {
             const userList = this.convertRelativeToAbsolute(this.layout);

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

@@ -29,6 +29,7 @@ class NoneStreamLayoutManager extends BaseStreamLayoutManager_1.default {
                     bottom: workingArea.bottom / this.displayArea.height / window.devicePixelRatio,
                 }, this.layout.userList[0].fillMode);
             }
+            logger_1.default.debug(`${this.logPrefix}refreshLayout:`, JSON.stringify(this.layout.userList));
             (_b = this.nativeStreamLayoutManager) === null || _b === void 0 ? void 0 : _b.setStreamLayout(this.layout.userList);
         }
         else {
@@ -59,12 +60,12 @@ class NoneStreamLayoutManager extends BaseStreamLayoutManager_1.default {
             this.layout.userList = [{
                     userId: '',
                     rect: {
-                        left: previewLeft,
-                        top: previewTop,
-                        right: previewRight,
-                        bottom: previewBottom,
+                        left: Math.round(previewLeft),
+                        top: Math.round(previewTop),
+                        right: Math.round(previewRight),
+                        bottom: Math.round(previewBottom),
                     },
-                    fillMode: trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit,
+                    fillMode: trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fill,
                     zOrder: 0
                 }];
         }

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 => {
@@ -5188,6 +5197,9 @@ class TRTCCloud extends events_1.EventEmitter {
         return process.platform == 'darwin';
     }
     _setRemoteVideoBuffer(userId, streamType) {
+        if (TRTCCloud.isIPCMode) {
+            return;
+        }
         const videoBufferInfo = new trtc_define_1.VideoBufferInfo({
             userId: userId,
             id: (0, util_1.generateUniqueId)(),
@@ -5261,7 +5273,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.24",
   "description": "trtc electron sdk",
   "main": "./liteav/index.js",
   "types": "./liteav/index.d.ts",