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

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebGLRenderer = void 0;
+const AgoraMediaBase_1 = require("../../Private/AgoraMediaBase");
 const Types_1 = require("../../Types");
 const Utils_1 = require("../../Utils");
 const IRenderer_1 = require("../IRenderer");
@@ -24,31 +25,48 @@ const yuvShaderSource = `
   uniform sampler2D Vtex;
   uniform sampler2D Atex;
   uniform bool hasAlpha;
+
+  // Dynamic color space conversion parameters
+  uniform float u_yOffset;
+  uniform float u_yScale;
+  uniform float u_rVCoeff;
+  uniform float u_gUCoeff;
+  uniform float u_gVCoeff;
+  uniform float u_bUCoeff;
+
   varying vec2 v_texCoord;
+
   void main(void) {
-    float nx,ny,r,g,b,y,u,v,a;
-    mediump vec4 txl,ux,vx;
-    nx=v_texCoord[0];
-    ny=v_texCoord[1];
-    y=texture2D(Ytex,vec2(nx,ny)).r;
-    u=texture2D(Utex,vec2(nx,ny)).r;
-    v=texture2D(Vtex,vec2(nx,ny)).r;
+    float nx = v_texCoord[0];
+    float ny = v_texCoord[1];
+
+    float y = texture2D(Ytex, vec2(nx, ny)).r;
+    float u = texture2D(Utex, vec2(nx, ny)).r;
+    float v = texture2D(Vtex, vec2(nx, ny)).r;
+    float a;
+
     if (hasAlpha) {
-      a=texture2D(Atex,vec2(nx,ny)).r;
+      a = texture2D(Atex, vec2(nx, ny)).r;
     } else {
-      a=1.0;
+      a = 1.0;
     }
-    y=1.1643*(y-0.0625);
-    u=u-0.5;
-    v=v-0.5;
-    r=y+1.5958*v;
-    g=y-0.39173*u-0.81290*v;
-    b=y+2.017*u;
-    gl_FragColor=vec4(r,g,b,a);
+
+    // Apply dynamic color space conversion
+    y = u_yScale * (y - u_yOffset);
+    u = u - 0.5;
+    v = v - 0.5;
+
+    float r = y + u_rVCoeff * v;
+    float g = y + u_gUCoeff * u + u_gVCoeff * v;
+    float b = y + u_bUCoeff * u;
+
+    gl_FragColor = vec4(r, g, b, a);
   }`;
 class WebGLRenderer extends IRenderer_1.IRenderer {
     constructor(fallback) {
         super();
+        // Color space uniform locations
+        this.colorSpaceUniforms = {};
         this.handleContextLost = (event) => {
             event.preventDefault();
             (0, Utils_1.logWarn)('webglcontextlost', event);
@@ -78,25 +96,25 @@ class WebGLRenderer extends IRenderer_1.IRenderer {
         this.surfaceBuffer = null;
         this.fallback = fallback;
     }
-    bind(view) {
-        super.bind(view);
+    bind(context) {
+        super.bind(context);
         this.canvas?.addEventListener('webglcontextlost', this.handleContextLost, false);
         this.canvas?.addEventListener('webglcontextrestored', this.handleContextRestored, false);
         const getContext = (contextNames = ['webgl2', 'webgl', 'experimental-webgl']) => {
             for (let i = 0; i < contextNames.length; i++) {
                 const contextName = contextNames[i];
-                const context = this.canvas?.getContext(contextName, {
+                const canvasContext = this.canvas?.getContext(contextName, {
                     depth: true,
                     stencil: true,
-                    alpha: true,
+                    alpha: context.enableAlphaMask,
                     antialias: false,
                     premultipliedAlpha: true,
-                    preserveDrawingBuffer: !Utils_1.AgoraEnv.encodeAlpha,
+                    preserveDrawingBuffer: !context.enableAlphaMask,
                     powerPreference: 'default',
                     failIfMajorPerformanceCaveat: false,
                 });
-                if (context) {
-                    return context;
+                if (canvasContext) {
+                    return canvasContext;
                 }
             }
             return null;
@@ -135,11 +153,13 @@ class WebGLRenderer extends IRenderer_1.IRenderer {
         this.gl = null;
         super.unbind();
     }
-    drawFrame({ width, height, yStride, uStride, vStride, yBuffer, uBuffer, vBuffer, rotation, alphaBuffer, }) {
+    drawFrame(uid, { width, height, yStride, uStride, vStride, yBuffer, uBuffer, vBuffer, rotation, alphaBuffer, colorSpace, }) {
         this.rotateCanvas({ width, height, rotation });
         this.updateRenderMode();
         if (!this.gl || !this.program)
             return;
+        // Set color space conversion parameters based on frame properties
+        this.setColorSpaceUniforms(colorSpace);
         const left = 0, top = 0, right = yStride - width, bottom = 0;
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
         const xWidth = width + left + right;
@@ -188,7 +208,7 @@ class WebGLRenderer extends IRenderer_1.IRenderer {
                 pixels: vBuffer,
             },
         };
-        if (alphaBuffer) {
+        if (alphaBuffer && alphaBuffer.length > 0 && this.context.enableAlphaMask) {
             textures[this.gl.TEXTURE3] = {
                 texture: this.aTexture,
                 stride: width,
@@ -206,7 +226,7 @@ class WebGLRenderer extends IRenderer_1.IRenderer {
             }
         }
         this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
-        super.drawFrame();
+        super.drawFrame(uid);
     }
     rotateCanvas({ width, height, rotation }) {
         super.rotateCanvas({ width, height, rotation });
@@ -272,6 +292,13 @@ class WebGLRenderer extends IRenderer_1.IRenderer {
         this.positionLocation = this.gl.getAttribLocation(this.program, 'a_position');
         this.texCoordLocation = this.gl.getAttribLocation(this.program, 'a_texCoord');
         this.hasAlpha = this.gl.getUniformLocation(this.program, 'hasAlpha');
+        // Get color space uniform locations
+        this.colorSpaceUniforms.yOffset = this.gl.getUniformLocation(this.program, 'u_yOffset');
+        this.colorSpaceUniforms.yScale = this.gl.getUniformLocation(this.program, 'u_yScale');
+        this.colorSpaceUniforms.rVCoeff = this.gl.getUniformLocation(this.program, 'u_rVCoeff');
+        this.colorSpaceUniforms.gUCoeff = this.gl.getUniformLocation(this.program, 'u_gUCoeff');
+        this.colorSpaceUniforms.gVCoeff = this.gl.getUniformLocation(this.program, 'u_gVCoeff');
+        this.colorSpaceUniforms.bUCoeff = this.gl.getUniformLocation(this.program, 'u_bUCoeff');
         this.surfaceBuffer = this.gl.createBuffer();
         this.texCoordBuffer = this.gl.createBuffer();
         const createTexture = (texture, textureIndex, textureName) => {
@@ -293,6 +320,8 @@ class WebGLRenderer extends IRenderer_1.IRenderer {
         this.uTexture = createTexture(this.gl.TEXTURE1, 1, 'Utex');
         this.vTexture = createTexture(this.gl.TEXTURE2, 2, 'Vtex');
         this.aTexture = createTexture(this.gl.TEXTURE3, 3, 'Atex');
+        // Set default color space parameters (BT.601 Limited Range)
+        this.setColorSpaceUniforms();
     }
     releaseTextures() {
         this.gl?.deleteProgram(this.program);
@@ -305,10 +334,134 @@ class WebGLRenderer extends IRenderer_1.IRenderer {
         this.yTexture = null;
         this.uTexture = null;
         this.vTexture = null;
+        this.aTexture = null;
+        this.hasAlpha = null;
         this.gl?.deleteBuffer(this.texCoordBuffer);
         this.gl?.deleteBuffer(this.surfaceBuffer);
         this.texCoordBuffer = null;
         this.surfaceBuffer = null;
     }
+    /**
+     * Get color space conversion parameters based on color space and range
+     */
+    getColorSpaceParams(colorSpace) {
+        // Default to BT.601 Limited if not specified
+        const primaries = colorSpace?.primaries ?? AgoraMediaBase_1.PrimaryID.PrimaryidBt709;
+        const range = colorSpace?.range ?? AgoraMediaBase_1.RangeID.RangeidLimited;
+        // Y offset and scale based on ran
+        let yOffset;
+        let yScale;
+        if (range === AgoraMediaBase_1.RangeID.RangeidFull) {
+            yOffset = 0.0;
+            yScale = 1.0;
+        }
+        else {
+            // Limited range: Y [16, 235] -> [0, 1]
+            yOffset = 16.0 / 255.0; // 0.0625
+            yScale = 255.0 / (235.0 - 16.0); // 1.1643
+        }
+        // Color space conversion coefficients
+        let rVCoeff, gUCoeff, gVCoeff, bUCoeff;
+        switch (primaries) {
+            case AgoraMediaBase_1.PrimaryID.PrimaryidBt709:
+                if (range === AgoraMediaBase_1.RangeID.RangeidFull) {
+                    // BT.709 Full Range
+                    rVCoeff = 1.5748;
+                    gUCoeff = -0.187324;
+                    gVCoeff = -0.468124;
+                    bUCoeff = 1.8556;
+                }
+                else {
+                    // BT.709 Limited Range
+                    rVCoeff = 1.792741;
+                    gUCoeff = -0.213249;
+                    gVCoeff = -0.532909;
+                    bUCoeff = 2.112402;
+                }
+                break;
+            case AgoraMediaBase_1.PrimaryID.PrimaryidBt2020:
+                if (range === AgoraMediaBase_1.RangeID.RangeidFull) {
+                    // BT.2020 Full Range
+                    rVCoeff = 1.4746;
+                    gUCoeff = -0.164553;
+                    gVCoeff = -0.571353;
+                    bUCoeff = 1.8814;
+                }
+                else {
+                    // BT.2020 Limited Range
+                    rVCoeff = 1.678674;
+                    gUCoeff = -0.187326;
+                    gVCoeff = -0.650424;
+                    bUCoeff = 2.141772;
+                }
+                break;
+            case AgoraMediaBase_1.PrimaryID.PrimaryidSmpte170m || AgoraMediaBase_1.PrimaryID.PrimaryidBt470bg:
+                if (range === AgoraMediaBase_1.RangeID.RangeidFull) {
+                    // BT.601 Full Range
+                    rVCoeff = 1.402;
+                    gUCoeff = -0.344136;
+                    gVCoeff = -0.714136;
+                    bUCoeff = 1.772;
+                }
+                else {
+                    // BT.601 Limited Range
+                    rVCoeff = 1.596027;
+                    gUCoeff = -0.391762;
+                    gVCoeff = -0.812968;
+                    bUCoeff = 2.017232;
+                }
+                break;
+            default:
+                if (range === AgoraMediaBase_1.RangeID.RangeidFull) {
+                    // BT.601 Full Range
+                    rVCoeff = 1.402;
+                    gUCoeff = -0.344136;
+                    gVCoeff = -0.714136;
+                    bUCoeff = 1.772;
+                }
+                else {
+                    // BT.601 Limited Range (your original values)
+                    rVCoeff = 1.596027;
+                    gUCoeff = -0.391762;
+                    gVCoeff = -0.812968;
+                    bUCoeff = 2.017232;
+                }
+                break;
+        }
+        return {
+            yOffset,
+            yScale,
+            rVCoeff,
+            gUCoeff,
+            gVCoeff,
+            bUCoeff,
+        };
+    }
+    /**
+     * Set color space uniform values in the shader
+     */
+    setColorSpaceUniforms(colorSpace) {
+        if (!this.gl || !this.program)
+            return;
+        const params = this.getColorSpaceParams(colorSpace);
+        if (this.colorSpaceUniforms.yOffset) {
+            this.gl.uniform1f(this.colorSpaceUniforms.yOffset, params.yOffset);
+        }
+        if (this.colorSpaceUniforms.yScale) {
+            this.gl.uniform1f(this.colorSpaceUniforms.yScale, params.yScale);
+        }
+        if (this.colorSpaceUniforms.rVCoeff) {
+            this.gl.uniform1f(this.colorSpaceUniforms.rVCoeff, params.rVCoeff);
+        }
+        if (this.colorSpaceUniforms.gUCoeff) {
+            this.gl.uniform1f(this.colorSpaceUniforms.gUCoeff, params.gUCoeff);
+        }
+        if (this.colorSpaceUniforms.gVCoeff) {
+            this.gl.uniform1f(this.colorSpaceUniforms.gVCoeff, params.gVCoeff);
+        }
+        if (this.colorSpaceUniforms.bUCoeff) {
+            this.gl.uniform1f(this.colorSpaceUniforms.bUCoeff, params.bUCoeff);
+        }
+    }
 }
 exports.WebGLRenderer = WebGLRenderer;

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

@@ -5,13 +5,13 @@ const IRenderer_1 = require("../IRenderer");
 const YUVBuffer = require('yuv-buffer');
 const YUVCanvas = require('yuv-canvas');
 class YUVCanvasRenderer extends IRenderer_1.IRenderer {
-    bind(element) {
-        super.bind(element);
+    bind(context) {
+        super.bind(context);
         this.frameSink = YUVCanvas.attach(this.canvas, {
             webGL: false,
         });
     }
-    drawFrame({ width, height, yStride, uStride, vStride, yBuffer, uBuffer, vBuffer, rotation, alphaBuffer, }) {
+    drawFrame(uid, { width, height, yStride, uStride, vStride, yBuffer, uBuffer, vBuffer, rotation, alphaBuffer, }) {
         this.rotateCanvas({ width, height, rotation });
         this.updateRenderMode();
         if (!this.frameSink)
@@ -32,9 +32,16 @@ class YUVCanvasRenderer extends IRenderer_1.IRenderer {
             bytes: vBuffer,
             stride: vStride,
         });
-        frame.a = alphaBuffer;
+        if (alphaBuffer &&
+            alphaBuffer.length > 0 &&
+            alphaBuffer.length === width * height) {
+            frame.a =
+                alphaBuffer instanceof Uint8Array
+                    ? alphaBuffer
+                    : new Uint8Array(alphaBuffer);
+        }
         this.frameSink.drawFrame(frame);
-        super.drawFrame();
+        super.drawFrame(uid);
     }
     rotateCanvas({ width, height, rotation }) {
         super.rotateCanvas({ width, height, rotation });

package/js/{Utils.js → ts/Utils.js}

@@ -98,13 +98,13 @@ function classMix(...mixins) {
     class MixClass {
         constructor() {
             for (let mixin of mixins) {
-                copyProperties(this, new mixin()); // 拷贝实例属性
+                copyProperties(this, new mixin()); // Copy instance properties
             }
         }
     }
     for (let mixin of mixins) {
-        copyProperties(MixClass, mixin); // 拷贝静态属性
-        copyProperties(MixClass.prototype, mixin.prototype); // 拷贝原型属性
+        copyProperties(MixClass, mixin); // Copy static properties
+        copyProperties(MixClass.prototype, mixin.prototype); // Copy prototype properties
     }
     return MixClass;
 }
@@ -152,17 +152,17 @@ exports.isSupportWebGL = isSupportWebGL;
  */
 function getContextByCanvas(
 // eslint-disable-next-line auto-import/auto-import
-canvas) {
+canvas, enableAlphaMask = false) {
     const contextNames = ['webgl2', 'webgl', 'experimental-webgl'];
     for (const contextName of contextNames) {
         //@ts-ignore
         const context = canvas.getContext(contextName, {
             depth: true,
             stencil: true,
-            alpha: false,
+            alpha: enableAlphaMask,
             antialias: false,
             premultipliedAlpha: true,
-            preserveDrawingBuffer: true,
+            preserveDrawingBuffer: !enableAlphaMask,
             powerPreference: 'default',
             failIfMajorPerformanceCaveat: false,
         });
@@ -181,7 +181,7 @@ exports.AgoraEnv = {
     enableDebugLogging: false,
     webEnvReady: true,
     enableWebCodecsDecoder: false,
-    encodeAlpha: false,
     videoFallbackStrategy: Types_1.VideoFallbackStrategy.PerformancePriority,
     maxDecodeRetryCount: 50,
+    enableArgusCounters: true,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-electron-sdk",
-  "version": "4.5.2",
+  "version": "4.5.3-dev.2",
   "description": "agora-electron-sdk",
   "main": "js/AgoraSdk",
   "types": "types/AgoraSdk.d.ts",
@@ -116,7 +116,8 @@
       "tagName": "v${version}"
     },
     "npm": {
-      "publish": true
+      "publish": true,
+      "skipChecks": true
     },
     "github": {
       "release": true
@@ -131,25 +132,37 @@
   "dependencies": {
     "buffer": "^6.0.3",
     "cross-env": "^7.0.3",
-    "download": "^8.0.0",
+    "node-fetch": "^2.7.0",
+    "extract-zip": "^2.0.1",
     "eventemitter3": "^5.0.1",
     "fs-extra": "^11.1.1",
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.0",
     "json-bigint": "^1.0.0",
     "jsonfile": "^6.1.0",
     "lodash.isequal": "^4.5.0",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.8",
+    "shelljs": "^0.8.5",
     "semver": "^7.6.0",
-    "shelljs": "^0.8.4",
     "ts-interface-checker": "^1.0.2",
-    "winston": "^3.3.3",
+    "winston": "^3.11.0",
     "yuv-buffer": "1.0.0",
-    "yuv-canvas": "1.2.6"
+    "yuv-canvas": "1.2.6",
+    "archive-type": "^4.0.0",
+    "content-disposition": "^0.5.2",
+    "decompress": "^4.2.1",
+    "ext-name": "^5.0.0",
+    "file-type": "^11.1.0",
+    "filenamify": "^3.0.0",
+    "get-stream": "^4.1.0",
+    "got": "^11.8.5",
+    "make-dir": "^4.0.0",
+    "p-event": "^2.1.0",
+    "pify": "^4.0.1"
   },
   "agora_electron": {
-    "iris_sdk_win": "https://download.agora.io/sdk/release/iris_4.5.1-build.1_DCG_Windows_Video_Standalone_20250305_1103_622.zip",
-    "iris_sdk_mac": "https://download.agora.io/sdk/release/iris_4.5.1-build.1_DCG_Mac_Video_Standalone_20250305_1105_590.zip",
-    "native_sdk_win": "https://download.agora.io/sdk/release/Agora_Native_SDK_for_Windows_v4.5.1_FULL.zip",
-    "native_sdk_mac": "https://download.agora.io/sdk/release/Agora_Native_SDK_for_Mac_v4.5.1_FULL.zip"
+    "iris_sdk_win": "https://download.agora.io/sdk/release/iris_4.5.3-dev.8_DCG_Windows_Video_Standalone_20260403_0226_31945.zip",
+    "iris_sdk_mac": "https://download.agora.io/sdk/release/iris_4.5.3-dev.8_DCG_Mac_Video_Standalone_20260403_0226_32882.zip",
+    "native_sdk_win": "https://download.agora.io/sdk/release/Agora_Native_SDK_for_Windows_v4.5.3_FULL.zip",
+    "native_sdk_mac": "https://download.agora.io/sdk/release/Agora_Native_SDK_for_Mac_v4.5.3_FULL.zip"
   }
 }

package/scripts/checkElectron.js

@@ -1,8 +1,8 @@
 const path = require('path');
 
-const download = require('download');
-
 const { cleanDir } = require('./clean');
+const download = require('./download');
+
 const getConfig = require('./getConfig');
 const logger = require('./logger');
 
@@ -30,9 +30,11 @@ const checkElectron = async (cb) => {
   let downloadUrl = `https://download.agora.io/sdk/release/electron-v${electron_version}-${platform}-${arch}.zip`;
   logger.info(`Downloading:${downloadUrl}`);
   await cleanDir(tp);
+
   await download(downloadUrl, tp, {
     extract: true,
   });
+
   logger.info(`Finish download:${downloadUrl}`);
   logger.info(`sync electron success`);
   cb();

package/scripts/download.js

@@ -0,0 +1,102 @@
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const { URL } = require('url');
+
+const archiveType = require('archive-type');
+const contentDisposition = require('content-disposition');
+const decompress = require('decompress');
+const extName = require('ext-name');
+const fileType = require('file-type');
+const filenamify = require('filenamify');
+const getStream = require('get-stream');
+const got = require('got');
+const makeDir = require('make-dir');
+const pEvent = require('p-event');
+const pify = require('pify');
+
+const fsP = pify(fs);
+const filenameFromPath = (res) =>
+  path.basename(new URL(res.requestUrl).pathname);
+
+const getExtFromMime = (res) => {
+  const header = res.headers['content-type'];
+
+  if (!header) {
+    return null;
+  }
+
+  const exts = extName.mime(header);
+
+  if (exts.length !== 1) {
+    return null;
+  }
+
+  return exts[0].ext;
+};
+
+const getFilename = (res, data) => {
+  const header = res.headers['content-disposition'];
+
+  if (header) {
+    const parsed = contentDisposition.parse(header);
+
+    if (parsed.parameters && parsed.parameters.filename) {
+      return parsed.parameters.filename;
+    }
+  }
+
+  let filename = filenameFromPath(res);
+
+  if (!path.extname(filename)) {
+    const ext = (fileType(data) || {}).ext || getExtFromMime(res);
+
+    if (ext) {
+      filename = `${filename}.${ext}`;
+    }
+  }
+
+  return filename;
+};
+
+module.exports = (uri, output, opts) => {
+  opts = {
+    ...opts,
+    encoding: null,
+    responseType: 'buffer',
+    rejectUnauthorized: process.env.npm_config_strict_ssl !== 'false',
+  };
+
+  const stream = got.stream(uri);
+
+  const promise = pEvent(stream, 'response')
+    .then((res) => {
+      const encoding = opts.encoding === null ? 'buffer' : opts.encoding;
+      return Promise.all([getStream(stream, { encoding }), res]);
+    })
+    .then((result) => {
+      const [data, res] = result;
+
+      if (!output) {
+        return opts.extract && archiveType(data)
+          ? decompress(data, opts)
+          : data;
+      }
+
+      const filename = opts.filename || filenamify(getFilename(res, data));
+      const outputFilepath = path.join(output, filename);
+
+      if (opts.extract && archiveType(data)) {
+        return decompress(data, path.dirname(outputFilepath), opts);
+      }
+
+      return makeDir(path.dirname(outputFilepath))
+        .then(() => fsP.writeFile(outputFilepath, data))
+        .then(() => data);
+    });
+
+  stream.then = promise.then.bind(promise);
+  stream.catch = promise.catch.bind(promise);
+
+  return stream;
+};

package/scripts/downloadPrebuild.js

@@ -1,9 +1,10 @@
 const path = require('path');
 
-const download = require('download');
 const fs = require('fs-extra');
 
 const { cleanDir, buildDir } = require('./clean');
+const download = require('./download');
+
 const getConfig = require('./getConfig');
 const logger = require('./logger');
 const { getOS } = require('./util');

package/scripts/synclib.js

@@ -1,8 +1,8 @@
 const path = require('path');
 
-const download = require('download');
-
 const { destIrisSDKDir, cleanDir, destNativeSDKDir } = require('./clean');
+const download = require('./download');
+
 const getConfig = require('./getConfig');
 const logger = require('./logger');
 const { getOS, moveFile, getIrisStandAlone } = require('./util');

package/ts/AgoraSdk.ts

@@ -25,12 +25,7 @@ export * from './Utils';
 const instance = new RtcEngineExInternal();
 
 /**
- * Creates one IRtcEngineEx object.
- *
- * Currently, the Agora RTC SDK v4.x supports creating only one IRtcEngineEx object for each app.
- *
- * @returns
- * One IRtcEngineEx object.
+ * @ignore
  */
 export function createAgoraRtcEngine(options?: AgoraEnvOptions): IRtcEngineEx {
   Object.assign(AgoraEnv, options);
@@ -38,12 +33,7 @@ export function createAgoraRtcEngine(options?: AgoraEnvOptions): IRtcEngineEx {
 }
 
 /**
- * Gets one IMediaPlayerCacheManager instance.
- *
- * Before calling any APIs in the IMediaPlayerCacheManager class, you need to call this method to get a cache manager instance of a media player.
- *
- * @returns
- * The IMediaPlayerCacheManager instance.
+ * @ignore
  */
 export function getMediaPlayerCacheManager(): IMediaPlayerCacheManager {
   return new IMediaPlayerCacheManagerImpl();

package/ts/Decoder/index.ts

@@ -64,7 +64,11 @@ export class WebCodecsDecoder {
       if (renderer.rendererType !== RendererType.WEBCODECSRENDERER) {
         continue;
       }
-      renderer.drawFrame(this.pendingFrame, this._currentCodecConfig!);
+      renderer.drawFrame(
+        this._cacheContext.uid!,
+        this.pendingFrame,
+        this._currentCodecConfig!
+      );
       this.pendingFrame = null;
     }
   }