chore: optimize

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) {

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();
   }
 }

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();
   }
 

ts/Renderer/YUVCanvasRenderer/index.ts

@@ -53,6 +53,7 @@ export class YUVCanvasRenderer extends IRenderer {
         }
       )
     );
+    super.drawFrame();
   }
 
   protected override rotateCanvas({ width, height, rotation }: VideoFrame) {