trtc-electron-sdk 10.3.8-beta.12 → 10.3.8-beta.13

package/liteav/Render/util.d.ts

@@ -44,3 +44,4 @@ export declare function calcVideoStyle(options?: {
 };
 export declare const config: Config;
 export declare function allocBuffer(length: number, userId?: string, streamType?: TRTCVideoStreamType): Buffer;
+export declare function generateUniqueId(): number;

package/liteav/Render/util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allocBuffer = exports.config = exports.calcVideoStyle = exports.calcCanvasStyle = exports.calcScaleRate = exports.isNeedKeepWidthAndHeight = exports.Config = void 0;
+exports.generateUniqueId = exports.allocBuffer = exports.config = exports.calcVideoStyle = exports.calcCanvasStyle = exports.calcScaleRate = exports.isNeedKeepWidthAndHeight = exports.Config = void 0;
 /**
  * 配置对象, 可用来打开 debug 模式
  *
@@ -135,3 +135,7 @@ function allocBuffer(length, userId, streamType) {
     return null;
 }
 exports.allocBuffer = allocBuffer;
+function generateUniqueId() {
+    return Date.now() * 1000 + Math.floor(Math.random() * 1000);
+}
+exports.generateUniqueId = generateUniqueId;

package/liteav/trtc.d.ts

@@ -866,6 +866,19 @@ declare class TRTCCloud extends EventEmitter {
      * 3.2 停止本地摄像头采集和预览
      */
     stopLocalPreview(): void;
+    /**
+     * 3.3 修改本地摄像头预览的 HTML 元素
+     *
+     * 本接口用于切换显示区域的交互场景中，修改本地摄像头预览的 HTML 元素。
+     *
+     * 注意：必须在调用 [startLocalPreview()]{@link TRTCCloud#startLocalPreview} 接口开启本地摄像头采集后，调用本接口才会生效。
+     * - 如果用户调用 `startLocalPreview(view)` 接口开启了摄像头采集，则通过此接口可以修改摄像头采集视频渲染的 HTML 元素。
+     * - 如果用户调用 `startLocalPreview(null)` 接口开启了摄像头采集，但未开启本地预览，支持调用此接口开启预览。
+     *
+     * @param {HTMLElement|null} view - 接收本地摄像头采集视频渲染的 HTML 元素，传入 `null` 结束本地摄像头采集视频的预览。
+     *  - 传入的 HTML 元素必须是块元素，比如：`div`
+     */
+    updateLocalView(view: HTMLElement | null): void;
     /**
      * 3.3 暂停/恢复发布本地的视频流
      *
@@ -901,6 +914,20 @@ declare class TRTCCloud extends EventEmitter {
      * @param {TRTCVideoStreamType} streamType - 视频流类型
      */
     stopRemoteView(userId: string, streamType?: TRTCVideoStreamType): void;
+    /**
+     * 3.7 修改远端视频渲染的 HTML 元素
+     *
+     * 本接口用于切换显示区域的交互场景中，修改远端视频渲染的 HTML 元素。
+     *
+     * 注意：必须调用 [startRemoteView()]{@link TRTCCloud#startRemoteView} 订阅了远端视频流之后，调用此接口才会生效。
+     *
+     * @param {String} userId - 远端视频流的用户 ID
+     * @param {HTMLElement|null} view - 接受远端视频流渲染的 HTML 元素，传入 null 结束远端视频的渲染
+     *  - 传入的 HTML 元素必须时块元素，例如：div
+     * @param {TRTCVideoStreamType} streamType - 视频流类型
+     *
+     */
+    updateRemoteView(userId: string, view: HTMLElement | null, streamType: TRTCVideoStreamType): void;
     /**
      * 3.6 停止显示所有远端视频画面，同时不再拉取该远端用户的视频数据流
      *
@@ -1067,11 +1094,11 @@ declare class TRTCCloud extends EventEmitter {
      * 如果该 userId 没有开启双路编码模式，则此操作无效。
      *
      * @param {String} userId - 用户 ID
-     * @param {TRTCVideoStreamType} type - 视频流类型，即选择看大画面还是小画面，默认为 TRTCVideoStreamTypeBig
+     * @param {TRTCVideoStreamType} streamType - 视频流类型，即选择看大画面还是小画面，默认为 TRTCVideoStreamTypeBig
      * - TRTCVideoStreamTypeBig  : 大画面视频流
      * - TRTCVideoStreamTypeSmall: 小画面视频流
      */
-    setRemoteVideoStreamType(userId: string, type: TRTCVideoStreamType): void;
+    setRemoteVideoStreamType(userId: string, streamType: TRTCVideoStreamType): void;
     /**
      * 3.22 视频画面截图
      *

package/liteav/trtc.js

@@ -19,9 +19,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const events_1 = require("events");
 const Render_1 = __importDefault(require("./Render"));
-const util_1 = require("./Render/util");
 // @ts-ignore
 const yuv_buffer_1 = __importDefault(require("yuv-buffer"));
+const util_1 = require("./Render/util");
 // @ts-ignore
 const YCbCr_1 = __importDefault(require("yuv-canvas/src/YCbCr"));
 const trtc_define_1 = require("./trtc_define");
@@ -36,6 +36,7 @@ const CAMERA_DEVICE_TEST_ID = 'camera_device_test';
 const DEFAULT_VIDEO_WIDTH = 8;
 const DEFAULT_VIDEO_HEIGHT = 8;
 const localVideoBuffer = {
+    id: 0,
     userId: '',
     buffer: null,
     streamType: trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig,
@@ -44,6 +45,7 @@ const localVideoBuffer = {
     pixelFormat: trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420,
 };
 const screenVideoBuffer = {
+    id: 0,
     userId: '',
     buffer: null,
     streamType: trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub,
@@ -52,6 +54,7 @@ const screenVideoBuffer = {
     pixelFormat: trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420,
 };
 const cameraTestVideoBuffer = {
+    id: 0,
     userId: CAMERA_DEVICE_TEST_ID,
     buffer: null,
     streamType: trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig,
@@ -622,10 +625,16 @@ class TRTCCloud extends events_1.EventEmitter {
                     return !(userId === item.uid && item.type !== trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub);
                 });
             }
-            const videoBufferInfo = remoteVideoBufferMap.get(userId);
-            if (videoBufferInfo) {
-                this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, 0, 0, videoBufferInfo.pixelFormat);
-                videoBufferInfo.buffer = null;
+            const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
+            if (remoteUserVideoBuffers) {
+                if (remoteUserVideoBuffers.big) {
+                    this.rtcCloud.setRemoteVideoBuffer(userId, remoteUserVideoBuffers.big.buffer, remoteUserVideoBuffers.big.streamType, 0, 0, remoteUserVideoBuffers.big.pixelFormat, remoteUserVideoBuffers.big.id);
+                    remoteUserVideoBuffers.big.buffer = null;
+                }
+                if (remoteUserVideoBuffers.small) {
+                    this.rtcCloud.setRemoteVideoBuffer(userId, remoteUserVideoBuffers.small.buffer, remoteUserVideoBuffers.small.streamType, 0, 0, remoteUserVideoBuffers.small.pixelFormat, remoteUserVideoBuffers.small.id);
+                    remoteUserVideoBuffers.small.buffer = null;
+                }
                 remoteVideoBufferMap.delete(userId);
             }
         }
@@ -648,8 +657,9 @@ class TRTCCloud extends events_1.EventEmitter {
                 });
             }
             if (screenVideoBuffer.buffer && screenVideoBuffer.userId === userId) {
-                this.rtcCloud.setSubVideoBuffer(userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat);
+                this.rtcCloud.setSubVideoBuffer(userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
                 screenVideoBuffer.buffer = null;
+                screenVideoBuffer.id = 0;
                 screenVideoBuffer.userId = '';
             }
         }
@@ -1087,10 +1097,11 @@ class TRTCCloud extends events_1.EventEmitter {
             screenVideoBuffer.userId = '';
             screenVideoBuffer.streamType = this.screenCaptureStreamType;
             screenVideoBuffer.buffer = (0, util_1.allocBuffer)(DEFAULT_VIDEO_WIDTH * DEFAULT_VIDEO_HEIGHT * this.pixelLength, screenVideoBuffer.userId, screenVideoBuffer.streamType);
+            screenVideoBuffer.id = (0, util_1.generateUniqueId)();
             screenVideoBuffer.pixelFormat = this.pixelformate;
             screenVideoBuffer.width = DEFAULT_VIDEO_WIDTH;
             screenVideoBuffer.height = DEFAULT_VIDEO_HEIGHT;
-            this.rtcCloud.setSubVideoBuffer('', screenVideoBuffer.buffer, screenVideoBuffer.streamType, screenVideoBuffer.width, screenVideoBuffer.height, screenVideoBuffer.pixelFormat);
+            this.rtcCloud.setSubVideoBuffer('', screenVideoBuffer.buffer, screenVideoBuffer.streamType, screenVideoBuffer.width, screenVideoBuffer.height, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
             console.debug('trtc:onScreenCaptureStarted alloc add screenVideoBuffer', screenVideoBuffer);
         }
         this.fire('onScreenCaptureStarted');
@@ -1123,8 +1134,9 @@ class TRTCCloud extends events_1.EventEmitter {
         console.debug('trtc:onScreenCaptureStopped', reason);
         if (this.isScreenCapturing) {
             if (screenVideoBuffer.buffer) {
-                this.rtcCloud.setSubVideoBuffer('', screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat);
+                this.rtcCloud.setSubVideoBuffer('', screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
                 screenVideoBuffer.buffer = null;
+                screenVideoBuffer.id = 0;
                 console.debug('trtc:onScreenCaptureStopped delete screenVideoBuffer', screenVideoBuffer);
             }
             this.isScreenCapturing = false;
@@ -1222,14 +1234,27 @@ class TRTCCloud extends events_1.EventEmitter {
         console.debug('trtc:handleVideoSizeChange', userId, streamType, width, height);
         if (userId && userId !== CAMERA_DEVICE_TEST_ID) {
             if (streamType !== trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub) {
-                const videoBufferInfo = remoteVideoBufferMap.get(userId);
-                if (videoBufferInfo) {
-                    if (videoBufferInfo.width !== width || videoBufferInfo.height !== height) {
-                        videoBufferInfo.buffer = (0, util_1.allocBuffer)(width * height * this.pixelLength, userId, streamType);
-                        videoBufferInfo.width = width;
-                        videoBufferInfo.height = height;
-                        videoBufferInfo.pixelFormat = this.pixelformate;
-                        this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, streamType, width, height, videoBufferInfo.pixelFormat);
+                const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
+                if (remoteUserVideoBuffers) {
+                    if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig && remoteUserVideoBuffers.big) {
+                        if (remoteUserVideoBuffers.big.width !== width || remoteUserVideoBuffers.big.height !== height) {
+                            remoteUserVideoBuffers.big.buffer = (0, util_1.allocBuffer)(width * height * this.pixelLength, userId, streamType);
+                            remoteUserVideoBuffers.big.id = (0, util_1.generateUniqueId)();
+                            remoteUserVideoBuffers.big.width = width;
+                            remoteUserVideoBuffers.big.height = height;
+                            remoteUserVideoBuffers.big.pixelFormat = this.pixelformate;
+                            this.rtcCloud.setRemoteVideoBuffer(userId, remoteUserVideoBuffers.big.buffer, streamType, width, height, remoteUserVideoBuffers.big.pixelFormat, remoteUserVideoBuffers.big.id);
+                        }
+                    }
+                    else if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall && remoteUserVideoBuffers.small) {
+                        if (remoteUserVideoBuffers.small.width !== width || remoteUserVideoBuffers.small.height !== height) {
+                            remoteUserVideoBuffers.small.buffer = (0, util_1.allocBuffer)(width * height * this.pixelLength, userId, streamType);
+                            remoteUserVideoBuffers.small.id = (0, util_1.generateUniqueId)();
+                            remoteUserVideoBuffers.small.width = width;
+                            remoteUserVideoBuffers.small.height = height;
+                            remoteUserVideoBuffers.small.pixelFormat = this.pixelformate;
+                            this.rtcCloud.setRemoteVideoBuffer(userId, remoteUserVideoBuffers.small.buffer, streamType, width, height, remoteUserVideoBuffers.small.pixelFormat, remoteUserVideoBuffers.small.id);
+                        }
                     }
                 }
                 else {
@@ -1240,10 +1265,11 @@ class TRTCCloud extends events_1.EventEmitter {
                 // 远端用户屏幕分享
                 if (screenVideoBuffer.width !== width || screenVideoBuffer.height !== height) {
                     screenVideoBuffer.buffer = (0, util_1.allocBuffer)(width * height * this.pixelLength, userId, streamType);
+                    screenVideoBuffer.id = (0, util_1.generateUniqueId)();
                     screenVideoBuffer.width = width;
                     screenVideoBuffer.height = height;
                     screenVideoBuffer.pixelFormat = this.pixelformate;
-                    this.rtcCloud.setSubVideoBuffer(userId, screenVideoBuffer.buffer, streamType, width, height, screenVideoBuffer.pixelFormat);
+                    this.rtcCloud.setSubVideoBuffer(userId, screenVideoBuffer.buffer, streamType, width, height, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
                 }
             }
         }
@@ -1253,10 +1279,11 @@ class TRTCCloud extends events_1.EventEmitter {
                 // 本地屏幕分享
                 if (screenVideoBuffer.width !== width || screenVideoBuffer.height !== height) {
                     screenVideoBuffer.buffer = (0, util_1.allocBuffer)(width * height * this.pixelLength, screenVideoBuffer.userId, streamType);
+                    screenVideoBuffer.id = (0, util_1.generateUniqueId)();
                     screenVideoBuffer.width = width;
                     screenVideoBuffer.height = height;
                     screenVideoBuffer.pixelFormat = this.pixelformate;
-                    this.rtcCloud.setSubVideoBuffer('', screenVideoBuffer.buffer, screenVideoBuffer.streamType, width, height, screenVideoBuffer.pixelFormat);
+                    this.rtcCloud.setSubVideoBuffer('', screenVideoBuffer.buffer, screenVideoBuffer.streamType, width, height, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
                 }
             }
             else {
@@ -1264,20 +1291,22 @@ class TRTCCloud extends events_1.EventEmitter {
                     // 摄像头检测
                     if (cameraTestVideoBuffer.width !== width || cameraTestVideoBuffer.height !== height) {
                         cameraTestVideoBuffer.buffer = (0, util_1.allocBuffer)(width * height * this.pixelLength, cameraTestVideoBuffer.userId, streamType);
+                        cameraTestVideoBuffer.id = (0, util_1.generateUniqueId)();
                         cameraTestVideoBuffer.width = width;
                         cameraTestVideoBuffer.height = height;
                         cameraTestVideoBuffer.pixelFormat = this.pixelformate;
-                        this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, width, height, cameraTestVideoBuffer.pixelFormat);
+                        this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, width, height, cameraTestVideoBuffer.pixelFormat, cameraTestVideoBuffer.id);
                     }
                 }
                 else {
                     // 本地摄像头
                     if (localVideoBuffer.width !== width || localVideoBuffer.height !== height) {
                         localVideoBuffer.buffer = (0, util_1.allocBuffer)(width * height * this.pixelLength, localVideoBuffer.userId, streamType);
+                        localVideoBuffer.id = (0, util_1.generateUniqueId)();
                         localVideoBuffer.width = width;
                         localVideoBuffer.height = height;
                         localVideoBuffer.pixelFormat = this.pixelformate;
-                        this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, width, height, localVideoBuffer.pixelFormat);
+                        this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, width, height, localVideoBuffer.pixelFormat, localVideoBuffer.id);
                     }
                 }
             }
@@ -1352,22 +1381,31 @@ class TRTCCloud extends events_1.EventEmitter {
             this._destroyRender(key, null);
         });
         remoteVideoBufferMap.forEach((value, key) => {
-            this.rtcCloud.setRemoteVideoBuffer(key, value.buffer, value.streamType, 0, 0, value.pixelFormat);
-            value.buffer = null;
+            if (value.big) {
+                this.rtcCloud.setRemoteVideoBuffer(key, value.big.buffer, value.big.streamType, 0, 0, value.big.pixelFormat, value.big.id);
+                value.big.buffer = null;
+            }
+            if (value.small) {
+                this.rtcCloud.setRemoteVideoBuffer(key, value.small.buffer, value.small.streamType, 0, 0, value.small.pixelFormat, value.small.id);
+                value.small.buffer = null;
+            }
         });
         remoteVideoBufferMap.clear();
         if (localVideoBuffer.buffer) {
-            this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, 0, 0, localVideoBuffer.pixelFormat);
+            this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, 0, 0, localVideoBuffer.pixelFormat, localVideoBuffer.id);
             localVideoBuffer.buffer = null;
+            localVideoBuffer.id = 0;
         }
         if (screenVideoBuffer.buffer) {
-            this.rtcCloud.setSubVideoBuffer(screenVideoBuffer.userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat);
+            this.rtcCloud.setSubVideoBuffer(screenVideoBuffer.userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
             screenVideoBuffer.buffer = null;
+            screenVideoBuffer.id = 0;
             screenVideoBuffer.userId = '';
         }
         if (cameraTestVideoBuffer.buffer) {
-            this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, 0, 0, cameraTestVideoBuffer.pixelFormat);
+            this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, 0, 0, cameraTestVideoBuffer.pixelFormat, cameraTestVideoBuffer.id);
             cameraTestVideoBuffer.buffer = null;
+            cameraTestVideoBuffer.id = 0;
         }
         this.rtcCloud.exitRoom();
     }
@@ -1652,10 +1690,11 @@ class TRTCCloud extends events_1.EventEmitter {
             if (!localVideoBuffer.buffer) {
                 localVideoBuffer.streamType = trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig;
                 localVideoBuffer.buffer = (0, util_1.allocBuffer)(DEFAULT_VIDEO_WIDTH * DEFAULT_VIDEO_HEIGHT * this.pixelLength, localVideoBuffer.userId, localVideoBuffer.streamType);
+                localVideoBuffer.id = (0, util_1.generateUniqueId)();
                 localVideoBuffer.pixelFormat = this.pixelformate;
                 localVideoBuffer.width = DEFAULT_VIDEO_WIDTH;
                 localVideoBuffer.height = DEFAULT_VIDEO_HEIGHT;
-                this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, localVideoBuffer.width, localVideoBuffer.height, localVideoBuffer.pixelFormat);
+                this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, localVideoBuffer.width, localVideoBuffer.height, localVideoBuffer.pixelFormat, localVideoBuffer.id);
             }
             this.rtcCloud.startLocalPreview();
             this.addLocalVideoRenderCallback();
@@ -1675,8 +1714,35 @@ class TRTCCloud extends events_1.EventEmitter {
             return !('' === item.uid && item.type === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig);
         });
         if (localVideoBuffer.buffer) {
-            this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, 0, 0, localVideoBuffer.pixelFormat);
+            this.rtcCloud.setLocalVideoBuffer(localVideoBuffer.buffer, 0, 0, localVideoBuffer.pixelFormat, localVideoBuffer.id);
             localVideoBuffer.buffer = null;
+            localVideoBuffer.id = 0;
+        }
+    }
+    /**
+     * 3.3 修改本地摄像头预览的 HTML 元素
+     *
+     * 本接口用于切换显示区域的交互场景中，修改本地摄像头预览的 HTML 元素。
+     *
+     * 注意：必须在调用 [startLocalPreview()]{@link TRTCCloud#startLocalPreview} 接口开启本地摄像头采集后，调用本接口才会生效。
+     * - 如果用户调用 `startLocalPreview(view)` 接口开启了摄像头采集，则通过此接口可以修改摄像头采集视频渲染的 HTML 元素。
+     * - 如果用户调用 `startLocalPreview(null)` 接口开启了摄像头采集，但未开启本地预览，支持调用此接口开启预览。
+     *
+     * @param {HTMLElement|null} view - 接收本地摄像头采集视频渲染的 HTML 元素，传入 `null` 结束本地摄像头采集视频的预览。
+     *  - 传入的 HTML 元素必须是块元素，比如：`div`
+     */
+    updateLocalView(view) {
+        let key = this.getKey('local_video', trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig);
+        if (view !== null && view instanceof HTMLElement) {
+            this._initRender(key, view);
+        }
+        else if (view === null) {
+            if (this.streams.has(String(key))) {
+                this._destroyRender(key, null);
+            }
+        }
+        else {
+            console.error('trtc:updateLocalView() called with wrong parameter', view);
         }
     }
     /**
@@ -1730,16 +1796,33 @@ class TRTCCloud extends events_1.EventEmitter {
             const videoBufferInfo = {
                 userId: userId,
                 buffer: (0, util_1.allocBuffer)(DEFAULT_VIDEO_WIDTH * DEFAULT_VIDEO_HEIGHT * this.pixelLength, userId, streamType),
+                id: (0, util_1.generateUniqueId)(),
                 streamType: streamType,
                 width: DEFAULT_VIDEO_WIDTH,
                 height: DEFAULT_VIDEO_HEIGHT,
                 pixelFormat: this.pixelformate,
             };
             if (streamType !== trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub) {
-                if (!remoteVideoBufferMap.get(userId)) {
+                const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
+                if (!remoteUserVideoBuffers) {
                     // Buffer 不存在时才新建，否则只能在 handleVideoSizeChange 事件中重新申请 Buffer
-                    remoteVideoBufferMap.set(userId, videoBufferInfo);
-                    this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, videoBufferInfo.width, videoBufferInfo.height, videoBufferInfo.pixelFormat);
+                    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 {
@@ -1747,7 +1830,7 @@ class TRTCCloud extends events_1.EventEmitter {
                 // Buffer 为 null 时才新建，否则只能在 handleVideoSizeChange 事件中重新申请 Buffer
                 if (!screenVideoBuffer.buffer) {
                     Object.assign(screenVideoBuffer, videoBufferInfo);
-                    this.rtcCloud.setSubVideoBuffer(screenVideoBuffer.userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, screenVideoBuffer.width, screenVideoBuffer.height, screenVideoBuffer.pixelFormat);
+                    this.rtcCloud.setSubVideoBuffer(screenVideoBuffer.userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, screenVideoBuffer.width, screenVideoBuffer.height, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
                 }
             }
             this.addRemoteVideoRenderCallback(userId);
@@ -1772,18 +1855,65 @@ class TRTCCloud extends events_1.EventEmitter {
         let key = this.getKey(userId, streamType);
         this._destroyRender(key, null);
         this.rtcCloud.stopRemoteView(userId, streamType);
-        const videoBufferInfo = remoteVideoBufferMap.get(userId);
-        if (videoBufferInfo && videoBufferInfo.streamType === streamType) {
-            this.rtcCloud.setRemoteVideoBuffer(userId, videoBufferInfo.buffer, videoBufferInfo.streamType, 0, 0, videoBufferInfo.pixelFormat);
-            videoBufferInfo.buffer = null;
-            remoteVideoBufferMap.delete(userId);
+        const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
+        if (remoteUserVideoBuffers && streamType !== trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub) {
+            if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig && remoteUserVideoBuffers.big) {
+                this.rtcCloud.setRemoteVideoBuffer(userId, remoteUserVideoBuffers.big.buffer, remoteUserVideoBuffers.big.streamType, 0, 0, remoteUserVideoBuffers.big.pixelFormat, remoteUserVideoBuffers.big.id);
+                remoteUserVideoBuffers.big.buffer = null;
+                remoteUserVideoBuffers.big = undefined;
+            }
+            else if (streamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall && remoteUserVideoBuffers.small) {
+                this.rtcCloud.setRemoteVideoBuffer(userId, remoteUserVideoBuffers.small.buffer, remoteUserVideoBuffers.small.streamType, 0, 0, remoteUserVideoBuffers.small.pixelFormat, remoteUserVideoBuffers.small.id);
+                remoteUserVideoBuffers.small.buffer = null;
+                remoteUserVideoBuffers.small = undefined;
+            }
+            if (!remoteUserVideoBuffers.big && !remoteUserVideoBuffers.small) {
+                remoteVideoBufferMap.delete(userId);
+            }
         }
         else if (screenVideoBuffer.userId === userId && screenVideoBuffer.streamType === streamType) {
-            this.rtcCloud.setSubVideoBuffer(userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat);
+            this.rtcCloud.setSubVideoBuffer(userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
             screenVideoBuffer.buffer = null;
+            screenVideoBuffer.id = 0;
             screenVideoBuffer.userId = '';
         }
     }
+    /**
+     * 3.7 修改远端视频渲染的 HTML 元素
+     *
+     * 本接口用于切换显示区域的交互场景中，修改远端视频渲染的 HTML 元素。
+     *
+     * 注意：必须调用 [startRemoteView()]{@link TRTCCloud#startRemoteView} 订阅了远端视频流之后，调用此接口才会生效。
+     *
+     * @param {String} userId - 远端视频流的用户 ID
+     * @param {HTMLElement|null} view - 接受远端视频流渲染的 HTML 元素，传入 null 结束远端视频的渲染
+     *  - 传入的 HTML 元素必须时块元素，例如：div
+     * @param {TRTCVideoStreamType} streamType - 视频流类型
+     *
+     */
+    updateRemoteView(userId, view, streamType) {
+        if (streamType === undefined) {
+            streamType = this.priorRemoteVideoStreamType;
+        }
+        let bindStreamType = streamType;
+        if (bindStreamType === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall) {
+            // 如果拉取小流, 绑定 render 时也采用大流， 防止大小流切换后无法找到对应 render 进行渲染
+            // 这里的逻辑和 _onRenderFrame 里, 获取 render 是不论小流还是大流， 都采用大流取获取 render 有关
+            bindStreamType = trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig;
+        }
+        const key = this.getKey(userId, bindStreamType);
+        if (view !== null && view instanceof HTMLElement) {
+            this._initRender(key, view);
+        }
+        else if (view === null) {
+            if (this.streams.has(String(key))) {
+                this._destroyRender(key, null);
+            }
+        }
+        else {
+            console.error('trtc:updateRemoteView() called with wrong view parameter', view);
+        }
+    }
     /**
      * 3.6 停止显示所有远端视频画面，同时不再拉取该远端用户的视频数据流
      *
@@ -1798,13 +1928,20 @@ class TRTCCloud extends events_1.EventEmitter {
         });
         this.rtcCloud.stopAllRemoteView();
         remoteVideoBufferMap.forEach((value, key) => {
-            this.rtcCloud.setRemoteVideoBuffer(key, value.buffer, value.streamType, 0, 0, value.pixelFormat);
-            value.buffer = null;
+            if (value.big) {
+                this.rtcCloud.setRemoteVideoBuffer(key, value.big.buffer, value.big.streamType, 0, 0, value.big.pixelFormat, value.big.id);
+                value.big.buffer = null;
+            }
+            if (value.small) {
+                this.rtcCloud.setRemoteVideoBuffer(key, value.small.buffer, value.small.streamType, 0, 0, value.small.pixelFormat, value.small.id);
+                value.small.buffer = null;
+            }
         });
         remoteVideoBufferMap.clear();
         if (screenVideoBuffer.buffer && !this.isScreenCapturing) {
-            this.rtcCloud.setSubVideoBuffer(screenVideoBuffer.userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat);
+            this.rtcCloud.setSubVideoBuffer(screenVideoBuffer.userId, screenVideoBuffer.buffer, screenVideoBuffer.streamType, 0, 0, screenVideoBuffer.pixelFormat, screenVideoBuffer.id);
             screenVideoBuffer.buffer = null;
+            screenVideoBuffer.id = 0;
             screenVideoBuffer.userId = '';
         }
     }
@@ -2062,12 +2199,36 @@ class TRTCCloud extends events_1.EventEmitter {
      * 如果该 userId 没有开启双路编码模式，则此操作无效。
      *
      * @param {String} userId - 用户 ID
-     * @param {TRTCVideoStreamType} type - 视频流类型，即选择看大画面还是小画面，默认为 TRTCVideoStreamTypeBig
+     * @param {TRTCVideoStreamType} streamType - 视频流类型，即选择看大画面还是小画面，默认为 TRTCVideoStreamTypeBig
      * - TRTCVideoStreamTypeBig  : 大画面视频流
      * - TRTCVideoStreamTypeSmall: 小画面视频流
      */
-    setRemoteVideoStreamType(userId, type) {
-        this.rtcCloud.setRemoteVideoStreamType(userId, type);
+    setRemoteVideoStreamType(userId, streamType) {
+        const remoteUserVideoBuffers = remoteVideoBufferMap.get(userId);
+        if (remoteUserVideoBuffers) {
+            const videoBufferInfo = {
+                userId: userId,
+                buffer: (0, util_1.allocBuffer)(DEFAULT_VIDEO_WIDTH * DEFAULT_VIDEO_HEIGHT * this.pixelLength, userId, streamType),
+                id: (0, util_1.generateUniqueId)(),
+                streamType: streamType,
+                width: DEFAULT_VIDEO_WIDTH,
+                height: DEFAULT_VIDEO_HEIGHT,
+                pixelFormat: this.pixelformate,
+            };
+            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.rtcCloud.setRemoteVideoStreamType(userId, streamType);
     }
     /**
      * 3.22 视频画面截图
@@ -3325,14 +3486,20 @@ class TRTCCloud extends events_1.EventEmitter {
                 cameraTestVideoBuffer.streamType = streamType;
                 cameraTestVideoBuffer.pixelFormat = this.pixelformate;
                 cameraTestVideoBuffer.buffer = (0, util_1.allocBuffer)(DEFAULT_VIDEO_WIDTH * DEFAULT_VIDEO_HEIGHT * this.pixelLength, cameraTestVideoBuffer.userId, streamType);
+                cameraTestVideoBuffer.id = (0, util_1.generateUniqueId)();
                 cameraTestVideoBuffer.width = DEFAULT_VIDEO_WIDTH;
                 cameraTestVideoBuffer.height = DEFAULT_VIDEO_HEIGHT;
-                this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, cameraTestVideoBuffer.width, cameraTestVideoBuffer.height, cameraTestVideoBuffer.pixelFormat);
+                this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, cameraTestVideoBuffer.width, cameraTestVideoBuffer.height, cameraTestVideoBuffer.pixelFormat, cameraTestVideoBuffer.id);
             }
-            this.rtcCloud.startCameraDeviceTest((id, type, width, height, timestamp, rotation, valid) => {
+            this.rtcCloud.startCameraDeviceTest((id, type, width, height, timestamp, rotation, valid, bufferId) => {
                 if (this.enableRenderFrame) {
-                    if (valid === 1 && width === cameraTestVideoBuffer.width && height === cameraTestVideoBuffer.height) {
-                        this._onRenderFrame(id, type, width, height, timestamp, rotation, cameraTestVideoBuffer.buffer);
+                    if (valid === 1) {
+                        if (cameraTestVideoBuffer.id === bufferId) {
+                            this._onRenderFrame(id, type, width, height, timestamp, rotation, cameraTestVideoBuffer.buffer);
+                        }
+                        else {
+                            console.log('trtc:camera video buffer reallocated');
+                        }
                     }
                     else {
                         this.handleVideoSizeChange(id, type, width, height);
@@ -3355,8 +3522,9 @@ class TRTCCloud extends events_1.EventEmitter {
             return !('' === item.uid && item.type === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig);
         });
         if (cameraTestVideoBuffer.buffer) {
-            this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, 0, 0, cameraTestVideoBuffer.pixelFormat);
+            this.rtcCloud.setCameraTestVideoBuffer(cameraTestVideoBuffer.buffer, 0, 0, cameraTestVideoBuffer.pixelFormat, cameraTestVideoBuffer.id);
             cameraTestVideoBuffer.buffer = null;
+            cameraTestVideoBuffer.id = 0;
         }
     }
     /**
@@ -3499,21 +3667,17 @@ class TRTCCloud extends events_1.EventEmitter {
             console.error('trtc: not supported renderMode:', this.renderMode);
             return;
         }
-        this.rtcCloud.addLocalVideoRenderCallback((id, type, width, height, timestamp, rotation, valid) => {
+        this.rtcCloud.addLocalVideoRenderCallback((id, type, width, height, timestamp, rotation, valid, bufferId) => {
             if (this.enableRenderFrame) {
                 if (valid === 1) {
-                    let targetBuffer;
-                    if (this.isScreenCapturing && this.screenCaptureStreamType === type) {
-                        targetBuffer = screenVideoBuffer;
-                    }
-                    else {
-                        targetBuffer = localVideoBuffer;
+                    if (this.isScreenCapturing && this.screenCaptureStreamType === type && screenVideoBuffer.id === bufferId) {
+                        this._onRenderFrame(id, type, width, height, timestamp, rotation, screenVideoBuffer.buffer);
                     }
-                    if (width === targetBuffer.width && height === targetBuffer.height) {
-                        this._onRenderFrame(id, type, width, height, timestamp, rotation, targetBuffer.buffer);
+                    else if (localVideoBuffer.id === bufferId) {
+                        this._onRenderFrame(id, type, width, height, timestamp, rotation, localVideoBuffer.buffer);
                     }
                     else {
-                        this.handleVideoSizeChange(id, type, width, height);
+                        console.log(`trtc: ${id} ${type} video buffer reallocated`);
                     }
                 }
                 else {
@@ -3539,22 +3703,25 @@ class TRTCCloud extends events_1.EventEmitter {
             console.error('trtc: not supported renderMode:', this.renderMode);
             return;
         }
-        this.rtcCloud.addRemoteVideoRenderCallback(userId, (id, type, width, height, timestamp, rotation, valid) => {
+        this.rtcCloud.addRemoteVideoRenderCallback(userId, (id, type, width, height, timestamp, rotation, valid, bufferId) => {
             if (this.enableRenderFrame) {
                 if (valid === 1) {
-                    const videoBufferInfo = remoteVideoBufferMap.get(id);
-                    let targetBuffer;
-                    if (videoBufferInfo && videoBufferInfo.streamType === type) {
-                        targetBuffer = videoBufferInfo;
-                    }
-                    else {
-                        targetBuffer = screenVideoBuffer;
+                    const remoteUserVideoBuffers = remoteVideoBufferMap.get(id);
+                    if (remoteUserVideoBuffers && type !== trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSub) {
+                        // 大流和小流
+                        if (type === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig && remoteUserVideoBuffers.big && remoteUserVideoBuffers.big.id === bufferId) {
+                            this._onRenderFrame(id, type, width, height, timestamp, rotation, remoteUserVideoBuffers.big.buffer);
+                        }
+                        else if (type === trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeSmall && remoteUserVideoBuffers.small && remoteUserVideoBuffers.small.id === bufferId) {
+                            this._onRenderFrame(id, type, width, height, timestamp, rotation, remoteUserVideoBuffers.small.buffer);
+                        }
                     }
-                    if (width === targetBuffer.width && height === targetBuffer.height) {
-                        this._onRenderFrame(id, type, width, height, timestamp, rotation, targetBuffer.buffer);
+                    else if (screenVideoBuffer.id === bufferId) {
+                        // 辅流
+                        this._onRenderFrame(id, type, width, height, timestamp, rotation, screenVideoBuffer.buffer);
                     }
                     else {
-                        this.handleVideoSizeChange(id, type, width, height);
+                        console.log(`trtc: ${id} ${type} video buffer reallocated`);
                     }
                 }
                 else {

package/liteav/trtc_define.d.ts

@@ -762,6 +762,7 @@ export interface PluginInfo {
     getParameter: (paramKey: string) => string;
 }
 export interface VideoBufferInfo {
+    id: number;
     userId: string;
     buffer: Buffer | null;
     streamType: TRTCVideoStreamType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trtc-electron-sdk",
-  "version": "10.3.8-beta.12",
+  "version": "10.3.8-beta.13",
   "description": "trtc electron sdk",
   "main": "./liteav/trtc.js",
   "types": "./liteav/trtc.d.ts",