Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

MediaRecorder Not Capturing Updated Konva Canvas in React

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:

Click Start Recording, wait for the subtitles to change, then download the video.
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*

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](https://codesandbox.io/p/sandbox/loving-tereshkova-mm92zg) from the question):

```js
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]);
```

Draft saved

Draft discarded

Edit Summary*

Cancel

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

MediaRecorder Not Capturing Updated Konva Canvas in React

Reproducing the Issue

What I’ve Tried

Answer*