fix: setup renderer may show rotate frame (#1190)

perf: set canvas hidden before first frame shown
AgoraIO-Extensions · May 14, 2024 · ad6400c · ad6400c
1 parent 029b6d5
commit ad6400c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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
@@ -53,6 +53,7 @@ export class YUVCanvasRenderer extends IRenderer {
         }
       )
     );
+    super.drawFrame();
   }
 
   protected override rotateCanvas({ width, height, rotation }: VideoFrame) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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) {
@@ Expand Down @@