79466718

Date: 2025-02-25 13:29:40
Score: 0.5
Natty:
Report link

When calling the captureStream() the stream that is returned does not include still frames. This means that if the canvas isn't redrawn, nothing will be sent to the stream. To have a sequence of still frames be sent to the stream, the canvas needs to redrawn in every frame and not just when updating the subtitles. This can be done using useEffect and requestAnimationFrame by adding the following code to the RecordingProvider (I've updated the CodeSandbox example from the question):

useEffect(() => {
    let animationFrameId = null;

    const refreshCanvas = () => {
      if (canvasRef.current) {
        canvasRef.current.getLayer().batchDraw();
      }

      if (isRecording) {
        console.log("Refreshing");
        animationFrameId = requestAnimationFrame(refreshCanvas);
      }
    };

    if (isRecording) {
      refreshCanvas();
    }

    return () => {
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
      }
    };
}, [isRecording]);
Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Starts with a question (0.5): When
  • Low reputation (0.5):
Posted by: Matija Špeletić