Hi all, has anyone had success exporting three.js/r3f to video? I’ve tried ccapture.js and GitHub - gsimone/use-capture: 🎥 Record react-three-fiber scenes with ccapture.js with no success. My goal is to have the user be able to record the canvas and download the result as mp4. If anyone has successfully done this please shed some light!
use-capture should work, there’s a demo sandbox - when i try it it gives me a video. we have just used this to capture a video that will go onto the nextjs frontpage. any problems in particular that you were struggling with?
Hey drcmda, thanks for the response and love your work 
I tried use-capture and got an error when importing:
ERROR in ./node_modules/use-capture/dist/index.js 4:0-28
Module not found: Error: Can't resolve 'fs' in '/node_modules/use-capture/dist'
For context I’m using create-react-app. I’ll attach a screenshot with the error. Help would be appreciated!
Here is an example of creating an animated GIF from a scene:
Here is an example of recording a video and getting a blob of that file in webm format:
Hi notchris, I tried using media recorder previously but was very unsatisfied with framerate when exporting to video
There is no optimal in-browser, cross-browser solution from what I’ve attempted. Sending data to the server for it to parse / generate video is an option but comes with a whole bunch of difficulties. I’ve found pretty solid quality with mediarecorder results, you can pass the quality as part of the encoding parameter, right?
I was able to work around the “fs” error above by using react-app-rewired package. Now my issue is not having any output when pressing “Start Recording”. Could you possibly share a codesandbox in which you have use-capture working? The example sandbox from npm doesn’t seem to work/match what they wrote in the read me file.
If you’d like me to share my code please let me know!
Thanks!
Sure I’ll check it out!
1 Like
Oh, there is also “ffmpeg.wasm”: @ffmpeg/ffmpeg - npm
I think there are compatibility issues in some browsers, and some mobile devices will run out of memory.
im not familiar with this jsfiddle thing, i think it just cannot modules? does this sandbox work for you? r3f - use-capture - CodeSandbox