I have a React project which feeds data from a python backend to be plotted on the canvas. I load all the backend data prior to the animation starting, but since there is a lot of data it still takes some time to animate (order 20-30 seconds for ~60 frames). I am using requestAnimationFrame to draw on the canvas in sequence. I was wondering if there was a way to save the data on the canvas in React and be able to download it as a movie or gif. I've never made anything be able to be downloaded in React let alone an animation. I was also hoping this would not take impossibly long as I have to render a lot of patch data onto the canvas. It seems that there are methods in native javascript that capture the canvas, which when used with the MediaRecorder API can save the data. Additionally there are other libraries such as CCapture to save this data but it all appears to be in native javascript. Is there a way to grab this data in react efficiently and be able to download it, and if so how?
I didn't succeeded in saving animated canvas as gif but I managed to save it as webm.
At first I tried to use CCapture library. I added a <script> tag to index.html
<script src="dist/CCapture.all.min.js"></script>
Then I added save function to my component
const capturer = new window.CCapture({ format: "webm", framerate: 60, quality: 90 });
const canvas = document.getElementsByTagName("canvas")[0];
function render() {
capturer.capture(canvas);
requestAnimationFrame(render);
}
setTimeout(() => {
capturer.stop();
capturer.save();
}, 5000);
render();
capturer.start();
But the video I got in the result was very fast, freezing and with a strange framerate.
Then I tried this answer and it worked perfectly. Video comes smooth and with normal quality.