trtc-electron-sdk 9.5.112-beta.1 → 9.5.112-beta.2

package/liteav/Render/GlRenderer/index.js

@@ -31,7 +31,8 @@ const TrtcRender = function () {
         lastImageRotation: 0,
         lastIsNeedRotate: true,
         firstFrameRender: false,
-        event: new EventEmitter()
+        event: new EventEmitter(),
+        fallbackCb: null,
     };
     that.getView = function () {
         return that.view;
@@ -40,8 +41,9 @@ const TrtcRender = function () {
     that.setContentMode = function (mode) {
         that.contentMode = mode;
     };
-    that.bind = function (view) {
-        initCanvas(view, that.mirrorView, view.clientWidth, view.clientHeight, that.initRotation, true, console.warn);
+    that.bind = function (view, fallbackCb) {
+        that.fallbackCb = fallbackCb;
+        initCanvas(view, that.mirrorView, view.clientWidth, view.clientHeight, that.initRotation, true, console.warn, true);
     };
     that.unbind = function () {
         try {
@@ -94,7 +96,7 @@ const TrtcRender = function () {
             that.unbind();
             initCanvas(view, image.mirror, image.width, image.height, image.rotation, image.isNeedRotate, e => {
                 console.error(`init canvas ${image.width}*${image.height} rotation ${image.rotation} failed. ${e}`);
-            });
+            }, false);
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
         const xWidth = image.width + image.left + image.right;
@@ -239,7 +241,7 @@ const TrtcRender = function () {
         + '  b=y+2.017*u;'
         + '  gl_FragColor=vec4(r,g,b,1.0);'
         + '}';
-    function initCanvas(view, mirror, width, height, rotation, isNeedRotate, onFailure) {
+    function initCanvas(view, mirror, width, height, rotation, isNeedRotate, onFailure, isBind) {
         that.clientWidth = view.clientWidth;
         that.clientHeight = view.clientHeight;
         that.view = view;
@@ -252,6 +254,11 @@ const TrtcRender = function () {
         that.container.style.alignItems = 'center';
         that.view.appendChild(that.container);
         that.canvas = document.createElement('canvas');
+        that.canvas.addEventListener('webglcontextlost', function (e) {
+            if (!isBind && that.fallbackCb) {
+                that.fallbackCb();
+            }
+        }, { once: true });
         if (isNeedKeepWidthAndHeight(rotation, isNeedRotate)) {
             that.canvas.width = width;
             that.canvas.height = height;

package/liteav/Render/index.d.ts

@@ -2,7 +2,7 @@
 import { EventEmitter } from 'events';
 export interface IRenderer {
     event: EventEmitter;
-    bind(element: Element): void;
+    bind(element: Element, fallbackCb?: () => void): void;
     unbind(): void;
     drawFrame(imageData: {
         header: any;
@@ -18,7 +18,7 @@ declare class GlRenderer implements IRenderer {
     self: any;
     event: EventEmitter;
     constructor();
-    bind(element: Element): void;
+    bind(element: Element, fallbackCb?: () => void): void;
     unbind(): void;
     drawFrame(imageData: {
         header: any;

package/liteav/Render/index.js

@@ -15,8 +15,8 @@ class GlRenderer {
         this.self = GlRenderer_1.default.apply(this);
         this.event = this.self.event;
     }
-    bind(element) {
-        return this.self.bind(element);
+    bind(element, fallbackCb) {
+        return this.self.bind(element, fallbackCb);
     }
     unbind() {
         return this.self.unbind();

package/liteav/trtc.js

@@ -3357,7 +3357,14 @@ class TRTCCloud extends events_1.EventEmitter {
             renderer = new Render_1.default.GlRenderer();
         }
         view.innerHTML = ''; // 事先清空一下，避免画面叠加
-        renderer.bind(view);
+        if (this.renderMode === 1) {
+            renderer.bind(view, () => {
+                this.setRenderMode(2);
+            });
+        }
+        else {
+            renderer.bind(view);
+        }
         this.streams.set(String(key), renderer);
         if (key === this.getKey('local_video', trtc_define_1.TRTCVideoStreamType.TRTCVideoStreamTypeBig)) {
             // 只有本地视频, 才设置 local fill mode

package/package.json

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