From ad6400c18f08f316984e75eb49a48c0795951f2e Mon Sep 17 00:00:00 2001
From: guoxianzhe <53285945+guoxianzhe@users.noreply.github.com>
Date: Tue, 14 May 2024 15:07:03 +0800
Subject: [PATCH] fix: setup renderer may show rotate frame (#1190)

perf: set canvas hidden before first frame shown
---
 ts/Renderer/IRenderer.ts               | 9 ++++++++-
 ts/Renderer/WebGLRenderer/index.ts     | 1 +
 ts/Renderer/YUVCanvasRenderer/index.ts | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ts/Renderer/IRenderer.ts b/ts/Renderer/IRenderer.ts
index d37016b21..089fec146 100644
--- a/ts/Renderer/IRenderer.ts
+++ b/ts/Renderer/IRenderer.ts
@@ -23,6 +23,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);
   }
 
@@ -42,7 +43,13 @@ export abstract class IRenderer {
     this.parentElement = undefined;
   }
 
-  public abstract drawFrame(videoFrame: VideoFrame): void;
+  public drawFrame(_videoFrame?: VideoFrame): void {
+    if (!this.canvas) return;
+    //@ts-ignore
+    if (!this.canvas.checkVisibility()) {
+      this.canvas.style.display = '';
+    }
+  }
 
   public set context({ renderMode, mirrorMode }: Context) {
     if (this.context.renderMode !== renderMode) {
diff --git a/ts/Renderer/WebGLRenderer/index.ts b/ts/Renderer/WebGLRenderer/index.ts
index dea01c80d..a6bd0f999 100644
--- a/ts/Renderer/WebGLRenderer/index.ts
+++ b/ts/Renderer/WebGLRenderer/index.ts
@@ -250,6 +250,7 @@ export class WebGLRenderer extends IRenderer {
     );
 
     this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+    super.drawFrame();
   }
 
   protected override rotateCanvas({ width, height, rotation }: VideoFrame) {
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) {