将代码迁移到客户端渲染
非常实验性的功能——随时可能出现漏洞和重大更改。
在 GitHub 上跟踪进度 并在 Discord 的 #web-renderer 通道中讨论。
我们尽量支持为服务器端渲染编写的尽可能多的代码。
某些代码不受支持或可能需要修改。
🌐 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.
使用 useRemotionEnvironment() 替代 getRemotionEnvironment()
🌐 Use useRemotionEnvironment() instead of getRemotionEnvironment()
getRemotionEnvironment() 是一个全球 API，可能与你项目中的其他 Remotion 实例冲突，例如当你在同一页面上挂载 <Player> 时。
改为使用 useRemotionEnvironment() 钩子。
🌐 Start using the useRemotionEnvironment() hook instead.
使用 useDelayRender() 代替 delayRender()、continueRender() 和 cancelRender()
🌐 Use useDelayRender() instead of delayRender(), continueRender() and cancelRender()
如果你同时有多个渲染或在同一页面上有另一个 Remotion 实例，例如 <Player>，delayRender()、continueRender() 和 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.
请改为使用 useDelayRender() 钩子，它将这些函数限定在一个组合中。
🌐 Start using the useDelayRender() hook instead, which scopes these functions to a composition.
确保通过 CORS 可访问资源
🌐 Ensure assets are available via CORS
与服务器端渲染不同，在服务器端渲染中，视频和音频资源是在 Node.js 进程中下载的，并且即使图片被污染也可以捕获，而在客户端渲染中，会强制执行 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
如果你使用不支持 CORS 的图片，你将看到类似如下的错误：
🌐 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.如果图片完全无法加载（例如，404 错误、无效的 URL），你将会看到：
🌐 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.使用 @remotion/media
🌐 Use @remotion/media
唯一支持的视频和音频标签是来自 @remotion/media 的 <Video> 和 <Audio>。
将任何 Html5Video、Html5Audio 和 <OffthreadVideo> 标签迁移到 <Video> 和 <Audio>。
🌐 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>.