agora-electron-sdk 4.5.1 → 4.5.2-dev.2

package/js/Renderer/CapabilityManager.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CapabilityManager = void 0;
+const semver_1 = __importDefault(require("semver"));
+const AgoraSdk_1 = __importDefault(require("../AgoraSdk"));
+const gpu_utils_1 = require("../Decoder/gpu-utils");
+const AgoraBase_1 = require("../Private/AgoraBase");
+const renderer_1 = require("../Private/ipc/renderer");
+const Types_1 = require("../Types");
+const Utils_1 = require("../Utils");
+/**
+ * @ignore
+ */
+class CapabilityManager {
+    setWebCodecsDecoderEnabled(enabled) {
+        this.webCodecsDecoderEnabled = enabled;
+    }
+    constructor() {
+        this.gpuInfo = new gpu_utils_1.GpuInfo();
+        this.frameCodecMapping = {};
+        this.webCodecsDecoderEnabled = Utils_1.AgoraEnv.enableWebCodecsDecoder;
+        this._engine = (0, AgoraSdk_1.default)();
+        if (Utils_1.AgoraEnv.enableWebCodecsDecoder) {
+            this.getGpuInfo(() => {
+                if (Utils_1.AgoraEnv.videoFallbackStrategy ===
+                    Types_1.VideoFallbackStrategy.PerformancePriority) {
+                    if (!this.isSupportedH265()) {
+                        if (this.isSupportedH264()) {
+                            this._engine.setParameters(JSON.stringify({ 'che.video.h265_dec_enable': false }));
+                            (0, Utils_1.logInfo)('the videoFallbackStrategy is PerformancePriority, H265 is not supported, fallback to H264');
+                        }
+                        else {
+                            this.webCodecsDecoderEnabled = false;
+                            (0, Utils_1.logInfo)('the videoFallbackStrategy is PerformancePriority, H264 and H265 are not supported, fallback to native decoder');
+                        }
+                    }
+                }
+                else if (Utils_1.AgoraEnv.videoFallbackStrategy ===
+                    Types_1.VideoFallbackStrategy.BandwidthPriority) {
+                    if (!this.isSupportedH265()) {
+                        this.webCodecsDecoderEnabled = false;
+                        (0, Utils_1.logInfo)('the videoFallbackStrategy is BandwidthPriority, H265 is not supported, fallback to native decoder');
+                    }
+                }
+            });
+        }
+    }
+    getGpuInfo(callback) {
+        //getGpuInfo and videoDecoder is not supported in electron version < 22.0.0
+        //@ts-ignore
+        if (semver_1.default.lt(process.versions.electron, '22.0.0')) {
+            (0, Utils_1.logError)('WebCodecsDecoder is not supported in electron version < 22.0.0, please upgrade electron to 22.0.0 or later.');
+            return;
+        }
+        //@ts-ignore
+        if (process.type === 'renderer') {
+            (0, renderer_1.ipcSend)(Types_1.IPCMessageType.AGORA_IPC_GET_GPU_INFO)
+                .then((result) => {
+                this.gpuInfo.videoDecodeAcceleratorSupportedProfile = result;
+                this.webCodecsDecoderEnabled = (Utils_1.AgoraEnv.enableWebCodecsDecoder &&
+                    this.gpuInfo.videoDecodeAcceleratorSupportedProfile.length > 0);
+                result.forEach((profile) => {
+                    const match = Types_1.codecMapping.find((item) => profile.codec.includes(item.profile));
+                    if (match) {
+                        //Normally, the range of compatible widths and heights should be the same under the same codec.
+                        //there is no need to differentiate between different profiles. This could be optimized in the future.
+                        this.frameCodecMapping[match.type] = {
+                            codec: match.codec,
+                            minWidth: profile.minWidth,
+                            minHeight: profile.minHeight,
+                            maxWidth: profile.maxWidth,
+                            maxHeight: profile.maxHeight,
+                        };
+                    }
+                });
+                callback && callback();
+            })
+                .catch((error) => {
+                (0, Utils_1.logError)('Failed to get GPU info, please check if you are already import agora-electron-sdk in the main process.', error);
+            });
+        }
+        else {
+            (0, Utils_1.logError)('This function only works in renderer process');
+        }
+    }
+    isSupportedH264() {
+        return this.frameCodecMapping[AgoraBase_1.VideoCodecType.VideoCodecH264] !== undefined;
+    }
+    isSupportedH265() {
+        return this.frameCodecMapping[AgoraBase_1.VideoCodecType.VideoCodecH265] !== undefined;
+    }
+    release() {
+        Utils_1.AgoraEnv.enableWebCodecsDecoder = false;
+    }
+}
+exports.CapabilityManager = CapabilityManager;

package/js/Renderer/IRenderer.js

@@ -5,7 +5,9 @@ const AgoraBase_1 = require("../Private/AgoraBase");
 const AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
 class IRenderer {
     constructor() {
-        this._context = {};
+        this.context = {};
+        this._frameCount = 0;
+        this._startTime = null;
     }
     bind(element) {
         this.parentElement = element;
@@ -35,25 +37,23 @@ class IRenderer {
         this.container = undefined;
         this.parentElement = undefined;
     }
-    drawFrame(_videoFrame) {
+    drawFrame(_videoFrame, _codecConfig) {
         if (!this.canvas)
             return;
         if (this.canvas.style.display !== '') {
             this.canvas.style.display = '';
         }
     }
-    set context({ renderMode, mirrorMode }) {
-        if (this.context.renderMode !== renderMode) {
-            this.context.renderMode = renderMode;
+    setContext(context) {
+        if (this.context.renderMode !== context.renderMode) {
+            this.context.renderMode = context.renderMode;
             this.updateRenderMode();
         }
-        if (this.context.mirrorMode !== mirrorMode) {
-            this.context.mirrorMode = mirrorMode;
+        if (this.context.mirrorMode !== context.mirrorMode) {
+            this.context.mirrorMode = context.mirrorMode;
             this.updateMirrorMode();
         }
-    }
-    get context() {
-        return this._context;
+        this.context = { ...this.context, ...context };
     }
     updateRenderMode() {
         if (!this.canvas || !this.container)
@@ -64,7 +64,7 @@ class IRenderer {
         const canvasAspectRatio = width / height;
         const widthScale = clientWidth / width;
         const heightScale = clientHeight / height;
-        const isHidden = this.context?.renderMode === AgoraMediaBase_1.RenderModeType.RenderModeHidden;
+        const isHidden = this.context.renderMode === AgoraMediaBase_1.RenderModeType.RenderModeHidden;
         let scale = 1;
         // If container's aspect ratio is larger than canvas's aspect ratio
         if (containerAspectRatio > canvasAspectRatio) {
@@ -103,5 +103,34 @@ class IRenderer {
             throw new Error(`Invalid rotation: ${rotation}, only 0, 90, 180, 270 are supported`);
         }
     }
+    getFps() {
+        let fps = 0;
+        if (!this.context.enableFps || !this.container) {
+            return fps;
+        }
+        if (this._startTime == null) {
+            this._startTime = performance.now();
+        }
+        else {
+            const elapsed = (performance.now() - this._startTime) / 1000;
+            fps = ++this._frameCount / elapsed;
+        }
+        let span = this.container.querySelector('span');
+        if (!span) {
+            span = document.createElement('span');
+            Object.assign(span.style, {
+                position: 'absolute',
+                bottom: '0',
+                left: '0',
+                zIndex: '10',
+                width: '55px',
+                background: '#fff',
+            });
+            this.container.style.position = 'relative';
+            this.container.appendChild(span);
+        }
+        span.innerText = `fps: ${fps.toFixed(0)}`;
+        return fps;
+    }
 }
 exports.IRenderer = IRenderer;

package/js/Renderer/IRendererCache.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IRendererCache = exports.isUseConnection = exports.generateRendererCacheKey = void 0;
+/**
+ * @ignore
+ */
+function generateRendererCacheKey({ channelId, uid, sourceType, }) {
+    return `${channelId}_${uid}_${sourceType}`;
+}
+exports.generateRendererCacheKey = generateRendererCacheKey;
+/**
+ * @ignore
+ */
+function isUseConnection(context) {
+    // if RtcConnection is not undefined, then use connection
+    return !!context.channelId && context.localUid !== undefined;
+}
+exports.isUseConnection = isUseConnection;
+class IRendererCache {
+    constructor({ channelId, uid, useWebCodecsDecoder, enableFps, sourceType, localUid, position, }) {
+        this.renderers = [];
+        this.cacheContext = {
+            channelId,
+            uid,
+            useWebCodecsDecoder,
+            enableFps,
+            sourceType,
+            localUid,
+            position,
+        };
+    }
+    get key() {
+        return generateRendererCacheKey(this.cacheContext);
+    }
+    findRenderer(view) {
+        return this.renderers.find((renderer) => renderer.parentElement === view);
+    }
+    addRenderer(renderer) {
+        this.renderers.push(renderer);
+    }
+    /**
+     * Remove the specified renderer if it is specified, otherwise remove all renderers
+     */
+    removeRenderer(renderer) {
+        let start = 0;
+        let deleteCount = this.renderers.length;
+        if (renderer) {
+            start = this.renderers.indexOf(renderer);
+            if (start < 0)
+                return;
+            deleteCount = 1;
+        }
+        this.renderers.splice(start, deleteCount).forEach((it) => it.unbind());
+    }
+    setRendererContext(context) {
+        if (context.view) {
+            const renderer = this.findRenderer(context.view);
+            if (renderer) {
+                renderer.setContext(context);
+                return true;
+            }
+            return false;
+        }
+        else {
+            this.renderers.forEach((it) => {
+                it.setContext(context);
+            });
+            return this.renderers.length > 0;
+        }
+    }
+    release() {
+        this.removeRenderer();
+    }
+}
+exports.IRendererCache = IRendererCache;

package/js/Renderer/RendererCache.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RendererCache = exports.generateRendererCacheKey = void 0;
+exports.RendererCache = void 0;
+const IrisApiEngine_1 = require("../Private/internal/IrisApiEngine");
 const Utils_1 = require("../Utils");
-function generateRendererCacheKey({ channelId, uid, sourceType, }) {
-    return `${channelId}_${uid}_${sourceType}`;
-}
-exports.generateRendererCacheKey = generateRendererCacheKey;
-class RendererCache {
-    constructor({ channelId, uid, sourceType, position }) {
-        this._renderers = [];
-        this._videoFrame = {
+const IRendererCache_1 = require("./IRendererCache");
+class RendererCache extends IRendererCache_1.IRendererCache {
+    constructor(context) {
+        super(context);
+        this.videoFrame = {
             yBuffer: Buffer.alloc(0),
             uBuffer: Buffer.alloc(0),
             vBuffer: Buffer.alloc(0),
+            alphaBuffer: Utils_1.AgoraEnv.encodeAlpha ? Buffer.alloc(0) : undefined,
             width: 0,
             height: 0,
             yStride: 0,
@@ -20,46 +19,24 @@ class RendererCache {
             vStride: 0,
             rotation: 0,
         };
-        this._context = { channelId, uid, sourceType, position };
         this._enabled = false;
     }
-    get key() {
-        return generateRendererCacheKey(this._context);
-    }
-    get renderers() {
-        return this._renderers;
-    }
-    get videoFrame() {
-        return this._videoFrame;
-    }
-    get context() {
-        return this._context;
-    }
-    /**
-     * @deprecated Use renderers instead
-     */
-    get renders() {
-        return this.renderers;
-    }
     /**
      * @deprecated Use videoFrame instead
      */
     get shareVideoFrame() {
         return this.videoFrame;
     }
-    get bridge() {
-        return Utils_1.AgoraEnv.AgoraElectronBridge;
-    }
     enable() {
         if (this._enabled)
             return;
-        this.bridge.EnableVideoFrameCache(this._context);
+        IrisApiEngine_1.AgoraElectronBridge.EnableVideoFrameCache(this.cacheContext);
         this._enabled = true;
     }
     disable() {
         if (!this._enabled)
             return;
-        this.bridge.DisableVideoFrameCache(this._context);
+        IrisApiEngine_1.AgoraElectronBridge.DisableVideoFrameCache(this.cacheContext);
         this._enabled = false;
     }
     shouldEnable() {
@@ -71,7 +48,9 @@ class RendererCache {
         }
     }
     draw() {
-        let { ret, isNewFrame } = this.bridge.GetVideoFrame(this.context, this.videoFrame);
+        let { ret, isNewFrame } = IrisApiEngine_1.AgoraElectronBridge.GetVideoFrame(this.cacheContext, this.videoFrame, {
+            encodeAlpha: Utils_1.AgoraEnv.encodeAlpha,
+        });
         switch (ret) {
             case 0: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::OK = 0
                 //
@@ -81,7 +60,12 @@ class RendererCache {
                 this.videoFrame.yBuffer = Buffer.alloc(yStride * height);
                 this.videoFrame.uBuffer = Buffer.alloc(uStride * height);
                 this.videoFrame.vBuffer = Buffer.alloc(vStride * height);
-                const result = this.bridge.GetVideoFrame(this.context, this.videoFrame);
+                if (Utils_1.AgoraEnv.encodeAlpha) {
+                    this.videoFrame.alphaBuffer = Buffer.alloc(this.videoFrame.width * this.videoFrame.height);
+                }
+                const result = IrisApiEngine_1.AgoraElectronBridge.GetVideoFrame(this.cacheContext, this.videoFrame, {
+                    encodeAlpha: Utils_1.AgoraEnv.encodeAlpha,
+                });
                 ret = result.ret;
                 isNewFrame = result.isNewFrame;
                 break;
@@ -89,49 +73,28 @@ class RendererCache {
                 (0, Utils_1.logDebug)('No renderer cache, please enable cache first');
                 return;
         }
+        if (!Utils_1.AgoraEnv.encodeAlpha) {
+            this.videoFrame.alphaBuffer = undefined;
+        }
         if (isNewFrame) {
             this.renderers.forEach((renderer) => {
                 renderer.drawFrame(this.videoFrame);
             });
         }
     }
-    findRenderer(view) {
-        return this._renderers.find((renderer) => renderer.parentElement === view);
-    }
     addRenderer(renderer) {
-        this._renderers.push(renderer);
+        super.addRenderer(renderer);
         this.shouldEnable();
     }
     /**
      * Remove the specified renderer if it is specified, otherwise remove all renderers
      */
     removeRenderer(renderer) {
-        let start = 0;
-        let deleteCount = this._renderers.length;
-        if (renderer) {
-            start = this._renderers.indexOf(renderer);
-            if (start < 0)
-                return;
-            deleteCount = 1;
-        }
-        this._renderers.splice(start, deleteCount).forEach((it) => it.unbind());
+        super.removeRenderer(renderer);
         this.shouldEnable();
     }
-    setRendererContext({ view, renderMode, mirrorMode, }) {
-        if (view) {
-            const renderer = this.findRenderer(view);
-            if (renderer) {
-                renderer.context = { renderMode, mirrorMode };
-                return true;
-            }
-            return false;
-        }
-        else {
-            this._renderers.forEach((it) => {
-                it.context = { renderMode, mirrorMode };
-            });
-            return this._renderers.length > 0;
-        }
+    release() {
+        super.release();
     }
 }
 exports.RendererCache = RendererCache;