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

package/js/{Renderer → ts/Renderer}/AgoraView.js

@@ -9,6 +9,7 @@ const CHANNEL_ID_STRING = 'channel-id';
 const POSITION_STRING = 'position';
 const RENDERER_CONTENT_MODE_STRING = 'renderer-content-mode';
 const RENDERER_MIRROR_STRING = 'renderer-mirror';
+const ENABLE_ALPHA_MASK_STRING = 'enable-alpha-mask';
 const observedAttributes = [
     VIDEO_SOURCE_TYPE_STRING,
     UID_STRING,
@@ -16,6 +17,7 @@ const observedAttributes = [
     POSITION_STRING,
     RENDERER_CONTENT_MODE_STRING,
     RENDERER_MIRROR_STRING,
+    ENABLE_ALPHA_MASK_STRING,
 ];
 class AgoraView extends HTMLElement {
     static get observedAttributes() {
@@ -95,11 +97,22 @@ class AgoraView extends HTMLElement {
             this.removeAttribute(RENDERER_MIRROR_STRING);
         }
     }
+    get enableAlphaMask() {
+        return this.getAttribute(ENABLE_ALPHA_MASK_STRING) === 'true';
+    }
+    set enableAlphaMask(val) {
+        if (val) {
+            this.setAttribute(ENABLE_ALPHA_MASK_STRING, String(val));
+        }
+        else {
+            this.removeAttribute(ENABLE_ALPHA_MASK_STRING);
+        }
+    }
     constructor() {
         super();
         this.isConnectedCallback = false;
         this.initializeRender = () => {
-            const { channelId, uid, sourceType, position, renderMode, renderMirror } = this;
+            const { channelId, uid, sourceType, position, renderMode, renderMirror, enableAlphaMask, } = this;
             Utils_1.AgoraEnv.AgoraRendererManager?.addOrRemoveRenderer({
                 sourceType,
                 view: this,
@@ -111,16 +124,18 @@ class AgoraView extends HTMLElement {
                     ? AgoraBase_1.VideoMirrorModeType.VideoMirrorModeEnabled
                     : AgoraBase_1.VideoMirrorModeType.VideoMirrorModeDisabled,
                 setupMode: AgoraBase_1.VideoViewSetupMode.VideoViewSetupReplace,
+                enableAlphaMask,
             });
         };
         this.destroyRender = () => {
-            const { channelId, uid, sourceType, position } = this;
+            const { channelId, uid, sourceType, position, enableAlphaMask } = this;
             Utils_1.AgoraEnv.AgoraRendererManager?.removeRendererFromCache({
                 channelId,
                 position,
                 uid,
                 sourceType,
                 view: this,
+                enableAlphaMask,
             });
         };
     }
@@ -135,6 +150,7 @@ class AgoraView extends HTMLElement {
         const isSetRenderOption = [
             RENDERER_CONTENT_MODE_STRING,
             RENDERER_MIRROR_STRING,
+            ENABLE_ALPHA_MASK_STRING,
         ].includes(attrName);
         if (isSetRenderOption) {
             Utils_1.AgoraEnv.AgoraRendererManager?.setRendererContext({
@@ -143,6 +159,7 @@ class AgoraView extends HTMLElement {
                 mirrorMode: this.renderMirror
                     ? AgoraBase_1.VideoMirrorModeType.VideoMirrorModeEnabled
                     : AgoraBase_1.VideoMirrorModeType.VideoMirrorModeDisabled,
+                enableAlphaMask: this.enableAlphaMask,
             });
             return;
         }

package/js/{Renderer → ts/Renderer}/IRenderer.js

@@ -9,8 +9,8 @@ class IRenderer {
         this._frameCount = 0;
         this._startTime = null;
     }
-    bind(element) {
-        this.parentElement = element;
+    bind(context) {
+        this.parentElement = context.view;
         this.container = document.createElement('div');
         Object.assign(this.container.style, {
             width: '100%',
@@ -20,7 +20,7 @@ class IRenderer {
             alignItems: 'center',
             overflow: 'hidden',
         });
-        this.parentElement.appendChild(this.container);
+        this.parentElement?.appendChild(this.container);
         this.canvas = document.createElement('canvas');
         this.canvas.style.display = 'none';
         this.container.appendChild(this.canvas);
@@ -37,7 +37,7 @@ class IRenderer {
         this.container = undefined;
         this.parentElement = undefined;
     }
-    drawFrame(_videoFrame, _codecConfig) {
+    drawFrame(uid, _videoFrame, _codecConfig) {
         if (!this.canvas)
             return;
         if (this.canvas.style.display !== '') {
@@ -53,6 +53,9 @@ class IRenderer {
             this.context.mirrorMode = context.mirrorMode;
             this.updateMirrorMode();
         }
+        if (this.context.enableAlphaMask !== context.enableAlphaMask) {
+            this.context.enableAlphaMask = context.enableAlphaMask;
+        }
         this.context = { ...this.context, ...context };
     }
     updateRenderMode() {

package/js/{Renderer → ts/Renderer}/IRendererCache.js

@@ -17,7 +17,15 @@ function isUseConnection(context) {
 }
 exports.isUseConnection = isUseConnection;
 class IRendererCache {
-    constructor({ channelId, uid, useWebCodecsDecoder, enableFps, sourceType, localUid, position, }) {
+    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,
@@ -27,7 +35,15 @@ class IRendererCache {
             sourceType,
             localUid,
             position,
+            enableAlphaMask,
         };
+        this.callbackContext = {
+            connection: { channelId, localUid },
+            sourceType: sourceType,
+        };
+    }
+    setCallbackContext(connection, sourceType) {
+        this.callbackContext = { connection, sourceType };
     }
     get key() {
         return generateRendererCacheKey(this.cacheContext);

package/js/ts/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;

package/js/{Renderer → ts/Renderer}/RendererManager.js

@@ -28,8 +28,6 @@ class RendererManager {
         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,
@@ -41,10 +39,6 @@ class RendererManager {
     }
     setRenderingFps(fps) {
         this.renderingFps = fps;
-        if (this._renderingTimer) {
-            this.stopRendering();
-            this.startRendering();
-        }
     }
     set defaultChannelId(channelId) {
         this._context.channelId = channelId;
@@ -59,7 +53,6 @@ class RendererManager {
         return this._context.mirrorMode;
     }
     release() {
-        this.stopRendering();
         this.clearRendererCache();
     }
     presetRendererContext(context) {
@@ -69,6 +62,7 @@ class RendererManager {
         context.useWebCodecsDecoder = context.useWebCodecsDecoder || false;
         context.enableFps = context.enableFps || false;
         context.position = context.position || this.defaultObservedFramePosition;
+        context.enableAlphaMask = context.enableAlphaMask || false;
         if (!Utils_1.AgoraEnv.CapabilityManager?.webCodecsDecoderEnabled) {
             context.useWebCodecsDecoder = false;
         }
@@ -131,10 +125,8 @@ class RendererManager {
             }
             this._rendererCaches.push(rendererCache);
         }
-        rendererCache.addRenderer(this.createRenderer(checkedContext));
-        if (!context.useWebCodecsDecoder) {
-            this.startRendering();
-        }
+        const renderer = this.createRenderer(checkedContext);
+        rendererCache.addRenderer(renderer);
         return rendererCache;
     }
     removeRendererFromCache(context) {
@@ -152,12 +144,14 @@ class RendererManager {
             rendererCache.removeRenderer();
         }
         if (rendererCache.renderers.length === 0) {
+            rendererCache.stopRendering();
             rendererCache.release();
             this._rendererCaches.splice(this._rendererCaches.indexOf(rendererCache), 1);
         }
     }
     clearRendererCache() {
         for (const rendererCache of this._rendererCaches) {
+            rendererCache.stopRendering();
             rendererCache.release();
         }
         this._rendererCaches.splice(0);
@@ -165,6 +159,12 @@ class RendererManager {
     getRendererCache(context) {
         return this._rendererCaches.find((cache) => cache.key === (0, IRendererCache_1.generateRendererCacheKey)(context));
     }
+    getRendererCachesBySourceType(sourceType) {
+        return this._rendererCaches.filter((cache) => cache.cacheContext.sourceType === sourceType);
+    }
+    getRendererCaches() {
+        return this._rendererCaches;
+    }
     getRenderers(context) {
         return this.getRendererCache(context)?.renderers || [];
     }
@@ -185,12 +185,12 @@ class RendererManager {
                 }
                 else {
                     renderer = new WebGLRenderer_1.WebGLRenderer(this.handleWebGLFallback(context).bind(this));
-                    renderer.bind(context.view);
+                    renderer.bind(context);
                 }
                 break;
             case Types_1.RendererType.SOFTWARE:
                 renderer = new YUVCanvasRenderer_1.YUVCanvasRenderer();
-                renderer.bind(context.view);
+                renderer.bind(context);
                 break;
             default:
                 throw new Error('Unknown renderer type');
@@ -198,51 +198,6 @@ class RendererManager {
         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);
@@ -281,12 +236,6 @@ class RendererManager {
             });
         }
     }
-    stopRendering() {
-        if (this._renderingTimer) {
-            window.clearTimeout(this._renderingTimer);
-            this._renderingTimer = undefined;
-        }
-    }
     setRendererContext(context) {
         const checkedContext = this.presetRendererContext(context);
         for (const rendererCache of this._rendererCaches) {

package/js/{Renderer → ts/Renderer}/WebCodecsRenderer/index.js

@@ -9,12 +9,12 @@ class WebCodecsRenderer extends IRenderer_1.IRenderer {
         super();
         this.rendererType = Types_1.RendererType.WEBCODECSRENDERER;
     }
-    bind(element) {
-        super.bind(element);
+    bind(context) {
+        super.bind(context);
         if (!this.canvas)
             return;
         this.offscreenCanvas = this.canvas.transferControlToOffscreen();
-        this.gl = (0, Utils_1.getContextByCanvas)(this.offscreenCanvas);
+        this.gl = (0, Utils_1.getContextByCanvas)(this.offscreenCanvas, this.context.enableAlphaMask);
         if (!this.gl)
             return;
         const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
@@ -58,7 +58,7 @@ class WebCodecsRenderer extends IRenderer_1.IRenderer {
         this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
         this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
     }
-    drawFrame(frame, _codecConfig) {
+    drawFrame(uid, frame, _codecConfig) {
         if (!this.offscreenCanvas || !frame)
             return;
         this.offscreenCanvas.width = _codecConfig.codedWidth;
@@ -80,7 +80,7 @@ class WebCodecsRenderer extends IRenderer_1.IRenderer {
             // Draw the frame.
             this.gl.drawArrays(this.gl.TRIANGLE_FAN, 0, 4);
         }
-        super.drawFrame();
+        super.drawFrame(uid);
         this.getFps();
     }
     rotateCanvas({ rotation }) {

package/js/{Renderer → ts/Renderer}/WebCodecsRendererCache.js

@@ -40,7 +40,7 @@ class WebCodecsRendererCache extends IRendererCache_1.IRendererCache {
                 if (renderer.rendererType !== Types_1.RendererType.WEBCODECSRENDERER) {
                     continue;
                 }
-                renderer.bind(renderer.context.view);
+                renderer.bind(renderer.context);
             }
             try {
                 this._decoder.decoderConfigure(_data.videoEncodedFrameInfo);
@@ -111,5 +111,17 @@ class WebCodecsRendererCache extends IRendererCache_1.IRendererCache {
         this._decoder = null;
         super.release();
     }
+    fetchVideoFrame() {
+        return { hasMoreFrame: false, needRender: false };
+    }
+    renderFrame() {
+        return;
+    }
+    startRendering() {
+        return;
+    }
+    stopRendering() {
+        return;
+    }
 }
 exports.WebCodecsRendererCache = WebCodecsRendererCache;