trtc-electron-sdk 11.2.118-beta.2 → 11.3.502-alpha.0

package/liteav/LocalMediaTranscoder/index.d.ts

@@ -402,9 +402,9 @@ declare class TRTCLocalMediaTranscoder extends EventEmitter {
     removeImageSource(path: string): void;
     /**
      * 设置本地混流转码视频预览节点
-     * @param el {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
+     * @param view {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
      */
-    setMixedVideoRenderView(el: HTMLElement | null): void;
+    setMixedVideoRenderView(view: HTMLElement | null): void;
     private setMixedVideoFrameRenderCallback;
     private unsetMixedVideoFrameRenderCallback;
     private setEventCallback;

package/liteav/LocalMediaTranscoder/index.js

@@ -516,11 +516,11 @@ class TRTCLocalMediaTranscoder extends events_1.EventEmitter {
     }
     /**
      * 设置本地混流转码视频预览节点
-     * @param el {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
+     * @param view {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
      */
-    setMixedVideoRenderView(el) {
-        if (el && el instanceof HTMLElement) {
-            if (this.container === el) {
+    setMixedVideoRenderView(view) {
+        if (view && view instanceof HTMLElement) {
+            if (this.container === view) {
                 return; // 重复在同一个 HTML 节点内渲染，不用处理，直接退出
             }
             else if (this.renderer) {
@@ -528,13 +528,25 @@ class TRTCLocalMediaTranscoder extends events_1.EventEmitter {
                 this.renderer.destroy();
                 this.renderer = null;
                 // 重新记录渲染的 HTML 节点并创建渲染器 
-                this.container = el;
-                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container);
+                this.container = view;
+                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, {
+                    type: Renderer_1.RenderType.WebGL,
+                    onContextLost: () => {
+                        this.container = view;
+                        this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, { type: Renderer_1.RenderType.Video });
+                    },
+                });
             }
             else {
                 // 第一次设置渲染的 HTML 节点，并创建渲染器，设置渲染回调
-                this.container = el;
-                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container);
+                this.container = view;
+                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, {
+                    type: Renderer_1.RenderType.WebGL,
+                    onContextLost: () => {
+                        this.container = view;
+                        this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, { type: Renderer_1.RenderType.Video });
+                    },
+                });
                 this.setMixedVideoFrameRenderCallback();
             }
         }

package/liteav/Renderer/Canvas2DRenderer/index.d.ts

@@ -19,6 +19,7 @@ declare class Canvas2dRenderer implements IRenderer {
     private _drawFrameBGRA;
     private _updateCanvasStyle;
     private _correctI420Data;
+    isValid(viewContainer: HTMLElement): boolean;
     destroy(): void;
 }
 export default Canvas2dRenderer;

package/liteav/Renderer/Canvas2DRenderer/index.js

@@ -41,9 +41,13 @@ class Canvas2dRenderer {
         }
     }
     unbind() {
+        var _a;
         if (this.viewWrapper && this.viewContainer && this.viewWrapper.parentElement === this.viewContainer) {
             this.viewContainer.removeChild(this.viewWrapper);
         }
+        else {
+            console.warn("trtc: Canvas2DRenderer unbind error: remove viewWrapper error", this.viewWrapper, this.viewContainer, (_a = this.viewContainer) === null || _a === void 0 ? void 0 : _a.parentElement);
+        }
         this.viewContainer = null;
         this.yuv = null;
     }
@@ -209,6 +213,10 @@ class Canvas2dRenderer {
         }
         return data;
     }
+    isValid(viewContainer) {
+        var _a;
+        return viewContainer === this.viewContainer && this.viewContainer === ((_a = this.viewWrapper) === null || _a === void 0 ? void 0 : _a.parentElement);
+    }
     destroy() {
         this.unbind();
         this.viewWrapper = null;

package/liteav/Renderer/Canvas3DRenderer/index.d.ts

@@ -12,7 +12,11 @@ declare class Canvas3dRenderer implements IRenderer {
     private i420Width;
     private i420Height;
     private i420Rotation;
-    constructor(pixelFormat: TRTCVideoPixelFormat, view: HTMLElement);
+    private onContextLost;
+    constructor(pixelFormat: TRTCVideoPixelFormat, view: HTMLElement, options: {
+        onContextLost: (() => void) | null;
+    });
+    private _handleContextLost;
     private _createCanvas3DRenderer;
     setContentMode(mode: TRTCVideoFillMode): void;
     private bind;
@@ -22,6 +26,7 @@ declare class Canvas3dRenderer implements IRenderer {
     private _drawFrameRGBA;
     private _drawFrameBGRA;
     private _updateCanvasStyle;
+    isValid(viewContainer: HTMLElement): boolean;
     destroy(): void;
 }
 export default Canvas3dRenderer;

package/liteav/Renderer/Canvas3DRenderer/index.js

@@ -11,9 +11,9 @@ const I420Canvas3DRenderer_1 = __importDefault(require("./I420Canvas3DRenderer")
 const UP_LIMIT_COUNT = 16;
 let currentCreatedCount = 0;
 class Canvas3dRenderer {
-    constructor(pixelFormat, view) {
-        this.i420Width = 0;
-        this.i420Height = 0;
+    constructor(pixelFormat, view, options) {
+        this.i420Width = 640;
+        this.i420Height = 360;
         this.i420Rotation = 0;
         if (currentCreatedCount < UP_LIMIT_COUNT) {
             currentCreatedCount = currentCreatedCount + 1;
@@ -38,8 +38,15 @@ class Canvas3dRenderer {
         this.canvas = null;
         this.cacheCanvasOptions = {};
         this.canvas3DRenderer = null;
+        this.onContextLost = options.onContextLost || null;
+        this._handleContextLost = this._handleContextLost.bind(this);
         this.bind(view);
     }
+    _handleContextLost(e) {
+        console.warn("trtc: _handleContextLost:", e);
+        this.onContextLost && this.onContextLost();
+        this.destroy();
+    }
     _createCanvas3DRenderer() {
         if (this.canvas) {
             try {
@@ -69,31 +76,44 @@ class Canvas3dRenderer {
             this.canvas = document.createElement('canvas');
             this.viewWrapper.appendChild(this.canvas);
             this.viewContainer.appendChild(this.viewWrapper);
-            // I420 WebGL 渲染有些特殊，视频宽高发生变化时，需要重新创建 canvas
-            if (this.pixelFormat === trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420) {
-                // 初始化时，i420Width 和 i420Height 为 0，所以不会创建渲染器
-                if (this.i420Width || this.i420Height) {
-                    this.canvas.width = this.i420Width;
-                    this.canvas.height = this.i420Height;
+            this.canvas.addEventListener("webglcontextlost", this._handleContextLost);
+            try {
+                // I420 WebGL 渲染有些特殊，视频宽高发生变化时，需要重新创建 canvas
+                if (this.pixelFormat === trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420) {
+                    if (this.i420Width || this.i420Height) {
+                        this.canvas.width = this.i420Width;
+                        this.canvas.height = this.i420Height;
+                        this.canvas3DRenderer = this._createCanvas3DRenderer();
+                    }
+                }
+                else {
                     this.canvas3DRenderer = this._createCanvas3DRenderer();
                 }
             }
-            else {
-                this.canvas3DRenderer = this._createCanvas3DRenderer();
+            catch (e) {
+                this.canvas.removeEventListener("webglcontextlost", this._handleContextLost);
+                throw e;
             }
         }
     }
     unbind() {
-        var _a;
+        var _a, _b, _c;
         (_a = this.canvas3DRenderer) === null || _a === void 0 ? void 0 : _a.destroy();
         this.canvas3DRenderer = null;
         if (this.canvas && this.viewWrapper && this.canvas.parentElement === this.viewWrapper) {
             this.viewWrapper.removeChild(this.canvas);
         }
+        else {
+            console.warn("trtc: Canvas3DRenderer unbind error: remove canvas error", this.canvas, this.viewWrapper);
+        }
+        (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.removeEventListener("webglcontextlost", this._handleContextLost);
         this.canvas = null;
         if (this.viewWrapper && this.viewContainer && this.viewWrapper.parentElement === this.viewContainer) {
             this.viewContainer.removeChild(this.viewWrapper);
         }
+        else {
+            console.warn("trtc: Canvas3DRenderer unbind error: remove viewWrapper error", this.viewWrapper, this.viewContainer, (_c = this.viewContainer) === null || _c === void 0 ? void 0 : _c.parentElement);
+        }
         this.viewContainer = null;
     }
     drawFrame(frameData) {
@@ -118,14 +138,21 @@ class Canvas3dRenderer {
             if (width <= 0 || height <= 0) {
                 throw new Error(`wrong video parameter width:${width} or height:${height}`);
             }
-            // I420 WebGL 渲染有些特殊，视频宽高发生变化时，需要重新创建 canvas
-            if (width !== this.i420Width || height !== this.i420Height || rotation !== this.i420Rotation) {
-                const tempViewContainer = this.viewContainer;
-                this.unbind();
-                this.i420Width = width;
-                this.i420Height = height;
-                this.i420Rotation = rotation;
-                this.bind(tempViewContainer);
+            try {
+                // I420 WebGL 渲染有些特殊，视频宽高发生变化时，需要重新创建 canvas
+                if (width !== this.i420Width || height !== this.i420Height || rotation !== this.i420Rotation) {
+                    const tempViewContainer = this.viewContainer;
+                    this.unbind();
+                    this.i420Width = width;
+                    this.i420Height = height;
+                    this.i420Rotation = rotation;
+                    this.bind(tempViewContainer);
+                }
+            }
+            catch (e) {
+                this.onContextLost && this.onContextLost();
+                this.destroy();
+                throw new Error("re-create WebGL context failed");
             }
             if (this.viewWrapper && this.canvas3DRenderer) {
                 this._updateCanvasStyle({
@@ -198,11 +225,16 @@ class Canvas3dRenderer {
             throw new Error('canvas element not exist');
         }
     }
+    isValid(viewContainer) {
+        var _a;
+        return viewContainer === this.viewContainer && this.viewContainer === ((_a = this.viewWrapper) === null || _a === void 0 ? void 0 : _a.parentElement);
+    }
     destroy() {
         if (this.viewWrapper) {
             this.unbind();
             this.viewWrapper = null;
             currentCreatedCount--;
+            this.onContextLost = null;
         }
     }
 }

package/liteav/Renderer/IRenderer.d.ts

@@ -3,6 +3,7 @@ import { TFrameData } from './types';
 export interface IRenderer {
     drawFrame(frameData: TFrameData): void;
     setContentMode(mode: TRTCVideoFillMode): void;
+    isValid(viewContainer: HTMLElement): boolean;
     destroy(): void;
 }
 export default IRenderer;

package/liteav/Renderer/VideoRenderer/index.d.ts

@@ -20,6 +20,7 @@ declare class VideoRenderer implements IRenderer {
     _drawFrameNonH264(frameData: TFrameData): Promise<void>;
     _getPixelFormat(): string;
     _updateVideoStyle(options: TCanvasImageSourceStyleOptions): void;
+    isValid(viewContainer: HTMLElement): boolean;
     destroy(): void;
 }
 export default VideoRenderer;

package/liteav/Renderer/VideoRenderer/index.js

@@ -52,9 +52,13 @@ class VideoRenderer {
         }
     }
     unbind() {
+        var _a;
         if (this.viewWrapper && this.viewContainer && this.viewWrapper.parentElement === this.viewContainer) {
             this.viewContainer.removeChild(this.viewWrapper);
         }
+        else {
+            console.warn("trtc: Canvas3DRenderer unbind error: remove viewWrapper error", this.viewWrapper, this.viewContainer, (_a = this.viewContainer) === null || _a === void 0 ? void 0 : _a.parentElement);
+        }
         this.viewContainer = null;
     }
     drawFrame(frameData) {
@@ -140,6 +144,10 @@ class VideoRenderer {
             throw new Error('video element not exist');
         }
     }
+    isValid(viewContainer) {
+        var _a;
+        return viewContainer === this.viewContainer && this.viewContainer === ((_a = this.viewWrapper) === null || _a === void 0 ? void 0 : _a.parentElement);
+    }
     destroy() {
         this.unbind();
         this.viewWrapper = null;

package/liteav/Renderer/index.d.ts

@@ -1,5 +1,14 @@
 import { TRTCVideoPixelFormat } from '../trtc_define';
 import IRenderer from './IRenderer';
-export declare function createRenderer(pixelFormat: TRTCVideoPixelFormat, view: HTMLElement): IRenderer;
+export declare enum RenderType {
+    WebGL = "WebGL",
+    Canvas2D = "Canvas2D",
+    Video = "Video"
+}
+export interface RendererOptions {
+    onContextLost?: () => void;
+    type?: RenderType;
+}
+export declare function createRenderer(pixelFormat: TRTCVideoPixelFormat, view: HTMLElement, options: RendererOptions): IRenderer;
 export * from './IRenderer';
 export * from './types';

package/liteav/Renderer/index.js

@@ -17,17 +17,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createRenderer = void 0;
+exports.createRenderer = exports.RenderType = void 0;
 const Canvas3DRenderer_1 = __importDefault(require("./Canvas3DRenderer"));
 const Canvas2DRenderer_1 = __importDefault(require("./Canvas2DRenderer"));
 const VideoRenderer_1 = __importDefault(require("./VideoRenderer"));
 const util_1 = require("./util");
 const isWebGLSupported = (0, util_1.isSupportWebGL)();
-function createRenderer(pixelFormat, view) {
+var RenderType;
+(function (RenderType) {
+    RenderType["WebGL"] = "WebGL";
+    RenderType["Canvas2D"] = "Canvas2D";
+    RenderType["Video"] = "Video";
+})(RenderType = exports.RenderType || (exports.RenderType = {}));
+function createRenderer(pixelFormat, view, options) {
+    if (options && !options.type) {
+        options.type = RenderType.WebGL;
+    }
     let renderer = null;
-    if (isWebGLSupported) {
+    if (isWebGLSupported && options.type === RenderType.WebGL) {
         try {
-            renderer = new Canvas3DRenderer_1.default(pixelFormat, view);
+            renderer = new Canvas3DRenderer_1.default(pixelFormat, view, {
+                onContextLost: options.onContextLost || null,
+            });
             console.log('trtc: created WebGL render');
         }
         catch (err) {
@@ -37,7 +48,8 @@ function createRenderer(pixelFormat, view) {
     }
     if (!renderer) {
         // @ts-ignore
-        if (window.VideoFrame && window.VideoDecoder) {
+        if (window.VideoFrame && window.VideoDecoder
+            && (options.type === RenderType.WebGL || options.type === RenderType.Video)) {
             // Electron 15+ 版本支持 WebCodec API
             renderer = new VideoRenderer_1.default(pixelFormat, view);
             console.log('trtc: created Video render');

package/liteav/trtc.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
 import { VodPlayer } from './vod_player';
-import { AudioMusicParam, Rect, TRTCAppScene, TRTCAudioEffectParam, TRTCAudioQuality, TRTCBeautyStyle, TRTCDeviceState, TRTCDeviceType, TRTCLogLevel, TRTCRenderParams, TRTCRoleType, TRTCSwitchRoomParam, TRTCVideoBufferType, TRTCVideoFillMode, TRTCVideoFrame, TRTCVideoPixelFormat, TRTCVideoRotation, TRTCVideoStreamType, TRTCWaterMarkSrcType, PluginInfo, TRTCAudioRecordingParams, TRTCScreenCaptureSourceInfo, TRTCScreenCaptureProperty, TRTCSpeedTestParams, TRTCRecordType, TRTCDeviceInfo, TRTCCameraCaptureParams, TRTCImageBuffer } from './trtc_define';
+import { AudioMusicParam, Rect, TRTCAppScene, TRTCAudioEffectParam, TRTCAudioQuality, TRTCBeautyStyle, TRTCDeviceState, TRTCDeviceType, TRTCLogLevel, TRTCRenderParams, TRTCRoleType, TRTCSwitchRoomParam, TRTCVideoBufferType, TRTCVideoFillMode, TRTCVideoPixelFormat, TRTCVideoRotation, TRTCVideoStreamType, TRTCWaterMarkSrcType, PluginInfo, TRTCAudioRecordingParams, TRTCScreenCaptureSourceInfo, TRTCScreenCaptureProperty, TRTCSpeedTestParams, TRTCRecordType, TRTCDeviceInfo, TRTCCameraCaptureParams, TRTCImageBuffer, TRTCInitConfig } from './trtc_define';
 export * from './trtc_define';
 export * from './trtc_code';
 export * from './vod_player';
@@ -20,7 +20,6 @@ export * from './vod_player';
 declare class TRTCCloud extends EventEmitter {
     private rtcCloud;
     private videoRendererMap;
-    private firstVideoFrameList;
     private playStreamType;
     private localFillMode;
     private remoteFillModeMap;
@@ -49,12 +48,12 @@ declare class TRTCCloud extends EventEmitter {
     private audioQuality;
     private bgmId;
     private playAudioEffectIdList;
-    constructor();
+    constructor(config?: TRTCInitConfig);
     /**
      * 创建 TRTCCloud 对象单例
      * @returns {TRTCCloud}
      */
-    static getTRTCShareInstance(): TRTCCloud;
+    static getTRTCShareInstance(config?: TRTCInitConfig): TRTCCloud;
     /**
      * 释放 TRTCCloud 对象并清理资源
      */
@@ -112,8 +111,9 @@ declare class TRTCCloud extends EventEmitter {
      * @event TRTCCallback#onWarning
      * @param {Number} warningCode - 警告码
      * @param {String} warningMsg  - 警告信息
+     * @param {Any} extra - 补充信息
      */
-    handleOnWarning(warningCode: number, warningMsg: string, extra: number): void;
+    handleOnWarning(warningCode: number, warningMsg: string, extra: any): void;
     /**
      * 已加入房间的回调
      *
@@ -2269,8 +2269,9 @@ declare class TRTCCloud extends EventEmitter {
     getKey(uid: string, type: TRTCVideoStreamType): string;
     setEnableRenderFrame(enable: boolean): void;
     private _getRendererMap;
-    _onRenderFrame(uid: string, type: TRTCVideoStreamType, width: number, height: number, timestamp: number, rotation: number, data: any): void;
+    private _onRenderFrame;
     private _onRealRender;
+    private _checkAndDeleteExistingRenderer;
     private _createVideoRenderer;
     private _initRenderer;
     private _destroyRenderer;
@@ -2283,14 +2284,15 @@ declare class TRTCCloud extends EventEmitter {
      * @private
      * @throws {Error}
      */
-    _writefile(path: string, data: any): void;
-    _writeLog(info: string): void;
-    _onUserRenderCallback(callback: (userid: string, streamType: TRTCVideoStreamType, videoframe: TRTCVideoFrame) => void, format: TRTCVideoPixelFormat, userid: string, streamType: TRTCVideoStreamType, width: number, height: number, timestamp: number, rotation: number, data: any): void;
-    _initImageData(width: number, height: number): void;
-    _YUV2RGBA(width: number, height: number, buffer: ArrayBufferLike): Uint8ClampedArray;
-    _BGRA2RGBA(data: ArrayBuffer, width: number, height: number): Uint8ClampedArray;
-    _RGBA2BGRA(data: ArrayBuffer, width: number, height: number): Uint8ClampedArray;
-    _isMacPlatform(): boolean;
+    private _writefile;
+    private _writeLog;
+    private _onUserRenderCallback;
+    private _initImageData;
+    private _YUV2RGBA;
+    private _BGRA2RGBA;
+    private _RGBA2BGRA;
+    private _isMacPlatform;
+    private _setRemoteVideoBuffer;
 }
 export default TRTCCloud;
 export * from './LocalMediaTranscoder';

package/liteav/trtc.js

@@ -130,9 +130,6 @@ const getComponentNO = function () {
         case 'TUIRoom':
             componentNO = '5';
             break;
-        case 'TUIRoomKit':
-            componentNO = '16';
-            break;
         default:
             break;
     }
@@ -154,15 +151,14 @@ let oriRtcCloud = null;
  */
 class TRTCCloud extends events_1.EventEmitter {
     // 兼容 8.0 以下版本, 记录内部状态变量 --end
-    constructor() {
+    constructor(config) {
         super();
         const componentNO = getComponentNO();
-        oriRtcCloud = new trtc.NodeRTCCloud(pkg.version, componentNO);
+        oriRtcCloud = new trtc.NodeRTCCloud(Object.assign({ jsVersion: pkg.version, componentNO }, config));
         this.rtcCloud = Object.assign({}, oriRtcCloud, {
             onlineLog: undefined
         });
         this.videoRendererMap = new Map();
-        this.firstVideoFrameList = [];
         this.playStreamType = trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig;
         this.pixelFormat = trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420;
         this.pixelLength = 1.5;
@@ -187,7 +183,7 @@ class TRTCCloud extends events_1.EventEmitter {
         this.isScreenCapturing = false;
         this.isCaptureLocalVideoEnabled = false;
         this.videoProcessBufferType = trtc_define_1.TRTCVideoBufferType.TRTCVideoBufferType_Buffer;
-        this.videoProcessPixelFormat = trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_RGBA32;
+        this.videoProcessPixelFormat = trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420;
         this.initEventHandler();
         console.log('trtc:constructor pixelFormat:' + this.pixelFormat + '|sdk version:' + pkg.version +
             '|native sdk version:' + this.rtcCloud.getSDKVersion());
@@ -206,9 +202,9 @@ class TRTCCloud extends events_1.EventEmitter {
      * 创建 TRTCCloud 对象单例
      * @returns {TRTCCloud}
      */
-    static getTRTCShareInstance() {
+    static getTRTCShareInstance(config) {
         if (!trtcCloudInstance) {
-            trtcCloudInstance = new TRTCCloud();
+            trtcCloudInstance = new TRTCCloud(config);
         }
         return trtcCloudInstance;
     }
@@ -255,7 +251,6 @@ class TRTCCloud extends events_1.EventEmitter {
      * 清理资源
      */
     destroy() {
-        this.firstVideoFrameList = [];
         this.playAudioEffectIdList = [];
         this.remoteFillModeMap.clear();
         // this.destroyLocalMediaTranscoder();
@@ -478,6 +473,7 @@ class TRTCCloud extends events_1.EventEmitter {
      * @event TRTCCallback#onWarning
      * @param {Number} warningCode - 警告码
      * @param {String} warningMsg  - 警告信息
+     * @param {Any} extra - 补充信息
      */
     handleOnWarning(warningCode, warningMsg, extra) {
         this.fire('onWarning', warningCode, warningMsg, extra);
@@ -525,7 +521,6 @@ class TRTCCloud extends events_1.EventEmitter {
      * @param {Number} reason - 离开房间原因，0：主动调用 exitRoom 退房；1：被服务器踢出当前房间；2：当前房间整个被解散。
      */
     handleOnExitRoom(reason) {
-        this.firstVideoFrameList = [];
         this.fire('onExitRoom', reason);
     }
     /**
@@ -635,11 +630,6 @@ class TRTCCloud extends events_1.EventEmitter {
      */
     handleOnUserVideoAvailable(userId, available) {
         if (available == 0) {
-            if (this._isMacPlatform()) {
-                this.firstVideoFrameList = this.firstVideoFrameList.filter(function (item) {
-                    return !(userId === item.uid && item.type !== trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub);
-                });
-            }
             const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
             if (remoteUserVideoBuffers) {
                 if (remoteUserVideoBuffers.big) {
@@ -666,11 +656,6 @@ class TRTCCloud extends events_1.EventEmitter {
      */
     handleOnUserSubStreamAvailable(userId, available) {
         if (available == 0) {
-            if (this._isMacPlatform()) {
-                this.firstVideoFrameList = this.firstVideoFrameList.filter(function (item) {
-                    return !(userId === item.uid && item.type === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub);
-                });
-            }
             if (screenVideoBufferMap.has(userId)) {
                 const targetVideoBuffer = screenVideoBufferMap.get(userId);
                 if (targetVideoBuffer && targetVideoBuffer.buffer) {
@@ -707,6 +692,9 @@ class TRTCCloud extends events_1.EventEmitter {
      * @param {Number} height     - 画面高度
      */
     handleOnFirstVideoFrame(userId, streamType, width, height) {
+        if (userId) {
+            this._setRemoteVideoBuffer(userId, streamType);
+        }
         this.fire('onFirstVideoFrame', userId, streamType, width, height);
     }
     /**
@@ -1808,9 +1796,6 @@ class TRTCCloud extends events_1.EventEmitter {
         const key = this.getKey(LOCAL_USER_VIDEO_ID, trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig);
         this._destroyRenderer(key, null);
         this.rtcCloud.stopLocalPreview();
-        this.firstVideoFrameList = this.firstVideoFrameList.filter(function (item) {
-            return !('' === item.uid && item.type === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig);
-        });
         if (localVideoBuffer.buffer) {
             this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, 0, 0, localVideoBuffer.pixelFormat, localVideoBuffer.id);
             localVideoBuffer.buffer = null;
@@ -1920,47 +1905,7 @@ class TRTCCloud extends events_1.EventEmitter {
         this._initRenderer(key, views);
         // view 为 null 时，可能启动了自定义渲染，所以 Buffer 还是要创建，否则自定义渲染就拿不到数据；
         // view 非 null 时，当然必须创建 Buffer
-        const videoBufferInfo = new trtc_define_1.VideoBufferInfo({
-            userId: userId,
-            id: (0, util_1.generateUniqueId)(),
-            streamType: streamType,
-            width: DEFAULT_VIDEO_WIDTH,
-            height: DEFAULT_VIDEO_HEIGHT,
-            pixelFormat: this.pixelFormat,
-        });
-        if (streamType !== trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub) {
-            const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
-            if (!remoteUserVideoBuffers) {
-                // Buffer 不存在时才新建，否则只能在 handleVideoSizeChange 事件中重新申请 Buffer
-                if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig) {
-                    remoteVideoBufferMap.set(userId, { big: videoBufferInfo });
-                }
-                else if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall) {
-                    remoteVideoBufferMap.set(userId, { small: videoBufferInfo });
-                }
-                this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat, videoBufferInfo.id);
-            }
-            else {
-                if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig && !remoteUserVideoBuffers.big) {
-                    remoteUserVideoBuffers.big = videoBufferInfo;
-                    this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat, videoBufferInfo.id);
-                }
-                else if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall && !remoteUserVideoBuffers.small) {
-                    remoteUserVideoBuffers.small = videoBufferInfo;
-                    this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat, videoBufferInfo.id);
-                }
-            }
-        }
-        else {
-            // 远端屏幕分享
-            // Buffer 为 null 时才新建，否则只能在 handleVideoSizeChange 事件中重新申请 Buffer
-            let targetVideoBuffer = screenVideoBufferMap.get(userId);
-            if (!targetVideoBuffer || !targetVideoBuffer.buffer) {
-                targetVideoBuffer = videoBufferInfo;
-                this.rtcCloud.setSubVideoBuffer(targetVideoBuffer.userId, targetVideoBuffer.buffer, targetVideoBuffer.streamType, targetVideoBuffer.width, targetVideoBuffer.height, targetVideoBuffer.pixelFormat, targetVideoBuffer.id);
-                screenVideoBufferMap.set(userId, targetVideoBuffer);
-            }
-        }
+        this._setRemoteVideoBuffer(userId, streamType);
         this.addRemoteVideoRenderCallback(userId);
         this.rtcCloud.startRemoteView(userId, streamType);
     }
@@ -2358,29 +2303,7 @@ class TRTCCloud extends events_1.EventEmitter {
      * - TRTCVideoStreamTypeSmall: 小画面视频流
      */
     setRemoteVideoStreamType(userId, streamType) {
-        const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
-        if (remoteUserVideoBuffers) {
-            const videoBufferInfo = new trtc_define_1.VideoBufferInfo({
-                userId: userId,
-                id: (0, util_1.generateUniqueId)(),
-                streamType: streamType,
-                width: DEFAULT_VIDEO_WIDTH,
-                height: DEFAULT_VIDEO_HEIGHT,
-                pixelFormat: this.pixelFormat,
-            });
-            if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig && !remoteUserVideoBuffers.big) {
-                remoteUserVideoBuffers.big = videoBufferInfo;
-                this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat, videoBufferInfo.id);
-            }
-            else if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall && !remoteUserVideoBuffers.small) {
-                remoteUserVideoBuffers.small = videoBufferInfo;
-                this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat, videoBufferInfo.id);
-            }
-            else {
-                videoBufferInfo.buffer = null;
-                videoBufferInfo.id = 0;
-            }
-        }
+        this._setRemoteVideoBuffer(userId, streamType);
         this.rtcCloud.setRemoteVideoStreamType(userId, streamType);
     }
     /**
@@ -3826,9 +3749,6 @@ class TRTCCloud extends events_1.EventEmitter {
         const key = this.getKey(CAMERA_DEVICE_TEST_VIEW, trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig);
         this._destroyRenderer(key, null);
         this.rtcCloud.stopCameraDeviceTest();
-        this.firstVideoFrameList = this.firstVideoFrameList.filter(function (item) {
-            return !('' === item.uid && item.type === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig);
-        });
         if (cameraTestVideoBuffer.buffer) {
             this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, 0, 0, cameraTestVideoBuffer.pixelFormat, cameraTestVideoBuffer.id);
             cameraTestVideoBuffer.buffer = null;
@@ -4041,7 +3961,6 @@ class TRTCCloud extends events_1.EventEmitter {
      * @ignore
      */
     initPluginManager(options) {
-        const defaultPixelFormat = !this._isMacPlatform() ? trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_RGBA32 : trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_BGRA32;
         if (options) {
             if (options.bufferType && options.bufferType === trtc_define_1.TRTCVideoBufferType.TRTCVideoBufferType_Texture) {
                 this.videoProcessBufferType = options.bufferType;
@@ -4053,12 +3972,12 @@ class TRTCCloud extends events_1.EventEmitter {
                     this.videoProcessPixelFormat = options.pixelFormat;
                 }
                 else {
-                    this.videoProcessPixelFormat = defaultPixelFormat;
+                    this.videoProcessPixelFormat = trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420;
                 }
             }
         }
         else {
-            this.videoProcessPixelFormat = defaultPixelFormat;
+            this.videoProcessPixelFormat = trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420;
             this.videoProcessBufferType = trtc_define_1.TRTCVideoBufferType.TRTCVideoBufferType_Buffer;
         }
         this.rtcCloud.initializePluginManager(this.videoProcessPixelFormat, this.videoProcessBufferType);
@@ -4137,18 +4056,6 @@ class TRTCCloud extends events_1.EventEmitter {
         return this.videoRendererMap.get(key);
     }
     _onRenderFrame(uid, type, width, height, timestamp, rotation, data) {
-        // 由于 mac 监听自定义渲染回调后不会回调 onFirstVideoFrame ，所以在这里自己实现回调 onFirstVideoFrame
-        if (this._isMacPlatform()) {
-            setImmediate(() => {
-                const index = this.firstVideoFrameList.findIndex(function (item) {
-                    return uid === item.uid && type === item.type;
-                });
-                if (index === -1) {
-                    this.emit('onFirstVideoFrame', uid, type, width, height);
-                    this.firstVideoFrameList.push({ uid: uid, type: type });
-                }
-            });
-        }
         if (uid.length == 0 && this.isCaptureLocalVideoEnabled) {
             this.fire(LOCAL_VIDEO_DATA, {
                 uid: '', type, rotation, timestamp,
@@ -4242,12 +4149,33 @@ class TRTCCloud extends events_1.EventEmitter {
             });
         }
         else {
-            console.warn(`trtc: no video renderer for user: ${uid} streamType:${type}`);
+            // 创建渲染器时 view 参数传了 null，只推流或者拉流，本地不渲染
         }
     }
-    _createVideoRenderer(view, key) {
-        view.innerHTML = ''; // 事先清空一下，避免画面叠加
-        const renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, view);
+    _checkAndDeleteExistingRenderer(view, key) {
+        this.videoRendererMap.forEach((rendererMap, existingKey) => {
+            rendererMap.forEach((renderer, node, map) => {
+                if (node === view && existingKey !== key) {
+                    try {
+                        console.warn(`trtc: existing video renderer for ${existingKey}, destroy and create for ${key}.`, view);
+                        renderer.destroy();
+                        map.delete(node);
+                    }
+                    catch (err) {
+                        console.error("trtc: _checkAndDeleteExistingRenderer destroy render error:", err);
+                    }
+                }
+            });
+        });
+    }
+    _createVideoRenderer(view, key, options) {
+        // 事先清空一下，避免画面叠加
+        if (view.childElementCount > 0) {
+            console.warn("trtc: clear HTML element content:", view);
+        }
+        this._checkAndDeleteExistingRenderer(view, key);
+        view.innerHTML = '';
+        const renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, view, options);
         if (key === this.getKey(LOCAL_USER_VIDEO_ID, trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig)) {
             renderer.setContentMode(this.localFillMode);
         }
@@ -4260,30 +4188,55 @@ class TRTCCloud extends events_1.EventEmitter {
         return renderer;
     }
     _initRenderer(key, views) {
+        const onContextLost = (key, view) => {
+            const rendererMap = this.videoRendererMap.get(key);
+            if (rendererMap) {
+                const render = this._createVideoRenderer(view, key, { type: Renderer_1.RenderType.Video });
+                rendererMap === null || rendererMap === void 0 ? void 0 : rendererMap.set(view, render);
+                this.videoRendererMap.set(key, rendererMap);
+            }
+        };
+        const validViews = views.filter(view => {
+            const isValid = view && view instanceof HTMLElement;
+            if (!isValid) {
+                console.warn("trtc: create renderer failed due to invalid HTMLElement", view);
+            }
+            return isValid;
+        });
         let rendererMap = this.videoRendererMap.get(key);
         if (rendererMap) {
-            rendererMap.forEach((value, key, map) => {
-                if (views.indexOf(key) === -1) {
+            rendererMap.forEach((value, innerKey, map) => {
+                if (validViews.indexOf(innerKey) === -1 || !value.isValid(innerKey)) {
                     try {
                         value.destroy();
-                        map.delete(key);
+                        map.delete(innerKey);
                     }
                     catch (err) {
                         console.error("trtc:_initRenderer destroy render error:", err);
                     }
                 }
             });
-            views.forEach((view) => {
+            validViews.forEach((view) => {
                 if (!(rendererMap === null || rendererMap === void 0 ? void 0 : rendererMap.has(view))) {
-                    const renderer = this._createVideoRenderer(view, key);
+                    const renderer = this._createVideoRenderer(view, key, {
+                        type: Renderer_1.RenderType.WebGL,
+                        onContextLost: () => {
+                            onContextLost(key, view);
+                        },
+                    });
                     rendererMap === null || rendererMap === void 0 ? void 0 : rendererMap.set(view, renderer);
                 }
             });
         }
         else {
             rendererMap = new Map();
-            views.forEach((view) => {
-                const renderer = this._createVideoRenderer(view, key);
+            validViews.forEach((view) => {
+                const renderer = this._createVideoRenderer(view, key, {
+                    type: Renderer_1.RenderType.WebGL,
+                    onContextLost: () => {
+                        onContextLost(key, view);
+                    },
+                });
                 rendererMap === null || rendererMap === void 0 ? void 0 : rendererMap.set(view, renderer);
             });
         }
@@ -4440,6 +4393,57 @@ class TRTCCloud extends events_1.EventEmitter {
     _isMacPlatform() {
         return process.platform == 'darwin';
     }
+    _setRemoteVideoBuffer(userId, streamType) {
+        const videoBufferInfo = new trtc_define_1.VideoBufferInfo({
+            userId: userId,
+            id: (0, util_1.generateUniqueId)(),
+            streamType: streamType,
+            width: DEFAULT_VIDEO_WIDTH,
+            height: DEFAULT_VIDEO_HEIGHT,
+            pixelFormat: this.pixelFormat,
+        });
+        const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
+        let screenVideoBuffer = screenVideoBufferMap.get(userId);
+        switch (streamType) {
+            case trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig:
+                if (!remoteUserVideoBuffers) {
+                    remoteVideoBufferMap.set(userId, { big: videoBufferInfo });
+                }
+                else if (!remoteUserVideoBuffers.big) {
+                    remoteUserVideoBuffers.big = videoBufferInfo;
+                }
+                else {
+                    videoBufferInfo.buffer = null;
+                }
+                videoBufferInfo.buffer && this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat, videoBufferInfo.id);
+                break;
+            case trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall:
+                if (!remoteUserVideoBuffers) {
+                    remoteVideoBufferMap.set(userId, { small: videoBufferInfo });
+                }
+                else if (!remoteUserVideoBuffers.small) {
+                    remoteUserVideoBuffers.small = videoBufferInfo;
+                }
+                else {
+                    videoBufferInfo.buffer = null;
+                }
+                videoBufferInfo.buffer && this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat, videoBufferInfo.id);
+                break;
+            case trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub:
+                if (!screenVideoBuffer) {
+                    screenVideoBuffer = videoBufferInfo;
+                    this.rtcCloud.setSubVideoBuffer(screenVideoBuffer.userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, screenVideoBuffer.width, screenVideoBuffer.height, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
+                    screenVideoBufferMap.set(userId, screenVideoBuffer);
+                }
+                else {
+                    videoBufferInfo.buffer = null;
+                }
+                break;
+            default:
+                videoBufferInfo.buffer = null;
+                break;
+        }
+    }
 }
 class VideoRenderCallback {
     constructor() {

package/liteav/trtc_define.d.ts

@@ -142,9 +142,9 @@ export declare class TRTCImageBuffer {
  * @param {TRTCImageBuffer}             thumbBGRA  - 缩略图内容
  * @param {TRTCImageBuffer}             iconBGRA   - 图标内容
  * @param {Boolean}                     isMinimizeWindow - 是否最小化窗口
- * @param {Number}                      width - 屏幕/窗口宽，单位:像素。目前仅支持微软 `Windows` 操作系统。
- * @param {Number}                      height - 屏幕/窗口高，单位:像素。目前仅支持微软 `Windows` 操作系统。
- * @param {Boolean}                     isMainScreen - 是否为主显示屏。目前仅支持微软 `Windows` 操作系统。
+ * @param {Number}                      width - 屏幕/窗口宽，单位:像素。
+ * @param {Number}                      height - 屏幕/窗口高，单位:像素。
+ * @param {Boolean}                     isMainScreen - 是否为主显示屏。
  *
  */
 export declare class TRTCScreenCaptureSourceInfo {
@@ -822,3 +822,16 @@ export declare class VideoBufferInfo {
         pixelFormat: TRTCVideoPixelFormat;
     });
 }
+export interface TRTCInitConfig {
+    networkProxy?: {
+        host: string;
+        port: number;
+        username: string;
+        password: string;
+        config: {
+            supportHttps: boolean;
+            supportTcp: boolean;
+            supportUdp: boolean;
+        };
+    };
+}

package/liteav/trtc_define.js

@@ -553,9 +553,9 @@ exports.TRTCImageBuffer = TRTCImageBuffer;
  * @param {TRTCImageBuffer}             thumbBGRA  - 缩略图内容
  * @param {TRTCImageBuffer}             iconBGRA   - 图标内容
  * @param {Boolean}                     isMinimizeWindow - 是否最小化窗口
- * @param {Number}                      width - 屏幕/窗口宽，单位:像素。目前仅支持微软 `Windows` 操作系统。
- * @param {Number}                      height - 屏幕/窗口高，单位:像素。目前仅支持微软 `Windows` 操作系统。
- * @param {Boolean}                     isMainScreen - 是否为主显示屏。目前仅支持微软 `Windows` 操作系统。
+ * @param {Number}                      width - 屏幕/窗口宽，单位:像素。
+ * @param {Number}                      height - 屏幕/窗口高，单位:像素。
+ * @param {Boolean}                     isMainScreen - 是否为主显示屏。
  *
  */
 class TRTCScreenCaptureSourceInfo {

package/liteav/validate-util.d.ts

@@ -1,4 +1,5 @@
 export declare function isNumber(args: any): boolean;
+export declare function isString(args: any): boolean;
 export declare function isNull(args: any): boolean;
 export declare function isUndefined(args: any): boolean;
 export declare function isExist(args: any): boolean;

package/liteav/validate-util.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isExist = exports.isUndefined = exports.isNull = exports.isNumber = void 0;
+exports.isExist = exports.isUndefined = exports.isNull = exports.isString = exports.isNumber = void 0;
 function isNumber(args) {
     return typeof args === 'number';
 }
 exports.isNumber = isNumber;
+function isString(args) {
+    return typeof args === 'string';
+}
+exports.isString = isString;
 function isNull(args) {
     return args === null;
 }

package/liteav/vod_player.js

@@ -143,7 +143,12 @@ class VodPlayer extends events_1.EventEmitter {
             this.destroyRender();
         }
         view.innerHTML = ''; // 事先清空一下，避免画面叠加
-        this.renderer = (0, Renderer_1.createRenderer)(trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420, view);
+        this.renderer = (0, Renderer_1.createRenderer)(trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420, view, {
+            type: Renderer_1.RenderType.WebGL,
+            onContextLost: () => {
+                this.renderer = (0, Renderer_1.createRenderer)(trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420, view, { type: Renderer_1.RenderType.Video });
+            },
+        });
     }
     destroyRender() {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trtc-electron-sdk",
-  "version": "11.2.118-beta.2",
+  "version": "11.3.502-alpha.0",
   "description": "trtc electron sdk",
   "main": "./liteav/trtc.js",
   "types": "./liteav/trtc.d.ts",
@@ -15,7 +15,11 @@
     "semver": "^6.0.0",
     "signale": "^1.4.0",
     "yuv-buffer": "^1.0.0",
-    "yuv-canvas": "^1.2.6"
+    "yuv-canvas": "^1.2.6",
+    "hpagent": "^1.2.0"
+  },
+  "peerDependencies": {
+    "electron": ">=4.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
@@ -35,6 +39,7 @@
   },
   "scripts": {
     "download": "node ./scripts/download.js",
+    "postdownload": "node ./scripts/postinstall.js",
     "install": "npm run download",
     "build": "npm run build:types && npm run build:js && npm run copy:types",
     "build:types": "rimraf ./types && tsc -p dtsconfig.json",

package/scripts/download.js

@@ -4,6 +4,7 @@ const fs = require('fs-extra');
 const rimraf = require('rimraf');
 const signale = require('signale');
 const { exec } = require('child_process');
+const { HttpsProxyAgent } = require('hpagent');
 
 const {
     readCliArgv,
@@ -11,6 +12,7 @@ const {
     detectOS,
     detectOwnVersion,
     detectOwnName,
+    readProxyUrlFromEnv,
 } = require('./utils');
 const { Platform } = require('./constant');
 
@@ -68,10 +70,24 @@ const main = () => {
         signale.info('Download Url =', downloadUrl, '\n');
 
         signale.pending('Downloading C++ addon Electron SDK...\n');
-        download(downloadUrl, outputDir, {
+        const downloadOptions = {
             strip: 0,
             extract: true
-        }).then(() => {
+        };
+        const proxyUrl = readProxyUrlFromEnv(downloadUrl);
+        if (proxyUrl) {
+            downloadOptions.agent = {
+                https: new HttpsProxyAgent({
+                    keepAlive: true,
+                    keepAliveMsecs: 1000,
+                    maxSockets: 256,
+                    maxFreeSockets: 256,
+                    scheduling: 'lifo',
+                    proxy: proxyUrl
+                })
+            }
+        }
+        download(downloadUrl, outputDir, downloadOptions).then(() => {
             signale.success(`Download finished - ${platform}`);
 
             fs.copySync(
@@ -126,9 +142,6 @@ const main = () => {
                         );
                         signale.success(`copy success! - mac ${anotherArch}`);
 
-                        // Mac 下完成文件下载后，执行该命令，同步文件到 Electron 目录下
-                        exec(`rsync -a ../../node_modules/trtc-electron-sdk/build/mac-framework/${archType}/ ../../node_modules/electron/dist/Electron.app/Contents/Frameworks`);
-
                         rimraf.sync(outputDir);
                     })
                     .catch(err => {
@@ -180,4 +193,21 @@ const main = () => {
     });
 };
 
+
+// function runScript(scriptPath, callback) {
+//     var invoked = false;
+//     var forkProcess = fork(scriptPath);
+//     forkProcess.on('error', function (err) {
+//         if (invoked) return;
+//         invoked = true;
+//         callback(err);
+//     });
+//     forkProcess.on('exit', function (code) {
+//         if (invoked) return;
+//         invoked = true;
+//         var err = code === 0 ? null : new Error('exit code ' + code);
+//         callback(err);
+//     });
+// }
+
 main();

package/scripts/postinstall.js

@@ -0,0 +1,40 @@
+const { exec } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const { arch, platform } = process;
+
+function rsync() {
+  if (platform === 'darwin') {
+    const sourcePath = path.join(__dirname, `../../trtc-electron-sdk/build/mac-framework/${arch}/`);
+    const targetPath = path.join(__dirname, '../../electron/dist/Electron.app/Contents/Frameworks');
+    console.log(`sourcePath: ${sourcePath}`);
+    console.log(`targetPath: ${targetPath}`);
+
+    if (targetPath.indexOf("node_modules") === -1) {
+      // SDK 本身安装，不用同步动态库，直接退出
+      console.log(`trtc-electron-sdk self install do not need 'rsync'`);
+      return;
+    }
+
+    if (fs.existsSync(targetPath)) {
+      const command = `rsync -a ${sourcePath} ${targetPath}`;
+      console.log(command);
+      exec(command);
+    } else {
+      const errorMessage = `
+      'trtc-electron-sdk' 安装未完成，请先确认 'Electron' 已安装，再执行 'npm install trtc-electron-sdk' 命令重新安装一次。
+      Failed to install trtc-electron-sdk correctly, please make sure that 'Electron' has been installed, then run 'npm install trtc-electron-sdk' command to try again.
+
+      more detail:
+      trtc-electron-sdk postinstall cwd: ${process.cwd()} 
+      __dirname: ${__dirname}
+      sourcePath: ${sourcePath}
+      targetPath: ${targetPath}
+      `;
+      console.error(errorMessage);
+      // throw new Error(errorMessage);
+    } 
+  }
+}
+
+rsync();

package/scripts/utils.js

@@ -27,6 +27,13 @@ module.exports.readCliArgv = function() {
   return newArgv;
 };
 
+module.exports.readProxyUrlFromEnv = function(downloadUrl) {
+  if (downloadUrl.indexOf('https') === 0) {
+    return process.env.https_proxy || ''
+  }
+  return process.env.http_proxy || '';
+}
+
 module.exports.readArgvFromNpmEnv = function() {
   const result = {};
   if (process.env.npm_config_trtc_electron_arch) {