From 5c5b50f3280224ca0dff51ed414d00bb219850da Mon Sep 17 00:00:00 2001
From: gxz <guoxianzhe@agora.io>
Date: Tue, 14 May 2024 15:37:57 +0800
Subject: [PATCH] chore: optimize

---
 ts/Renderer/IRenderer.ts               | 8 +++++++-
 ts/Renderer/WebCodecsRenderer/index.ts | 1 +
 ts/Renderer/WebGLRenderer/index.ts     | 1 +
 ts/Renderer/YUVCanvasRenderer/index.ts | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ts/Renderer/IRenderer.ts b/ts/Renderer/IRenderer.ts
index ab5ca3e2b..3fa41df8a 100644
--- a/ts/Renderer/IRenderer.ts
+++ b/ts/Renderer/IRenderer.ts
@@ -26,6 +26,7 @@ export abstract class IRenderer {
     });
     this.parentElement.appendChild(this.container);
     this.canvas = document.createElement('canvas');
+    this.canvas.style.display = 'none';
     this.container.appendChild(this.canvas);
   }
 
@@ -45,7 +46,12 @@ export abstract class IRenderer {
     this.parentElement = undefined;
   }
 
-  public abstract drawFrame(videoFrame: VideoFrame): void;
+  public drawFrame(_videoFrame?: VideoFrame): void {
+    if (!this.canvas) return;
+    if (this.canvas.style.display !== '') {
+      this.canvas.style.display = '';
+    }
+  }
 
   public setContext(context: RendererContext) {
     if (this.context.renderMode !== context.renderMode) {
diff --git a/ts/Renderer/WebCodecsRenderer/index.ts b/ts/Renderer/WebCodecsRenderer/index.ts
index 833817c01..06aaacc4c 100755
--- a/ts/Renderer/WebCodecsRenderer/index.ts
+++ b/ts/Renderer/WebCodecsRenderer/index.ts
@@ -135,6 +135,7 @@ export class WebCodecsRenderer extends IRenderer {
       // Draw the frame.
       this.gl.drawArrays(this.gl.TRIANGLE_FAN, 0, 4);
     }
+    super.drawFrame();
     this.getFps();
   }
 }
diff --git a/ts/Renderer/WebGLRenderer/index.ts b/ts/Renderer/WebGLRenderer/index.ts
index 90deaf8a8..0c0f32c3f 100644
--- a/ts/Renderer/WebGLRenderer/index.ts
+++ b/ts/Renderer/WebGLRenderer/index.ts
@@ -252,6 +252,7 @@ export class WebGLRenderer extends IRenderer {
     );
 
     this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+    super.drawFrame();
     this.getFps();
   }
 
diff --git a/ts/Renderer/YUVCanvasRenderer/index.ts b/ts/Renderer/YUVCanvasRenderer/index.ts
index 30fea481a..083fef087 100644
--- a/ts/Renderer/YUVCanvasRenderer/index.ts
+++ b/ts/Renderer/YUVCanvasRenderer/index.ts
@@ -53,6 +53,7 @@ export class YUVCanvasRenderer extends IRenderer {
         }
       )
     );
+    super.drawFrame();
   }
 
   protected override rotateCanvas({ width, height, rotation }: VideoFrame) {