Skip to main content

Migrating code to client-side rendering

warning

This feature is not available yet, but we are already writing docs.
Track progress on GitHub and discuss in the #web-renderer channel on Discord.

We try to support as much code that was written for server-side rendering as possible.
Some code is unsupported or may need changing.

You may start future-proofing your code now if you are interested in using client-side rendering in the future.

Use useRemotionEnvironment() instead of getRemotionEnvironment()​

getRemotionEnvironment() is a global API that may conflict with other Remotion instances in your project, such as when you have a <Player> mounted on the same page.

Start using the useRemotionEnvironment() hook instead.

Use useDelayRender() instead of delayRender(), continueRender() and cancelRender()​

If you have multiple renders at the same time or another instance of Remotion on the same page, such as a <Player>, the delayRender(), continueRender() and cancelRender() functions may conflict.

Start using the useDelayRender() hook instead, which scopes these functions to a composition.

Ensure assets are available via CORS​

Unlike server-side rendering, where video and audio assets are downloaded in a Node.js process, and where images can be captured even if they are tainted, in client-side rendering, CORS is enforced and images and canvas may not be tainted.