trtc-electron-sdk 11.3.502-beta.4 → 11.3.502-beta.5

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/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;

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,22 +76,28 @@ 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, _b;
+        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) {
@@ -93,12 +106,13 @@ class Canvas3dRenderer {
         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, (_b = this.viewContainer) === null || _b === void 0 ? void 0 : _b.parentElement);
+            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;
     }
@@ -124,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({
@@ -213,6 +234,7 @@ class Canvas3dRenderer {
             this.unbind();
             this.viewWrapper = null;
             currentCreatedCount--;
+            this.onContextLost = 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

@@ -2271,6 +2271,7 @@ declare class TRTCCloud extends EventEmitter {
     private _getRendererMap;
     private _onRenderFrame;
     private _onRealRender;
+    private _checkAndDeleteExistingRenderer;
     private _createVideoRenderer;
     private _initRenderer;
     private _destroyRenderer;

package/liteav/trtc.js

@@ -4152,12 +4152,30 @@ class TRTCCloud extends events_1.EventEmitter {
             // 创建渲染器时 view 参数传了 null，只推流或者拉流，本地不渲染
         }
     }
-    _createVideoRenderer(view, key) {
+    _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);
         }
-        view.innerHTML = ''; // 事先清空一下，避免画面叠加
-        const renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, 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);
         }
@@ -4170,10 +4188,25 @@ 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, innerKey, map) => {
-                if (views.indexOf(innerKey) === -1 || !value.isValid(innerKey)) {
+                if (validViews.indexOf(innerKey) === -1 || !value.isValid(innerKey)) {
                     try {
                         value.destroy();
                         map.delete(innerKey);
@@ -4183,17 +4216,27 @@ class TRTCCloud extends events_1.EventEmitter {
                     }
                 }
             });
-            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);
             });
         }

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.3.502-beta.4",
+  "version": "11.3.502-beta.5",
   "description": "trtc electron sdk",
   "main": "./liteav/trtc.js",
   "types": "./liteav/trtc.d.ts",