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