shengwang-electron-sdk 4.6.2-rc.1

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

@@ -0,0 +1,139 @@
+"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(context) {
+        this.parentElement = context.view;
+        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(uid, _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();
+        }
+        if (this.context.enableAlphaMask !== context.enableAlphaMask) {
+            this.context.enableAlphaMask = context.enableAlphaMask;
+        }
+        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,91 @@
+"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, enableAlphaMask, }) {
+        // 性能统计数据
+        this.actualFps = 0;
+        this.avgFrameTime = 0;
+        this.maxFrameTime = 0;
+        this.minFrameTime = 0;
+        this.avgFrameInterval = 0;
+        this.maxFrameInterval = 0;
+        this.minFrameInterval = 0;
+        this.renderers = [];
+        this.cacheContext = {
+            channelId,
+            uid,
+            useWebCodecsDecoder,
+            enableFps,
+            sourceType,
+            localUid,
+            position,
+            enableAlphaMask,
+        };
+        this.callbackContext = {
+            connection: { channelId, localUid },
+            sourceType: sourceType,
+        };
+    }
+    setCallbackContext(connection, sourceType) {
+        this.callbackContext = { connection, sourceType };
+    }
+    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,252 @@
+"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._renderingFps = 0;
+        this._isRendering = false;
+        this._lastRenderTime = 0;
+        // 性能监控相关属性
+        this._frameTimes = []; // 存储最近100帧的渲染时间
+        this._frameIntervals = []; // 存储最近100帧的帧间隔
+        this._lastFrameTimestamp = 0; // 上一帧的时间戳
+        this._statsInterval = 100; // 每100帧输出一次统计
+        this.videoFrame = {
+            yBuffer: Buffer.alloc(0),
+            uBuffer: Buffer.alloc(0),
+            vBuffer: Buffer.alloc(0),
+            alphaBuffer: Buffer.alloc(0),
+            width: 0,
+            height: 0,
+            yStride: 0,
+            uStride: 0,
+            vStride: 0,
+            rotation: 0,
+            colorSpace: undefined,
+        };
+        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;
+        if (Utils_1.AgoraEnv.AgoraRendererManager) {
+            this._renderingFps = Utils_1.AgoraEnv.AgoraRendererManager.renderingFps;
+        }
+        this.startRendering();
+    }
+    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() { }
+    fetchVideoFrame() {
+        const renderAlpha = this.cacheContext.enableAlphaMask ?? false;
+        let needRender = false;
+        let { ret, hasMoreFrame } = IrisApiEngine_1.AgoraElectronBridge.GetVideoFrame(this.cacheContext, this.videoFrame, {
+            renderAlpha: renderAlpha,
+        });
+        switch (ret) {
+            case 0: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::OK = 0
+                //
+                needRender = true;
+                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 (renderAlpha) {
+                    this.videoFrame.alphaBuffer = Buffer.alloc(this.videoFrame.width * this.videoFrame.height);
+                }
+                const result = IrisApiEngine_1.AgoraElectronBridge.GetVideoFrame(this.cacheContext, this.videoFrame, {
+                    renderAlpha: renderAlpha,
+                });
+                ret = result.ret;
+                hasMoreFrame = result.hasMoreFrame;
+                needRender = false;
+                break;
+            case 2: // GET_VIDEO_FRAME_CACHE_RETURN_TYPE::NO_CACHE = 2
+                (0, Utils_1.logDebug)('No renderer cache, please enable cache first');
+                return { hasMoreFrame: false, needRender: false };
+        }
+        if (!renderAlpha) {
+            if (this.videoFrame.alphaBuffer &&
+                this.videoFrame.alphaBuffer.length > 0) {
+                this.videoFrame.alphaBuffer = Buffer.alloc(0);
+            }
+        }
+        else {
+            if (!this.videoFrame.alphaBuffer ||
+                this.videoFrame.alphaBuffer.length === 0) {
+                this.videoFrame.alphaBuffer = Buffer.alloc(this.videoFrame.width * this.videoFrame.height);
+            }
+        }
+        if (hasMoreFrame) {
+            this.renderers.forEach((renderer) => {
+                renderer.drawFrame(this.cacheContext.uid, this.videoFrame);
+            });
+        }
+        return { hasMoreFrame, needRender };
+    }
+    addRenderer(renderer) {
+        super.addRenderer(renderer);
+        this.shouldEnable();
+    }
+    /**
+     * 渲染当前视频帧
+     * 此方法假设已经通过fetchVideoFrame获取了新帧
+     */
+    renderFrame() {
+        if (this.renderers.length === 0)
+            return;
+        // 记录当前时间戳，用于计算帧间隔
+        const now = performance.now();
+        // 计算帧间隔并记录
+        if (this._lastFrameTimestamp > 0) {
+            const interval = now - this._lastFrameTimestamp;
+            this._frameIntervals.push(interval);
+        }
+        this._lastFrameTimestamp = now;
+        // 使用高精度计数器测量渲染时间
+        const renderStartTime = performance.now();
+        // 执行渲染
+        this.renderers.forEach((renderer) => {
+            renderer.drawFrame(this.cacheContext.uid, this.videoFrame);
+        });
+        // 计算渲染耗时
+        const renderEndTime = performance.now();
+        const frameTime = renderEndTime - renderStartTime;
+        // 更新帧时间统计
+        this._frameTimes.push(frameTime);
+        // 每statsInterval帧输出一次统计信息
+        if (this._frameTimes.length >= this._statsInterval) {
+            this._outputPerformanceStats();
+        }
+    }
+    /**
+     * 输出性能统计信息
+     * 包括帧时间和帧间隔的统计数据
+     */
+    _outputPerformanceStats() {
+        if (this._frameTimes.length === 0)
+            return;
+        // 计算帧时间统计
+        this.avgFrameTime =
+            this._frameTimes.reduce((a, b) => a + b, 0) / this._frameTimes.length;
+        this.maxFrameTime = Math.max(...this._frameTimes);
+        this.minFrameTime = Math.min(...this._frameTimes);
+        // 计算帧间隔统计
+        this.avgFrameInterval = 0;
+        this.maxFrameInterval = 0;
+        this.minFrameInterval = Number.MAX_VALUE;
+        if (this._frameIntervals.length > 0) {
+            this.avgFrameInterval =
+                this._frameIntervals.reduce((a, b) => a + b, 0) /
+                    this._frameIntervals.length;
+            this.maxFrameInterval = Math.max(...this._frameIntervals);
+            this.minFrameInterval = Math.min(...this._frameIntervals);
+        }
+        // 计算实际帧率
+        this.actualFps =
+            this._frameIntervals.length > 0
+                ? 1000 / this.avgFrameInterval
+                : this._renderingFps;
+        // 输出帧时间统计
+        (0, Utils_1.logDebug)(`[FPS_STATS][UID:${this.callbackContext.connection.localUid}] 帧时间统计(${this._frameTimes.length}帧):`, `平均=${this.avgFrameTime.toFixed(2)}ms`, `最大=${this.maxFrameTime.toFixed(2)}ms`, `最小=${this.minFrameTime.toFixed(2)}ms`);
+        // 输出帧间隔统计
+        if (this._frameIntervals.length > 0) {
+            (0, Utils_1.logDebug)(`[FPS_STATS][UID:${this.callbackContext.connection.localUid}] 帧间隔统计(${this._frameIntervals.length}帧):`, `实际帧率=${this.actualFps.toFixed(2)}fps`, `目标帧率=${this._renderingFps}fps`, `平均=${this.avgFrameInterval.toFixed(2)}ms`, `最大=${this.maxFrameInterval.toFixed(2)}ms`, `最小=${this.minFrameInterval.toFixed(2)}ms`);
+        }
+        // 重置统计数据
+        this._frameTimes = [];
+        this._frameIntervals = [];
+    }
+    /**
+     * 开始独立渲染循环
+     */
+    startRendering() {
+        if (this._renderingTimer || this._isRendering)
+            return;
+        this._isRendering = true;
+        const renderingLooper = () => {
+            if (!this._isRendering)
+                return;
+            const currentTime = performance.now();
+            const timeSinceLastRender = this._lastRenderTime
+                ? currentTime - this._lastRenderTime
+                : 0;
+            const frameInterval = 1000 / this._renderingFps;
+            // 如果距离上次渲染的时间不足一帧间隔，等待
+            if (this._lastRenderTime && timeSinceLastRender < frameInterval) {
+                const waitTime = frameInterval - timeSinceLastRender;
+                this._renderingTimer = window.setTimeout(renderingLooper, waitTime);
+                return;
+            }
+            // 记录当前时间作为本次循环的开始时间
+            this._lastRenderTime = currentTime;
+            // 获取第一帧并渲染
+            // 无论hasMoreFrame是true还是false，都渲染当前帧
+            // 因为fetchVideoFrame总是会获取一帧数据（如果有的话）
+            let { hasMoreFrame, needRender } = this.fetchVideoFrame();
+            if (needRender) {
+                this.renderFrame();
+            }
+            // 如果hasMoreFrame为true，表示还有更多帧需要获取
+            while (hasMoreFrame) {
+                // 获取下一帧
+                let { hasMoreFrame: nextHasMoreFrame, needRender } = this.fetchVideoFrame();
+                hasMoreFrame = nextHasMoreFrame;
+                if (needRender) {
+                    this.renderFrame();
+                }
+            }
+            // 安排下一帧
+            this._renderingTimer = window.setTimeout(renderingLooper, 0);
+        };
+        // 启动渲染循环
+        this._renderingTimer = window.setTimeout(renderingLooper, 0);
+    }
+    /**
+     * Remove the specified renderer if it is specified, otherwise remove all renderers
+     */
+    removeRenderer(renderer) {
+        super.removeRenderer(renderer);
+        this.shouldEnable();
+    }
+    stopRendering() {
+        if (!this._isRendering)
+            return;
+        if (this._renderingTimer) {
+            window.clearTimeout(this._renderingTimer);
+            this._renderingTimer = undefined;
+        }
+        this._isRendering = false;
+    }
+    release() {
+        super.release();
+    }
+}
+exports.RendererCache = RendererCache;