agora-electron-sdk 4.2.6 → 4.3.0-dev.1

package/js/Renderer/AgoraView.js

@@ -15,6 +15,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+var AgoraBase_1 = require("../Private/AgoraBase");
 var AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
 var Utils_1 = require("../Utils");
 var VIDEO_SOURCE_TYPE_STRING = 'video-source-type';
@@ -35,22 +36,29 @@ var AgoraView = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.isConnectedCallback = false;
         _this.initializeRender = function () {
-            var _a, _b;
-            (_a = Utils_1.AgoraEnv.AgoraRendererManager) === null || _a === void 0 ? void 0 : _a.destroyRendererByView(_this);
-            (_b = Utils_1.AgoraEnv.AgoraRendererManager) === null || _b === void 0 ? void 0 : _b.setupVideo({
-                videoSourceType: _this.videoSourceType,
+            var _a;
+            var _b = _this, channelId = _b.channelId, uid = _b.uid, sourceType = _b.sourceType, renderMode = _b.renderMode, renderMirror = _b.renderMirror;
+            (_a = Utils_1.AgoraEnv.AgoraRendererManager) === null || _a === void 0 ? void 0 : _a.addOrRemoveRenderer({
+                sourceType: sourceType,
                 view: _this,
-                uid: _this.uid,
-                channelId: _this.channelId,
-                rendererOptions: {
-                    mirror: _this.renderMirror,
-                    contentMode: _this.renderContentMode,
-                },
+                uid: uid,
+                channelId: channelId,
+                renderMode: renderMode,
+                mirrorMode: renderMirror
+                    ? AgoraBase_1.VideoMirrorModeType.VideoMirrorModeEnabled
+                    : AgoraBase_1.VideoMirrorModeType.VideoMirrorModeDisabled,
+                setupMode: AgoraBase_1.VideoViewSetupMode.VideoViewSetupReplace,
             });
         };
         _this.destroyRender = function () {
             var _a;
-            (_a = Utils_1.AgoraEnv.AgoraRendererManager) === null || _a === void 0 ? void 0 : _a.destroyRendererByView(_this);
+            var _b = _this, channelId = _b.channelId, uid = _b.uid, sourceType = _b.sourceType;
+            (_a = Utils_1.AgoraEnv.AgoraRendererManager) === null || _a === void 0 ? void 0 : _a.removeRendererFromCache({
+                channelId: channelId,
+                uid: uid,
+                sourceType: sourceType,
+                view: _this,
+            });
         };
         return _this;
     }
@@ -61,7 +69,7 @@ var AgoraView = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(AgoraView.prototype, "videoSourceType", {
+    Object.defineProperty(AgoraView.prototype, "sourceType", {
         get: function () {
             var number = Number(this.getAttribute(VIDEO_SOURCE_TYPE_STRING));
             return isNaN(number) ? 0 : number;
@@ -108,7 +116,7 @@ var AgoraView = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(AgoraView.prototype, "renderContentMode", {
+    Object.defineProperty(AgoraView.prototype, "renderMode", {
         get: function () {
             var number = Number(this.getAttribute(RENDERER_CONTENT_MODE_STRING) ||
                 AgoraMediaBase_1.RenderModeType.RenderModeFit);
@@ -154,7 +162,13 @@ var AgoraView = /** @class */ (function (_super) {
             RENDERER_MIRROR_STRING,
         ].includes(attrName);
         if (isSetRenderOption) {
-            (_a = Utils_1.AgoraEnv.AgoraRendererManager) === null || _a === void 0 ? void 0 : _a.setRenderOption(this, this.renderContentMode, this.renderMirror);
+            (_a = Utils_1.AgoraEnv.AgoraRendererManager) === null || _a === void 0 ? void 0 : _a.setRendererContext({
+                view: this,
+                renderMode: this.renderMode,
+                mirrorMode: this.renderMirror
+                    ? AgoraBase_1.VideoMirrorModeType.VideoMirrorModeEnabled
+                    : AgoraBase_1.VideoMirrorModeType.VideoMirrorModeDisabled,
+            });
             return;
         }
         var isNeedReInitialize = observedAttributes.includes(attrName);

package/js/Renderer/IRenderer.js

@@ -1,18 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IRenderer = void 0;
+var AgoraBase_1 = require("../Private/AgoraBase");
 var AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
 var IRenderer = /** @class */ (function () {
     function IRenderer() {
-        this.contentMode = AgoraMediaBase_1.RenderModeType.RenderModeHidden;
+        this._context = {};
     }
-    IRenderer.prototype.snapshot = function (fileType) {
-        if (fileType === void 0) { fileType = 'image/png'; }
-        if (this.canvas && this.canvas.toDataURL) {
-            return this.canvas.toDataURL(fileType);
-        }
-        return null;
-    };
     IRenderer.prototype.bind = function (element) {
         this.parentElement = element;
         this.container = document.createElement('div');
@@ -41,20 +35,74 @@ var IRenderer = /** @class */ (function () {
         this.container = undefined;
         this.parentElement = undefined;
     };
-    IRenderer.prototype.equalsElement = function (element) {
-        if (!this.parentElement) {
-            console.error('parentElement is null');
+    Object.defineProperty(IRenderer.prototype, "context", {
+        get: function () {
+            return this._context;
+        },
+        set: function (_a) {
+            var renderMode = _a.renderMode, mirrorMode = _a.mirrorMode;
+            if (this.context.renderMode !== renderMode) {
+                this.context.renderMode = renderMode;
+                this.updateRenderMode();
+            }
+            if (this.context.mirrorMode !== mirrorMode) {
+                this.context.mirrorMode = mirrorMode;
+                this.updateMirrorMode();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IRenderer.prototype.updateRenderMode = function () {
+        var _a;
+        if (!this.canvas || !this.container)
+            return;
+        var _b = this.container, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        var _c = this.canvas, width = _c.width, height = _c.height;
+        var containerAspectRatio = clientWidth / clientHeight;
+        var canvasAspectRatio = width / height;
+        var widthScale = clientWidth / width;
+        var heightScale = clientHeight / height;
+        var isHidden = ((_a = this.context) === null || _a === void 0 ? void 0 : _a.renderMode) === AgoraMediaBase_1.RenderModeType.RenderModeHidden;
+        var scale = 1;
+        // If container's aspect ratio is larger than canvas's aspect ratio
+        if (containerAspectRatio > canvasAspectRatio) {
+            // Scale canvas to fit container's width on hidden mode
+            // Scale canvas to fit container's height on fit mode
+            scale = isHidden ? widthScale : heightScale;
         }
-        return element === this.parentElement;
+        else {
+            // Scale canvas to fit container's height on hidden mode
+            // Scale canvas to fit container's width on fit mode
+            scale = isHidden ? heightScale : widthScale;
+        }
+        this.canvas.style.transform = "scale(".concat(scale, ")");
     };
-    IRenderer.prototype.setRenderOption = function (_a) {
-        var contentMode = _a.contentMode, mirror = _a.mirror;
-        this.contentMode = contentMode !== null && contentMode !== void 0 ? contentMode : AgoraMediaBase_1.RenderModeType.RenderModeFit;
-        this.mirror = mirror;
+    IRenderer.prototype.updateMirrorMode = function () {
+        if (!this.parentElement)
+            return;
         Object.assign(this.parentElement.style, {
-            transform: mirror ? 'rotateY(180deg)' : '',
+            transform: this.context.mirrorMode === AgoraBase_1.VideoMirrorModeType.VideoMirrorModeEnabled
+                ? 'rotateY(180deg)'
+                : '',
         });
     };
+    IRenderer.prototype.rotateCanvas = function (_a) {
+        var width = _a.width, height = _a.height, rotation = _a.rotation;
+        if (!this.canvas)
+            return;
+        if (rotation === 0 || rotation === 180) {
+            this.canvas.width = width;
+            this.canvas.height = height;
+        }
+        else if (rotation === 90 || rotation === 270) {
+            this.canvas.height = width;
+            this.canvas.width = height;
+        }
+        else {
+            throw new Error("Invalid rotation: ".concat(rotation, ", only 0, 90, 180, 270 are supported"));
+        }
+    };
     return IRenderer;
 }());
 exports.IRenderer = IRenderer;

package/js/Renderer/IRendererManager.js

@@ -1,12 +1,242 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IRendererManager = void 0;
+var AgoraBase_1 = require("../Private/AgoraBase");
+var AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
+var Utils_1 = require("../Utils");
+var RendererCache_1 = require("./RendererCache");
 /**
  * @ignore
  */
 var IRendererManager = /** @class */ (function () {
     function IRendererManager() {
+        this._renderingFps = 15;
+        this._currentFrameCount = 0;
+        this._previousFirstFrameTime = 0;
+        this._rendererCaches = [];
+        this._context = {
+            renderMode: AgoraMediaBase_1.RenderModeType.RenderModeHidden,
+            mirrorMode: AgoraBase_1.VideoMirrorModeType.VideoMirrorModeDisabled,
+        };
     }
+    Object.defineProperty(IRendererManager.prototype, "renderingFps", {
+        get: function () {
+            return this._renderingFps;
+        },
+        set: function (fps) {
+            if (this._renderingFps !== fps) {
+                this._renderingFps = fps;
+                if (this._renderingTimer) {
+                    this.stopRendering();
+                    this.startRendering();
+                }
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IRendererManager.prototype, "defaultChannelId", {
+        get: function () {
+            var _a;
+            return (_a = this._context.channelId) !== null && _a !== void 0 ? _a : '';
+        },
+        set: function (channelId) {
+            this._context.channelId = channelId;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IRendererManager.prototype, "defaultRenderMode", {
+        get: function () {
+            return this._context.renderMode;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IRendererManager.prototype, "defaultMirrorMode", {
+        get: function () {
+            return this._context.mirrorMode;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IRendererManager.prototype.release = function () {
+        this.stopRendering();
+        this.clearRendererCache();
+    };
+    IRendererManager.prototype.precheckRendererContext = function (context) {
+        var sourceType = context.sourceType, uid = context.uid, channelId = context.channelId, mediaPlayerId = context.mediaPlayerId, _a = context.renderMode, renderMode = _a === void 0 ? this.defaultRenderMode : _a, _b = context.mirrorMode, mirrorMode = _b === void 0 ? this.defaultMirrorMode : _b;
+        switch (sourceType) {
+            case AgoraMediaBase_1.VideoSourceType.VideoSourceRemote:
+                if (uid === undefined) {
+                    throw new Error('uid is required');
+                }
+                channelId = channelId !== null && channelId !== void 0 ? channelId : this.defaultChannelId;
+                break;
+            case AgoraMediaBase_1.VideoSourceType.VideoSourceMediaPlayer:
+                if (mediaPlayerId === undefined) {
+                    throw new Error('mediaPlayerId is required');
+                }
+                channelId = '';
+                uid = mediaPlayerId;
+                break;
+            case undefined:
+                if (uid) {
+                    sourceType = AgoraMediaBase_1.VideoSourceType.VideoSourceRemote;
+                }
+                break;
+            default:
+                channelId = '';
+                uid = 0;
+                break;
+        }
+        return __assign(__assign({}, context), { sourceType: sourceType, uid: uid, channelId: channelId, renderMode: renderMode, mirrorMode: mirrorMode });
+    };
+    IRendererManager.prototype.addOrRemoveRenderer = function (context) {
+        // To be compatible with the old API
+        var _a = context.setupMode, setupMode = _a === void 0 ? AgoraBase_1.VideoViewSetupMode.VideoViewSetupAdd : _a;
+        if (!context.view)
+            setupMode = AgoraBase_1.VideoViewSetupMode.VideoViewSetupRemove;
+        switch (setupMode) {
+            case AgoraBase_1.VideoViewSetupMode.VideoViewSetupAdd:
+                return this.addRendererToCache(context);
+            case AgoraBase_1.VideoViewSetupMode.VideoViewSetupRemove:
+                this.removeRendererFromCache(context);
+                return undefined;
+            case AgoraBase_1.VideoViewSetupMode.VideoViewSetupReplace:
+                this.removeRendererFromCache(context);
+                return this.addRendererToCache(context);
+        }
+    };
+    IRendererManager.prototype.addRendererToCache = function (context) {
+        var checkedContext = this.precheckRendererContext(context);
+        if (!checkedContext.view)
+            return undefined;
+        if (this.findRenderer(checkedContext.view)) {
+            throw new Error('You have already added this view to the renderer');
+        }
+        var rendererCache = this.getRendererCache(checkedContext);
+        if (!rendererCache) {
+            rendererCache = new RendererCache_1.RendererCache(checkedContext);
+            this._rendererCaches.push(rendererCache);
+        }
+        rendererCache.addRenderer(this.createRenderer(checkedContext));
+        this.startRendering();
+        return rendererCache;
+    };
+    IRendererManager.prototype.removeRendererFromCache = function (context) {
+        var checkedContext = this.precheckRendererContext(context);
+        var rendererCache = this.getRendererCache(checkedContext);
+        if (!rendererCache)
+            return;
+        if (checkedContext.view) {
+            var renderer = rendererCache.findRenderer(checkedContext.view);
+            if (!renderer)
+                return;
+            rendererCache.removeRenderer(renderer);
+        }
+        else {
+            rendererCache.removeRenderer();
+        }
+        if (rendererCache.renderers.length === 0) {
+            this._rendererCaches.splice(this._rendererCaches.indexOf(rendererCache), 1);
+        }
+    };
+    IRendererManager.prototype.clearRendererCache = function () {
+        for (var _i = 0, _a = this._rendererCaches; _i < _a.length; _i++) {
+            var rendererCache = _a[_i];
+            rendererCache.removeRenderer();
+        }
+        this._rendererCaches.splice(0);
+    };
+    IRendererManager.prototype.getRendererCache = function (context) {
+        return this._rendererCaches.find(function (cache) { return cache.key === (0, RendererCache_1.generateRendererCacheKey)(context); });
+    };
+    IRendererManager.prototype.getRenderers = function (context) {
+        var _a;
+        return ((_a = this.getRendererCache(context)) === null || _a === void 0 ? void 0 : _a.renderers) || [];
+    };
+    IRendererManager.prototype.findRenderer = function (view) {
+        for (var _i = 0, _a = this._rendererCaches; _i < _a.length; _i++) {
+            var rendererCache = _a[_i];
+            var renderer = rendererCache.findRenderer(view);
+            if (renderer)
+                return renderer;
+        }
+        return undefined;
+    };
+    IRendererManager.prototype.startRendering = function () {
+        var _this = this;
+        if (this._renderingTimer)
+            return;
+        var renderingLooper = function () {
+            if (_this._previousFirstFrameTime === 0) {
+                // Get the current time as the time of the first frame of per second
+                _this._previousFirstFrameTime = performance.now();
+                // Reset the frame count
+                _this._currentFrameCount = 0;
+            }
+            // Increase the frame count
+            ++_this._currentFrameCount;
+            // Get the current time
+            var currentFrameTime = performance.now();
+            // Calculate the time difference between the current frame and the previous frame
+            var deltaTime = currentFrameTime - _this._previousFirstFrameTime;
+            // Calculate the expected time of the current frame
+            var expectedTime = (_this._currentFrameCount * 1000) / _this._renderingFps;
+            (0, Utils_1.logDebug)(new Date().toLocaleTimeString(), 'currentFrameCount', _this._currentFrameCount, 'expectedTime', expectedTime, 'deltaTime', deltaTime);
+            if (_this._rendererCaches.length === 0) {
+                // If there is no renderer, stop rendering
+                _this.stopRendering();
+                return;
+            }
+            // Render all renderers
+            for (var _i = 0, _a = _this._rendererCaches; _i < _a.length; _i++) {
+                var rendererCache = _a[_i];
+                _this.doRendering(rendererCache);
+            }
+            if (_this._currentFrameCount >= _this.renderingFps) {
+                _this._previousFirstFrameTime = 0;
+            }
+            if (deltaTime < expectedTime) {
+                // If the time difference between the current frame and the previous frame is less than the expected time, then wait for the difference
+                _this._renderingTimer = window.setTimeout(renderingLooper, expectedTime - deltaTime);
+            }
+            else {
+                // If the time difference between the current frame and the previous frame is greater than the expected time, then render immediately
+                renderingLooper();
+            }
+        };
+        renderingLooper();
+    };
+    IRendererManager.prototype.stopRendering = function () {
+        if (this._renderingTimer) {
+            window.clearTimeout(this._renderingTimer);
+            this._renderingTimer = undefined;
+        }
+    };
+    IRendererManager.prototype.setRendererContext = function (context) {
+        var checkedContext = this.precheckRendererContext(context);
+        for (var _i = 0, _a = this._rendererCaches; _i < _a.length; _i++) {
+            var rendererCache = _a[_i];
+            var result = rendererCache.setRendererContext(checkedContext);
+            if (result) {
+                return true;
+            }
+        }
+        return false;
+    };
     return IRendererManager;
 }());
 exports.IRendererManager = IRendererManager;

package/js/Renderer/RendererCache.js

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RendererCache = exports.generateRendererCacheKey = void 0;
+var Utils_1 = require("../Utils");
+function generateRendererCacheKey(_a) {
+    var channelId = _a.channelId, uid = _a.uid, sourceType = _a.sourceType;
+    return "".concat(channelId, "_").concat(uid, "_").concat(sourceType);
+}
+exports.generateRendererCacheKey = generateRendererCacheKey;
+var RendererCache = /** @class */ (function () {
+    function RendererCache(_a) {
+        var channelId = _a.channelId, uid = _a.uid, sourceType = _a.sourceType;
+        this._renderers = [];
+        this._videoFrame = {
+            yBuffer: Buffer.alloc(0),
+            uBuffer: Buffer.alloc(0),
+            vBuffer: Buffer.alloc(0),
+            width: 0,
+            height: 0,
+            yStride: 0,
+            uStride: 0,
+            vStride: 0,
+            rotation: 0,
+        };
+        this._context = { channelId: channelId, uid: uid, sourceType: sourceType };
+        this._enabled = false;
+    }
+    Object.defineProperty(RendererCache.prototype, "key", {
+        get: function () {
+            return generateRendererCacheKey(this._context);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererCache.prototype, "renderers", {
+        get: function () {
+            return this._renderers;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererCache.prototype, "videoFrame", {
+        get: function () {
+            return this._videoFrame;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererCache.prototype, "context", {
+        get: function () {
+            return this._context;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererCache.prototype, "renders", {
+        /**
+         * @deprecated Use renderers instead
+         */
+        get: function () {
+            return this.renderers;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererCache.prototype, "shareVideoFrame", {
+        /**
+         * @deprecated Use videoFrame instead
+         */
+        get: function () {
+            return this.videoFrame;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererCache.prototype, "bridge", {
+        get: function () {
+            return Utils_1.AgoraEnv.AgoraElectronBridge;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    RendererCache.prototype.enable = function () {
+        if (this._enabled)
+            return;
+        this.bridge.EnableVideoFrameCache(this._context);
+        this._enabled = true;
+    };
+    RendererCache.prototype.disable = function () {
+        if (!this._enabled)
+            return;
+        this.bridge.DisableVideoFrameCache(this._context);
+        this._enabled = false;
+    };
+    RendererCache.prototype.shouldEnable = function () {
+        if (this.renderers.length > 0) {
+            this.enable();
+        }
+        else {
+            this.disable();
+        }
+    };
+    RendererCache.prototype.draw = function () {
+        var _this = this;
+        var _a = this.bridge.GetVideoFrame(this.context, this.videoFrame), ret = _a.ret, isNewFrame = _a.isNewFrame;
+        switch (ret) {
+            case 0: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::OK = 0
+                //
+                break;
+            case 1: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::RESIZED = 1
+                var _b = this.videoFrame, yStride = _b.yStride, uStride = _b.uStride, vStride = _b.vStride, height = _b.height;
+                this.videoFrame.yBuffer = Buffer.alloc(yStride * height);
+                this.videoFrame.uBuffer = Buffer.alloc(uStride * height);
+                this.videoFrame.vBuffer = Buffer.alloc(vStride * height);
+                var result = this.bridge.GetVideoFrame(this.context, this.videoFrame);
+                ret = result.ret;
+                isNewFrame = result.isNewFrame;
+                break;
+            case 2: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::NO_CACHE = 2
+                (0, Utils_1.logDebug)('No renderer cache, please enable cache first');
+                return;
+        }
+        if (isNewFrame) {
+            this.renderers.forEach(function (renderer) {
+                renderer.drawFrame(_this.videoFrame);
+            });
+        }
+    };
+    RendererCache.prototype.findRenderer = function (view) {
+        return this._renderers.find(function (renderer) { return renderer.parentElement === view; });
+    };
+    RendererCache.prototype.addRenderer = function (renderer) {
+        this._renderers.push(renderer);
+        this.shouldEnable();
+    };
+    /**
+     * Remove the specified renderer if it is specified, otherwise remove all renderers
+     */
+    RendererCache.prototype.removeRenderer = function (renderer) {
+        var start = 0;
+        var deleteCount = this._renderers.length;
+        if (renderer) {
+            start = this._renderers.indexOf(renderer);
+            if (start < 0)
+                return;
+            deleteCount = 1;
+        }
+        this._renderers.splice(start, deleteCount).forEach(function (it) { return it.unbind(); });
+        this.shouldEnable();
+    };
+    RendererCache.prototype.setRendererContext = function (_a) {
+        var view = _a.view, renderMode = _a.renderMode, mirrorMode = _a.mirrorMode;
+        if (view) {
+            var renderer = this.findRenderer(view);
+            if (renderer) {
+                renderer.context = { renderMode: renderMode, mirrorMode: mirrorMode };
+                return true;
+            }
+            return false;
+        }
+        else {
+            this._renderers.forEach(function (it) {
+                it.context = { renderMode: renderMode, mirrorMode: mirrorMode };
+            });
+            return this._renderers.length > 0;
+        }
+    };
+    return RendererCache;
+}());
+exports.RendererCache = RendererCache;