diff --git a/example/src/renderer/examples/basic/VideoDecoder/VideoDecoder.tsx b/example/src/renderer/examples/basic/VideoDecoder/VideoDecoder.tsx index 00ec34e1e..d754d7fa3 100644 --- a/example/src/renderer/examples/basic/VideoDecoder/VideoDecoder.tsx +++ b/example/src/renderer/examples/basic/VideoDecoder/VideoDecoder.tsx @@ -5,6 +5,7 @@ import { IRtcEngineEventHandler, IRtcEngineEx, LogFilterType, + RenderModeType, RtcConnection, RtcStats, VideoSourceType, @@ -195,6 +196,7 @@ export default class VideoDecoder useWebCodecsDecoder: true, enableFps: true, sourceType: VideoSourceType.VideoSourceRemote, + renderMode: RenderModeType.RenderModeFit, }) ) : undefined} @@ -206,6 +208,7 @@ export default class VideoDecoder useWebCodecsDecoder: true, enableFps: true, sourceType: VideoSourceType.VideoSourceRemote, + renderMode: RenderModeType.RenderModeFit, }) ) : undefined} diff --git a/ts/Renderer/WebCodecsRenderer/index.ts b/ts/Renderer/WebCodecsRenderer/index.ts index 28a6c3b5d..ebb481a20 100755 --- a/ts/Renderer/WebCodecsRenderer/index.ts +++ b/ts/Renderer/WebCodecsRenderer/index.ts @@ -103,8 +103,6 @@ export class WebCodecsRenderer extends IRenderer { if (!this.offscreenCanvas || !frame) return; this.updateRenderMode(); this.rotateCanvas({ - width: _codecConfig.codedWidth, - height: _codecConfig.codedHeight, rotation: _codecConfig.rotation, }); if (!this.gl) return; @@ -127,7 +125,7 @@ export class WebCodecsRenderer extends IRenderer { this.gl.drawingBufferWidth, this.gl.drawingBufferHeight ); - this.gl.clearColor(1.0, 0.0, 0.0, 1.0); + this.gl.clearColor(0.0, 0.0, 0.0, 0.0); this.gl.clear(this.gl.COLOR_BUFFER_BIT); // Draw the frame. this.gl.drawArrays(this.gl.TRIANGLE_FAN, 0, 4); @@ -136,20 +134,8 @@ export class WebCodecsRenderer extends IRenderer { this.getFps(); } - protected override rotateCanvas({ width, height, rotation }: VideoFrame) { + protected override rotateCanvas({ rotation }: VideoFrame) { if (!this.offscreenCanvas || !this.canvas) return; - - if (rotation === 0 || rotation === 180) { - this.offscreenCanvas.width = width!; - this.offscreenCanvas.height = height!; - } else if (rotation === 90 || rotation === 270) { - this.offscreenCanvas.height = width!; - this.offscreenCanvas.width = height!; - } else { - throw new Error( - `Invalid rotation: ${rotation}, only 0, 90, 180, 270 are supported` - ); - } this.canvas.style.transform += ` rotateZ(${rotation}deg)`; } }