Migrating code to client-side rendering

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.

Common error messages​

If you use an image that doesn't support CORS, you'll see an error like:

Could not draw image with src="https://example.com/image.png" to canvas:
The image is tainted due to CORS restrictions.
The server hosting this image must respond with the "Access-Control-Allow-Origin" header.

If an image fails to load entirely (e.g., 404 error, invalid URL), you'll see:

Could not draw image with src="https://example.com/image.png" to canvas:
The image is in a broken state.
This usually means the image failed to load - check that the URL is valid and accessible.

Use @remotion/media​

The only video and audio tags that are supported are <Video> and <Audio> from @remotion/media.
Migrate any Html5Video, Html5Audio and <OffthreadVideo> tags to <Video> and <Audio>.