agora-electron-sdk 0.0.0-dev.1

package/js/Renderer/IRenderer.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IRenderer = void 0;
+const AgoraBase_1 = require("../Private/AgoraBase");
+const AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
+class IRenderer {
+    constructor() {
+        this.context = {};
+        this._frameCount = 0;
+        this._startTime = null;
+    }
+    bind(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.canvas.style.display = 'none';
+        this.container.appendChild(this.canvas);
+    }
+    unbind() {
+        if (this.container && this.canvas?.parentNode === this.container) {
+            this.container.removeChild(this.canvas);
+        }
+        if (this.parentElement &&
+            this.container?.parentNode === this.parentElement) {
+            this.parentElement.removeChild(this.container);
+        }
+        this.canvas = undefined;
+        this.container = undefined;
+        this.parentElement = undefined;
+    }
+    drawFrame(_videoFrame, _codecConfig) {
+        if (!this.canvas)
+            return;
+        if (this.canvas.style.display !== '') {
+            this.canvas.style.display = '';
+        }
+    }
+    setContext(context) {
+        if (this.context.renderMode !== context.renderMode) {
+            this.context.renderMode = context.renderMode;
+            this.updateRenderMode();
+        }
+        if (this.context.mirrorMode !== context.mirrorMode) {
+            this.context.mirrorMode = context.mirrorMode;
+            this.updateMirrorMode();
+        }
+        this.context = { ...this.context, ...context };
+    }
+    updateRenderMode() {
+        if (!this.canvas || !this.container)
+            return;
+        const { clientWidth, clientHeight } = this.container;
+        const { width, height } = this.canvas;
+        const containerAspectRatio = clientWidth / clientHeight;
+        const canvasAspectRatio = width / height;
+        const widthScale = clientWidth / width;
+        const heightScale = clientHeight / height;
+        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) {
+            // Scale canvas to fit container's width on hidden mode
+            // Scale canvas to fit container's height on fit mode
+            scale = isHidden ? widthScale : heightScale;
+        }
+        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(${scale})`;
+    }
+    updateMirrorMode() {
+        if (!this.parentElement)
+            return;
+        Object.assign(this.parentElement.style, {
+            transform: this.context.mirrorMode === AgoraBase_1.VideoMirrorModeType.VideoMirrorModeEnabled
+                ? 'rotateY(180deg)'
+                : '',
+        });
+    }
+    rotateCanvas({ width, height, 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: ${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

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RendererCache = void 0;
+const IrisApiEngine_1 = require("../Private/internal/IrisApiEngine");
+const Utils_1 = require("../Utils");
+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,
+            uStride: 0,
+            vStride: 0,
+            rotation: 0,
+        };
+        this._enabled = false;
+    }
+    /**
+     * @deprecated Use videoFrame instead
+     */
+    get shareVideoFrame() {
+        return this.videoFrame;
+    }
+    enable() {
+        if (this._enabled)
+            return;
+        IrisApiEngine_1.AgoraElectronBridge.EnableVideoFrameCache(this.cacheContext);
+        this._enabled = true;
+    }
+    disable() {
+        if (!this._enabled)
+            return;
+        IrisApiEngine_1.AgoraElectronBridge.DisableVideoFrameCache(this.cacheContext);
+        this._enabled = false;
+    }
+    shouldEnable() {
+        if (this.renderers.length > 0) {
+            this.enable();
+        }
+        else {
+            this.disable();
+        }
+    }
+    draw() {
+        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
+                //
+                break;
+            case 1: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::RESIZED = 1
+                const { yStride, uStride, vStride, height } = this.videoFrame;
+                this.videoFrame.yBuffer = Buffer.alloc(yStride * height);
+                this.videoFrame.uBuffer = Buffer.alloc(uStride * height);
+                this.videoFrame.vBuffer = Buffer.alloc(vStride * height);
+                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;
+            case 2: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::NO_CACHE = 2
+                (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);
+            });
+        }
+    }
+    addRenderer(renderer) {
+        super.addRenderer(renderer);
+        this.shouldEnable();
+    }
+    /**
+     * Remove the specified renderer if it is specified, otherwise remove all renderers
+     */
+    removeRenderer(renderer) {
+        super.removeRenderer(renderer);
+        this.shouldEnable();
+    }
+    release() {
+        super.release();
+    }
+}
+exports.RendererCache = RendererCache;

package/js/Renderer/RendererManager.js

@@ -0,0 +1,301 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RendererManager = void 0;
+const AgoraSdk_1 = __importDefault(require("../AgoraSdk"));
+const AgoraBase_1 = require("../Private/AgoraBase");
+const AgoraMediaBase_1 = require("../Private/AgoraMediaBase");
+const Types_1 = require("../Types");
+const Utils_1 = require("../Utils");
+const IRendererCache_1 = require("./IRendererCache");
+const RendererCache_1 = require("./RendererCache");
+const WebCodecsRenderer_1 = require("./WebCodecsRenderer");
+const WebCodecsRendererCache_1 = require("./WebCodecsRendererCache");
+const WebGLRenderer_1 = require("./WebGLRenderer");
+const YUVCanvasRenderer_1 = require("./YUVCanvasRenderer");
+/**
+ * @ignore
+ */
+class RendererManager {
+    constructor() {
+        /**
+         * Currently, the remote video frame is observed in the pre-renderer position and you can not change it.
+         * the local video frame is observed in the pre-encoder position by default, and you can change it.
+         * @ignore
+         */
+        this.defaultObservedFramePosition = AgoraMediaBase_1.VideoModulePosition.PositionPreRenderer |
+            AgoraMediaBase_1.VideoModulePosition.PositionPreEncoder;
+        this.renderingFps = 15;
+        this._currentFrameCount = 0;
+        this._previousFirstFrameTime = 0;
+        this._rendererCaches = [];
+        this._context = {
+            renderMode: AgoraMediaBase_1.RenderModeType.RenderModeHidden,
+            mirrorMode: AgoraBase_1.VideoMirrorModeType.VideoMirrorModeDisabled,
+        };
+        this.rendererType = (0, Utils_1.isSupportWebGL)()
+            ? Types_1.RendererType.WEBGL
+            : Types_1.RendererType.SOFTWARE;
+    }
+    setRenderingFps(fps) {
+        this.renderingFps = fps;
+        if (this._renderingTimer) {
+            this.stopRendering();
+            this.startRendering();
+        }
+    }
+    set defaultChannelId(channelId) {
+        this._context.channelId = channelId;
+    }
+    get defaultChannelId() {
+        return this._context.channelId ?? '';
+    }
+    get defaultRenderMode() {
+        return this._context.renderMode;
+    }
+    get defaultMirrorMode() {
+        return this._context.mirrorMode;
+    }
+    release() {
+        this.stopRendering();
+        this.clearRendererCache();
+    }
+    presetRendererContext(context) {
+        //this is for preset default value
+        context.renderMode = context.renderMode || this.defaultRenderMode;
+        context.mirrorMode = context.mirrorMode || this.defaultMirrorMode;
+        context.useWebCodecsDecoder = context.useWebCodecsDecoder || false;
+        context.enableFps = context.enableFps || false;
+        context.position = context.position || this.defaultObservedFramePosition;
+        if (!Utils_1.AgoraEnv.CapabilityManager?.webCodecsDecoderEnabled) {
+            context.useWebCodecsDecoder = false;
+        }
+        switch (context.sourceType) {
+            case AgoraMediaBase_1.VideoSourceType.VideoSourceRemote:
+                if (context.uid === undefined) {
+                    throw new Error('uid is required');
+                }
+                context.channelId = context.channelId ?? this.defaultChannelId;
+                break;
+            case AgoraMediaBase_1.VideoSourceType.VideoSourceMediaPlayer:
+                if (context.mediaPlayerId === undefined) {
+                    throw new Error('mediaPlayerId is required');
+                }
+                context.channelId = '';
+                context.uid = context.mediaPlayerId;
+                break;
+            case undefined:
+                if (context.uid) {
+                    context.sourceType = AgoraMediaBase_1.VideoSourceType.VideoSourceRemote;
+                }
+                break;
+            default:
+                context.channelId = '';
+                context.uid = 0;
+                break;
+        }
+        return context;
+    }
+    addOrRemoveRenderer(context) {
+        // To be compatible with the old API
+        let { setupMode = AgoraBase_1.VideoViewSetupMode.VideoViewSetupAdd } = context;
+        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);
+        }
+    }
+    addRendererToCache(context) {
+        const checkedContext = this.presetRendererContext(context);
+        if (!checkedContext.view)
+            return undefined;
+        if (this.findRenderer(checkedContext.view)) {
+            throw new Error('You have already added this view to the renderer');
+        }
+        let rendererCache = this.getRendererCache(checkedContext);
+        if (!rendererCache) {
+            if (context.useWebCodecsDecoder) {
+                rendererCache = new WebCodecsRendererCache_1.WebCodecsRendererCache(checkedContext);
+            }
+            else {
+                rendererCache = new RendererCache_1.RendererCache(checkedContext);
+            }
+            this._rendererCaches.push(rendererCache);
+        }
+        rendererCache.addRenderer(this.createRenderer(checkedContext));
+        if (!context.useWebCodecsDecoder) {
+            this.startRendering();
+        }
+        return rendererCache;
+    }
+    removeRendererFromCache(context) {
+        const checkedContext = this.presetRendererContext(context);
+        const rendererCache = this.getRendererCache(checkedContext);
+        if (!rendererCache)
+            return;
+        if (checkedContext.view) {
+            const renderer = rendererCache.findRenderer(checkedContext.view);
+            if (!renderer)
+                return;
+            rendererCache.removeRenderer(renderer);
+        }
+        else {
+            rendererCache.removeRenderer();
+        }
+        if (rendererCache.renderers.length === 0) {
+            rendererCache.release();
+            this._rendererCaches.splice(this._rendererCaches.indexOf(rendererCache), 1);
+        }
+    }
+    clearRendererCache() {
+        for (const rendererCache of this._rendererCaches) {
+            rendererCache.release();
+        }
+        this._rendererCaches.splice(0);
+    }
+    getRendererCache(context) {
+        return this._rendererCaches.find((cache) => cache.key === (0, IRendererCache_1.generateRendererCacheKey)(context));
+    }
+    getRenderers(context) {
+        return this.getRendererCache(context)?.renderers || [];
+    }
+    findRenderer(view) {
+        for (const rendererCache of this._rendererCaches) {
+            const renderer = rendererCache.findRenderer(view);
+            if (renderer)
+                return renderer;
+        }
+        return undefined;
+    }
+    createRenderer(context, rendererType = this.rendererType) {
+        let renderer;
+        switch (rendererType) {
+            case Types_1.RendererType.WEBGL:
+                if (context.useWebCodecsDecoder) {
+                    renderer = new WebCodecsRenderer_1.WebCodecsRenderer();
+                }
+                else {
+                    renderer = new WebGLRenderer_1.WebGLRenderer(this.handleWebGLFallback(context).bind(this));
+                    renderer.bind(context.view);
+                }
+                break;
+            case Types_1.RendererType.SOFTWARE:
+                renderer = new YUVCanvasRenderer_1.YUVCanvasRenderer();
+                renderer.bind(context.view);
+                break;
+            default:
+                throw new Error('Unknown renderer type');
+        }
+        renderer.setContext(context);
+        return renderer;
+    }
+    startRendering() {
+        if (this._renderingTimer)
+            return;
+        const renderingLooper = () => {
+            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
+            const currentFrameTime = performance.now();
+            // Calculate the time difference between the current frame and the previous frame
+            const deltaTime = currentFrameTime - this._previousFirstFrameTime;
+            // Calculate the expected time of the current frame
+            const 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 that do not use WebCodecs
+            for (const rendererCache of this._rendererCaches.filter((cache) => cache instanceof RendererCache_1.RendererCache)) {
+                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();
+    }
+    doRendering(rendererCache) {
+        rendererCache.draw();
+    }
+    handleWebGLFallback(context) {
+        return (renderer) => {
+            const renderers = this.getRenderers(context);
+            renderer.unbind();
+            const newRenderer = this.createRenderer(context, Types_1.RendererType.SOFTWARE);
+            renderers.splice(renderers.indexOf(renderer), 1, newRenderer);
+        };
+    }
+    handleWebCodecsFallback(context) {
+        let engine = (0, AgoraSdk_1.default)();
+        engine.getMediaEngine().unregisterVideoEncodedFrameObserver({});
+        if (context.uid) {
+            if ((0, IRendererCache_1.isUseConnection)(context)) {
+                engine.setRemoteVideoSubscriptionOptionsEx(context.uid, {
+                    type: AgoraBase_1.VideoStreamType.VideoStreamHigh,
+                    encodedFrameOnly: false,
+                }, {
+                    channelId: context.channelId,
+                    localUid: context.localUid,
+                });
+            }
+            else {
+                engine.setRemoteVideoSubscriptionOptions(context.uid, {
+                    type: AgoraBase_1.VideoStreamType.VideoStreamHigh,
+                    encodedFrameOnly: false,
+                });
+            }
+        }
+        Utils_1.AgoraEnv.enableWebCodecsDecoder = false;
+        Utils_1.AgoraEnv.CapabilityManager?.setWebCodecsDecoderEnabled(false);
+        let renderers = this.getRenderers(context);
+        for (let renderer of renderers) {
+            this.addOrRemoveRenderer({
+                ...renderer.context,
+                setupMode: AgoraBase_1.VideoViewSetupMode.VideoViewSetupReplace,
+            });
+        }
+    }
+    stopRendering() {
+        if (this._renderingTimer) {
+            window.clearTimeout(this._renderingTimer);
+            this._renderingTimer = undefined;
+        }
+    }
+    setRendererContext(context) {
+        const checkedContext = this.presetRendererContext(context);
+        for (const rendererCache of this._rendererCaches) {
+            const result = rendererCache.setRendererContext(checkedContext);
+            if (result) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+exports.RendererManager = RendererManager;