Chapter 194: Migrating code to client-side rendering

Core Idea

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

Key Concepts

• Use useRemotionEnvironment() instead of getRemotionEnvironment()
• Use useDelayRender() instead of delayRender(), continueRender() and cancelRender()
• Ensure assets are available via CORS
• Common error messages
• Use @remotion/media

Code Examples

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.

• What it demonstrates: Usage pattern for Migrating code to client-side rendering from the official docs.

Key Takeaways

1. Understand use useremotionenvironment() instead of getremotionenvironment() when working with Migrating code to client-side rendering.
2. Understand use usedelayrender() instead of delayrender(), continuerender() and cancelrender() when working with Migrating code to client-side rendering.
3. Understand ensure assets are available via cors when working with Migrating code to client-side rendering.
4. Understand common error messages when working with Migrating code to client-side rendering.
5. Understand use @remotion/media when working with Migrating code to client-side rendering.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.