MediaRecorder Not Capturing Updated Konva Canvas in React

Question

I’m building a simple video creator using react-konva, where I manipulate a Konva canvas and record it using MediaRecorder. One feature I want to implement is simple subtitles—an array of strings displayed sequentially with a 1.5s gap between each (i.e., start recording → switch between all subtitles → stop recording).

I’ve implemented this, and it almost works. However, I keep running into this issue:

• The recorded video only contains a still background and the first subtitle, resulting in a short (~1s) video.
• If I manually drag the text around with my mouse during recording, everything is recorded properly.

Reproducing the Issue

I created a CodeSandbox example:

1. Click Start Recording, wait for the subtitles to change, then download the video.
2. Try again, but this time move the text with your mouse while recording—the video records correctly!

What I’ve Tried

To force canvas updates to propagate to the MediaStream, I’ve tried:

• clearCache(), draw(), batchDraw()
• Firing dragstart, dragmove, dragend events
• Forcing a slight position change (node.x(node.x() + 1)) after each subtitle update
• Saving the canvas as an image using toDataURL() after each subtitle update (the correct subtitles are shown on the saved images, but the recording still doesn't have the updated subtitles)

Nothing has worked. I’m not sure why manually dragging the text works but updating it programmatically doesn’t.

Any insights on why this happens or how to ensure all subtitle changes get recorded correctly?

Answer 1

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]);