search

theatre-js / theatre

Motion design editor for the web
https://www.theatrejs.com
Apache License 2.0
11.38k stars 361 forks source link

Add FFMPEG Rendering Module to Theatre.js #56

Open jonobr1 opened 2 years ago

jonobr1 commented 2 years ago

Based off of @mrdoob's project Frame.js there is a way to render out <canvas /> elements in the browser. It could be nice to add this same render functionality to Theatre.js. FFMPEG is loaded here and I think it can also be loaded as an ES6 module. The render logic can be found here.

I've actually already rigged this up in my own personal project. If you have an idea of where or how this could be implemented, I'd be happy to contribute and make a PR for it.

Awesome project!

tomByrer commented 2 years ago

I was also thinking of capturing animations to video. There is mifi/reactive-video & remotion. (I almost went with remotion, but for my big project his license is a bad fit. IIRC they both use Playright/Puppeteer to render, screenshot via the headless browser API, then stich.

There is also CCapture which captures the <canvas> directly, no need of headless browser.... but you might end up using a headless browser anyway if you want to render remotely / automated.

tomByrer commented 1 year ago

I'm still hoping....

vimlesh1975 commented 1 year ago

I have implemented recording in my code. https://github.com/vimlesh1975/ReactCasparClient/blob/main/client/src/theatrejs/WebAnimator.jsx#L2054 Can be tested here. https://vimlesh1975.github.io/ReactCasparClient/WebAnimator A video showing recording this https://www.youtube.com/watch?v=5sgR8514II4&t=310s

tombombadilom commented 1 year ago

this is awesome !!!  could it be recorded with transparent canvas and WebCam en background as WebAR animation ? 

Le samedi 26 août 2023 à 04:18 -0700, VIMLESH KUMAR a écrit :

I have implemented recording in my code. https://github.com/vimlesh1975/ReactCasparClient/blob/main/client/src/theatrejs/WebAnimator.jsx#L2054 Can be tested here. https://vimlesh1975.github.io/ReactCasparClient/WebAnimator A video showing recording this https://www.youtube.com/watch?v=5sgR8514II4&t=310s — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: <theatre- @.***>

vimlesh1975 commented 1 year ago

Yes. Now I have added a addWebam option in right clock menu. AddWebCam

https://www.youtube.com/watch?v=zE4f_LY_Yog

tombombadilom commented 1 year ago

awesome

Le lundi 28 août 2023 à 04:46 -0700, VIMLESH KUMAR a écrit :

Yes. Now I have added a addWebam option in right clock menu. https://www.youtube.com/watch?v=zE4f_LY_Yog — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: <theatre- @.***>

akre54 commented 1 year ago

This is also doable via MediaStreamTrackProcessor and getDisplayMedia using the WebCodecs API

Examples: https://gist.github.com/akre54/c066717f5f0e77c008e83b3377c8ec31 https://gist.github.com/akre54/e93ab2ce27999aecb109e38085f2e7a7