Open JonnyBurger opened 2 years ago
I've put together a rudimentary proof of concept, using webpack's module federation.
There are two projects, my-chassis running on port 3001 and my-video on port 3002 .
my-chassis is the host/container where the remotion preview runs, and it uses module federation to load my-video's exposed bootstrap export.
The export is an object with definition:
{
mount: (
ref: string | HTMLElement,
{ frame, config, continueRender }: {frame: number; config: VideoConfig, continueRender: () => void}
) => void
}
my-chassis then:
remoteEntry.js
output file of my-video to get this export, mount(root, props)
function, passing in the current frame, video config, and a continueRender function as props.I was able to preview the remote composition without issues, and generate this video:
window.remotion_imported = false
, and this can be discussed later.useCurrentFrame()
and useVideoConfig()
in remote compositions are not exposed in remotion's core, and a forked branch has been created for this.Sequence
, Series
, Freeze
and maybe more, have not been tested, but can be in further investigations if this approach is considered to be promising.@mykeels You are a true king! 👑 👑
I'll explore what is being needed to add this in the mid-term and this will be a huge help for sure. Maybe other libraries like @remotion/gif or @remotion/media-utils need also to be in the array to get rid of multiple copies of Remotion. That's just one idea but I will investigate that too.
Crucial components for allowing use of useCurrentFrame() and useVideoConfig() in remote compositions are not exposed in remotion's core, and a forked branch has been created for this.
Many of these can be accessed using import {Internals} from "remotion"
!
The video won't be showing when using rich timeline in remotion preview
@musafiroon Create a separate issue for this and add relevant information: https://www.remotion.dev/docs/get-help#provide-information
Also, because of some issues, we will be removing the Rich Timeline mode from v4. So be aware that this mode will soon no longer be supported.
I created a module that does this. Check it out
@musafiroon This is super awesome! I'm adding it to https://remotion.dev/resources for now and will recommend your example!
Hey @musafiroon , Thanks for the module ❤️ . I had this doubt. So the idea is to load the dynamic templates/Compositions
(maybe 100s) onto the host's (main app's)
remotion player and be able to edit the props to reflect in the rendered preview. Do you think the approach of your module would fit well in this scenario?
The below diagram might give more clearer picture
Hey @musafiroon , I was able to use this approach and updated the remotion lib to 4.0.56. However, I am getting this error. What do you think might be the root cause of this error?
In this context, it seems like you ended up with multiple versions of Remotion. (See if in the console there is a warning!)
When loading a composition, it is important that you don't load another version of remotion, that you only keep a single one
Remotion kept complaining about there being multiple versions of itself running, even though I have set it up as a shared module in webpack's module-federation. I have gotten around this by setting
window.remotion_imported = false
, and this can be discussed later.
https://github.com/remotion-dev/remotion/issues/1326#issuecomment-1367318454
Could it be related?
- otion components such as
Sequence
,Series
,Freeze
and maybe more, have not been tested, but can be in further investigations if this approach is considered to be promising.
Nope ! docs made it super clear that versions need to be same throughout all remotion packages.also , no version warning in console.
Remotion kept complaining about there being multiple versions of itself running, even though I have set it up as a shared module in webpack's module-federation. I have gotten around this by setting
window.remotion_imported = false
, and this can be discussed later.Could it be related?
So the thing is it works with this example . However, I get this error when I connect my nextJs app as host with the example's repo remote.
Do you think this can be worth exploring ?
Crucial components for allowing use of useCurrentFrame() and useVideoConfig() in remote compositions are not exposed in remotion's core
Hey @musafiroon , Thanks for the module ❤️ . I had this doubt. So the idea is to load the
dynamic templates/Compositions
(maybe 100s) onto thehost's (main app's)
remotion player and be able to edit the props to reflect in the rendered preview. Do you think the approach of your module would fit well in this scenario?
@vipulsharma144 I haven't tested this using remotion player. It definitely won't work on vite.
I also have another implementation that won't (probably) have this issue. I will show you the repo after I make it public.
Let's say you have 1000 templates / compositions. How do you load them into the player without having a huge bundle size?
A possible solution might be module federation: https://webpack.js.org/concepts/module-federation/
We should provide a clear answer to this question in the docs and possible make a code change to support it.