Load compositions from a URL

[JonnyBurger]

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.

[mykeels]

I've put together a rudimentary proof of concept, using webpack's module federation.

How it works

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:

• loads the remoteEntry.js output file of my-video to get this export,
• creates a root element calls the mount(root, props) function, passing in the current frame, video config, and a continueRender function as props.

Results

I was able to preview the remote composition without issues, and generate this video:

https://user-images.githubusercontent.com/11996508/209955226-c1d71c42-611e-47a0-b3b0-20167a75a1c5.mp4

Please Note:

• CORS may prevent assets of one project from being loaded in the browser when running the other project, so I use Allow CORS, a chrome extension to disable CORS so I can keep experimenting.
  • (Edit) I turned off the extension, and the preview continued working as expected, so the CORS errors may have been caused by a different error that is no longer happening.
• 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.
• 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.
• Remotion 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.

[JonnyBurger]

@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.

[JonnyBurger]

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"!

[musafiroon]

The video won't be showing when using rich timeline in remotion preview

[JonnyBurger]

@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.

[musafiroon]

I created a module that does this. Check it out

https://github.com/musafiroon/remotion-remote-composition

[JonnyBurger]

@musafiroon This is super awesome! I'm adding it to https://remotion.dev/resources for now and will recommend your example!

[vipulsharma144]

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

[vipulsharma144]

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?

[JonnyBurger]

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

[mykeels]

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?

[vipulsharma144]

• 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.

[vipulsharma144]

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.

#1326 (comment)

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

[musafiroon]

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?

@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.