Cambié de usar contexto 2D a usar contexto WebGL . Estoy tratando de encontrar una manera de esperar hasta que los píxeles se dibujen en la pantalla.

Con contexto 2D haría algo como esto

 const handlePaintFrame = () => { const ctx: CanvasRenderingContext2D | any = videoCanvasRef?.current?.getContext("2d"); if (video.current && videoCanvasRef.current && ctx) { if (chroma?.keyColor) { drawChromaFrame(ctx, width, height); } else { ctx.drawImage(video.current, 0, 0, width, height); } const rendered = () => { setTimeout(() => { onReady("video"); }, 20); }; const startRender = () => { requestAnimationFrame(rendered); }; const img = new Image(); img.onload = () => { requestAnimationFrame(startRender); }; img.onerror = (e: any) => { console.log("Image error:", { e }); }; img.src = videoCanvasRef.current.toDataURL(); } };

Actualmente, mi código de dibujo para el contexto WebGL es algo como esto

 const drawTexture = () => { // render if (gl && video.current) { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video.current); drawScene(locationRef.current, buffersRef.current); } }; const handlePaintFrame = () => { if (video.current) { if (chroma?.keyColor) { // drawChromaFrame(ctx, width, height); } else { drawTexture(); // TODO: We need to wait until texture is drawn setTimeout(() => { onReady("video"); }, 100); } } };