agora-electron-sdk 4.2.4 → 4.2.6-rc.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 
 
+## [4.2.6-rc.1](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.4...v4.2.6-rc.1) (2023-11-21)
+
+
+### Bug Fixes
+
+* jira CSD-60920 render issue after ([#1110](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1110)) ([5730d86](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/5730d86d136539d79f50b1e92ba9ec5049196488))
+* jira CSD-61288 CSD-60920 renderer issue ([341491d](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/341491dfac72e1614df5ad32f0b40198d6a046dd))
+* use `setTimeout` intead of `setInterval` ([#1097](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1097)) ([9df0579](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/9df057989846e5e7e5fb4a00c6a1208f5728b9d8))
+
+
+### Features
+
+* suppot native 4.2.6 ([#1104](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1104)) ([e8be60b](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/e8be60bc762db3aac50d025a674664fb9e21c0bd)), closes [#1102](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1102)
+
 ## [4.2.4](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.3...v4.2.4) (2023-10-24)
 
 

package/js/Renderer/IRenderer.js

@@ -4,7 +4,7 @@ exports.IRenderer = void 0;
 var AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
 var IRenderer = /** @class */ (function () {
     function IRenderer() {
-        this.contentMode = AgoraMediaBase_1.RenderModeType.RenderModeFit;
+        this.contentMode = AgoraMediaBase_1.RenderModeType.RenderModeHidden;
     }
     IRenderer.prototype.snapshot = function (fileType) {
         if (fileType === void 0) { fileType = 'image/png'; }
@@ -14,17 +14,36 @@ var IRenderer = /** @class */ (function () {
         return null;
     };
     IRenderer.prototype.bind = function (element) {
-        if (!element) {
-            throw new Error('You have pass a element');
-        }
         this.parentElement = element;
+        this.container = document.createElement('div');
+        Object.assign(this.container.style, {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            overflow: 'hidden',
+        });
+        this.parentElement.appendChild(this.container);
+        this.canvas = document.createElement('canvas');
+        this.container.appendChild(this.canvas);
     };
-    IRenderer.prototype.equalsElement = function (element) {
-        if (!element) {
-            throw new Error('You have pass a element');
+    IRenderer.prototype.unbind = function () {
+        var _a, _b;
+        if (this.container && ((_a = this.canvas) === null || _a === void 0 ? void 0 : _a.parentNode) === this.container) {
+            this.container.removeChild(this.canvas);
         }
+        if (this.parentElement &&
+            ((_b = this.container) === null || _b === void 0 ? void 0 : _b.parentNode) === this.parentElement) {
+            this.parentElement.removeChild(this.container);
+        }
+        this.canvas = undefined;
+        this.container = undefined;
+        this.parentElement = undefined;
+    };
+    IRenderer.prototype.equalsElement = function (element) {
         if (!this.parentElement) {
-            throw new Error('parentElement is null');
+            console.error('parentElement is null');
         }
         return element === this.parentElement;
     };

package/js/Renderer/RendererManager.js

@@ -25,9 +25,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RendererManager = void 0;
 var AgoraBase_1 = require("../Private/AgoraBase");
@@ -35,7 +32,7 @@ var AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
 var Types_1 = require("../Types");
 var Utils_1 = require("../Utils");
 var IRendererManager_1 = require("./IRendererManager");
-var WebGLRenderer_1 = __importDefault(require("./WebGLRenderer"));
+var WebGLRenderer_1 = require("./WebGLRenderer");
 var YUVCanvasRenderer_1 = require("./YUVCanvasRenderer");
 /**
  * @ignore
@@ -48,11 +45,23 @@ var RendererManager = /** @class */ (function (_super) {
          * @ignore
          */
         _this.isRendering = false;
+        /**
+         * @ignore
+         */
+        _this.handleWebGLFallback = function (config) { return function (renderer) {
+            var contentMode = renderer.contentMode, mirror = renderer.mirror;
+            var view = renderer.parentElement;
+            var renderers = _this.getRenderers(config);
+            var index = renderers.indexOf(renderer);
+            renderer.unbind();
+            var newRenderer = _this.createRenderer(Types_1.RENDER_MODE.SOFTWARE);
+            newRenderer.bind(view);
+            newRenderer.setRenderOption({ contentMode: contentMode, mirror: mirror });
+            renderers.splice(index, 1, newRenderer);
+        }; };
         _this.renderFps = 15;
         _this.renderers = new Map();
-        _this.renderMode = _this.checkWebglEnv()
-            ? Types_1.RENDER_MODE.WEBGL
-            : Types_1.RENDER_MODE.SOFTWARE;
+        _this.setRenderMode();
         _this.msgBridge = Utils_1.AgoraEnv.AgoraElectronBridge;
         _this.defaultRenderConfig = {
             rendererOptions: {
@@ -72,8 +81,16 @@ var RendererManager = /** @class */ (function (_super) {
      * 0: Success.< 0: Failure.
      */
     RendererManager.prototype.setRenderMode = function (mode) {
-        this.renderMode = mode;
-        (0, Utils_1.logInfo)('setRenderMode:  new render mode will take effect only if new view bind to render');
+        if (mode === undefined) {
+            this.renderMode = this.checkWebglEnv()
+                ? Types_1.RENDER_MODE.WEBGL
+                : Types_1.RENDER_MODE.SOFTWARE;
+            return;
+        }
+        if (mode !== this.renderMode) {
+            this.renderMode = mode;
+            (0, Utils_1.logInfo)('setRenderMode:  new render mode will take effect only if new view bind to render');
+        }
     };
     /**
      * @ignore
@@ -124,18 +141,32 @@ var RendererManager = /** @class */ (function (_super) {
      * @ignore
      */
     RendererManager.prototype.checkWebglEnv = function () {
-        var gl;
+        var _a;
+        var flag = false;
         var canvas = document.createElement('canvas');
         try {
-            gl =
-                canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+            var getContext = function (contextNames) {
+                if (contextNames === void 0) { contextNames = ['webgl2', 'webgl', 'experimental-webgl']; }
+                for (var i = 0; i < contextNames.length; i++) {
+                    var contextName = contextNames[i];
+                    var context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext(contextName);
+                    if (context) {
+                        return context;
+                    }
+                }
+                return null;
+            };
+            var gl = getContext();
+            flag = !!gl;
+            (_a = gl === null || gl === void 0 ? void 0 : gl.getExtension('WEBGL_lose_context')) === null || _a === void 0 ? void 0 : _a.loseContext();
+            gl = null;
             (0, Utils_1.logInfo)('Your browser support webGL');
         }
         catch (e) {
             (0, Utils_1.logWarn)('Your browser may not support webGL');
-            return false;
+            flag = false;
         }
-        return !!gl;
+        return flag;
     };
     /**
      * @ignore
@@ -330,9 +361,11 @@ var RendererManager = /** @class */ (function (_super) {
                 });
             }
         };
-        this.videoFrameUpdateInterval = setInterval(function () {
+        var render = function () {
             _this.forEachStream(renderFunc);
-        }, 1000 / this.renderFps);
+            _this.videoFrameUpdateInterval = setTimeout(render, 1000 / _this.renderFps);
+        };
+        render();
     };
     /**
      * @ignore
@@ -340,7 +373,7 @@ var RendererManager = /** @class */ (function (_super) {
     RendererManager.prototype.stopRender = function () {
         this.isRendering = false;
         if (this.videoFrameUpdateInterval) {
-            clearInterval(this.videoFrameUpdateInterval);
+            clearTimeout(this.videoFrameUpdateInterval);
             this.videoFrameUpdateInterval = undefined;
         }
     };
@@ -357,12 +390,12 @@ var RendererManager = /** @class */ (function (_super) {
     /**
      * @ignore
      */
-    RendererManager.prototype.createRenderer = function (failCallback) {
-        if (this.renderMode === Types_1.RENDER_MODE.SOFTWARE) {
+    RendererManager.prototype.createRenderer = function (renderMode, fallback) {
+        if (renderMode === Types_1.RENDER_MODE.SOFTWARE) {
             return new YUVCanvasRenderer_1.YUVCanvasRenderer();
         }
         else {
-            return new WebGLRenderer_1.default(failCallback);
+            return new WebGLRenderer_1.WebGLRenderer(fallback);
         }
     };
     /**
@@ -377,40 +410,25 @@ var RendererManager = /** @class */ (function (_super) {
      * @ignore
      */
     RendererManager.prototype.getRenderers = function (_a) {
-        var _b, _c, _d;
+        var _b;
         var videoSourceType = _a.videoSourceType, channelId = _a.channelId, uid = _a.uid;
-        return (((_d = (_c = (_b = this.renderers.get(videoSourceType)) === null || _b === void 0 ? void 0 : _b.get(channelId)) === null || _c === void 0 ? void 0 : _c.get(uid)) === null || _d === void 0 ? void 0 : _d.renders) ||
-            []);
+        return ((_b = this.getRender({ videoSourceType: videoSourceType, channelId: channelId, uid: uid })) === null || _b === void 0 ? void 0 : _b.renders) || [];
     };
     /**
      * @ignore
      */
     RendererManager.prototype.bindHTMLElementToRender = function (config, view) {
-        var _this = this;
         this.ensureRendererConfig(config);
-        var renders = this.getRenderers(config);
-        var filterRenders = (renders === null || renders === void 0 ? void 0 : renders.filter(function (render) { return render.equalsElement(view); })) || [];
+        var renderers = this.getRenderers(config);
+        var filterRenders = (renderers === null || renderers === void 0 ? void 0 : renderers.filter(function (render) { return render.equalsElement(view); })) || [];
         var hasBeenAdd = filterRenders.length > 0;
         if (hasBeenAdd) {
             (0, Utils_1.logWarn)('bindHTMLElementToRender: this view has bind to render', filterRenders);
             return filterRenders[0];
         }
-        var renderer = this.createRenderer(function () {
-            var renderConfig = _this.getRender(config);
-            if (!renderConfig) {
-                return;
-            }
-            renderConfig.renders = renders.filter(function (r) { return r !== renderer; });
-            var contentMode = renderer.contentMode;
-            renderer.unbind();
-            _this.setRenderMode(Types_1.RENDER_MODE.SOFTWARE);
-            var newRender = _this.createRenderer();
-            newRender.contentMode = contentMode;
-            newRender.bind(view);
-            renderConfig.renders.push(newRender);
-        });
+        var renderer = this.createRenderer(this.renderMode, this.handleWebGLFallback(config));
         renderer.bind(view);
-        renders.push(renderer);
+        renderers.push(renderer);
         return renderer;
     };
     /**