3d-force-graph icon indicating copy to clipboard operation
3d-force-graph copied to clipboard

Video capture of graph animations

Open LiamK opened this issue 3 years ago • 2 comments

Hi, I've created a 3d-force-graph I'm very happy with.
I would like to convert it to a video format I can import in another application. I want to start it, navigate around a bit, then stop it and export to video, somehow. I tried screen capture, but it was very unsatisfactory. I found CCapture.js and that depends on getting access to the canvas. However, from reviewing issues here, it appears that that is not possible because there isn't a 2d canvas that CCapture could use.

So... what would work for capturing a video of the animation?

LiamK avatar Feb 16 '23 15:02 LiamK

In the end I was able to capture decent video by adjusting resolution and frame rate. Kind of a hack. But this would still be a nice feature.

LiamK avatar Mar 07 '23 19:03 LiamK

I also needed this and found CCapture.js and canvas-capture work ok. The issue is they hook into the requestAnimationFrame and the exported video is very choppy/missing frames.

What ended up working beautifully was using canvas.captureStream()

Add a MediaRecorder and build up the buffer, then save as a webm file.

bradjasper avatar Apr 11 '24 01:04 bradjasper