如何把 Remotion 视频渲染项目从 SSR 迁移到客户端渲染【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion如果你有一个已经能跑通的 Remotion 视频渲染项目现在想把渲染从 Node.js 服务端搬到浏览器里执行需要完成三件事确认浏览器环境可用、按文档要求修改现有代码中的全局 API 和媒体组件、然后用renderMediaOnWeb()发起渲染并验证结果。客户端渲染由remotion/web-renderer包提供API 自 v4.0.491 起稳定。它的渲染依赖 WebCodecs API浏览器最低版本要求为浏览器最低版本Chrome94Firefox130Safari26与 SSR 相比客户端渲染不需要 Node 服务器或 Remotion Lambda用 WebCodecs 加 Mediabunny 编码而不是 FFmpeg且没有 bundling 步骤——渲染函数直接接收组件和配置。迁移前先确认浏览器能否渲染remotion/web-renderer提供canRenderMediaOnWeb()用于在实际渲染前检查配置是否可执行文档明确说它适合向用户反馈浏览器兼容性和配置问题。安装remotion/web-renderer后安装方式见 包文档可以用它做迁移前的第一道检查import {canRenderMediaOnWeb} from remotion/web-renderer; const result await canRenderMediaOnWeb({ container: mp4, videoCodec: h264, width: 1920, height: 1080, }); if (!result.canRender) { for (const issue of result.issues) { console.error(issue.message); } } else { console.log(Ready to render!); console.log(Video codec:, result.resolvedVideoCodec); console.log(Audio codec:, result.resolvedAudioCodec); }canRender为false时issues数组里每一项都有type和message。文档列出的问题类型包括webcodecs-unavailable浏览器没有 WebCodecs API、container-codec-mismatch、invalid-dimensionsH.264 和 H.265 要求宽高是 2 的倍数、video-codec-unsupported、audio-codec-unsupported、transparent-video-unsupported透明度需要 VP8 或 VP9、webgl-unsupported3D CSS transform 需要 WebGL、output-target-unsupported。每一项的severity是error阻塞或warning非阻塞例如已应用回退。按迁移指南修改现有代码官方迁移文档列出了四类必须处理的代码差异。逐条修改即可不需要重写项目结构。1. 用useRemotionEnvironment()替换getRemotionEnvironment()getRemotionEnvironment()是全局 API当同一页面存在多个 Remotion 实例比如页面上挂着Player时可能冲突。改用useRemotionEnvironment()hook它把环境信息限定在调用它的组件上下文里。返回值包括isStudio、isRendering、isPlayer、isReadOnlyStudio以及自 v4.0.344 起的isClientSideRendering标识当前是否处于客户端渲染上下文import React from react; import {useRemotionEnvironment} from remotion; export const MyComp: React.FC () { const {isStudio, isPlayer, isRendering, isClientSideRendering} useRemotionEnvironment(); if (isClientSideRendering) { return divClient-side render/div; } // ... return divHello World!/div; };2. 用useDelayRender()替换全局delayRender()、continueRender()、cancelRender()项目里如果有多个渲染同时发生、或同页存在Player全局的delayRender()等函数可能互相冲突。useDelayRender()把这三个函数限定到单个 composition 作用域内文档称其为推荐写法import {useDelayRender} from remotion; const MyComp: React.FC () { const {delayRender, continueRender, cancelRender} useDelayRender(); return divMy component/div; };把组件里直接 import 的delayRender、continueRender、cancelRender全部替换为从 hook 解构出来的同名函数调用处代码不需要改动。3. 确保所有资源可通过 CORS 访问这是 SSR 与客户端渲染最容易被忽略的差异SSR 在 Node.js 进程中下载音视频资源图片即使 tainted 也能截图客户端渲染则强制 CORS图片和 canvas 不允许 tainted。如果你的图片 URL 没有Access-Control-Allow-Origin响应头渲染时会看到这样的报错文档示例Could not draw image with srchttps://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.如果图片 URL 本身加载失败例如 404则报Could not draw image with srchttps://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.迁移时需要逐一核对项目中图片、字体等资源所在服务器的 CORS 配置两种报错分别对应服务器缺少 CORS 头和资源本身不可达。4. 媒体组件替换为remotion/media的Video和Audio客户端渲染只支持remotion/media包提供的Video和Audio。迁移文档要求把所有Html5Video、Html5Audio和OffthreadVideo标签替换掉限制文档给出了明确对应关系Html5Video→VideoHtml5Audio→AudioOffthreadVideo→VideoAnimatedEmoji不支持 → 改用Lottie替换示例import {Video} from remotion/media; // 迁移前Html5Video srchttps://example.com/video.mp4 / // 迁移后 const MyComp: React.FC () { return Video srchttps://example.com/video.mp4 /; };音频的捕获方式是挂载的Audio和Video元素的声音会被采集、混音后写入输出视频的音轨见 工作原理文档。另外注意一个 API 差异客户端渲染中不能使用getInputProps()读取输入参数必须通过renderMediaOnWeb()的inputProps参数传入。用renderMediaOnWeb()发起渲染代码改完后把原来走remotion/renderer的渲染调用替换为renderMediaOnWeb()。它直接接收 React 组件和 composition 配置没有 bundling 步骤。官方文档示例import {renderMediaOnWeb} from remotion/web-renderer; import {Video} from remotion/media; const Component: React.FC () { return Video srchttps://remotion.media/video.mp4 /; }; const {getBlob} await renderMediaOnWeb({ composition: { component: Component, durationInFrames: 100, fps: 30, width: 1920, height: 1080, id: my-composition, }, }); const blob await getBlob();composition必须包含id、component、durationInFrames、fps、width、height如果提供calculateMetadata则宽高帧率时长可以动态计算。把渲染结果落盘的文档示例通过URL.createObjectURL触发浏览器下载const result await renderMediaOnWeb({composition}); const blob await result.getBlob(); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download video.mp4; a.click();默认输出容器是mp4视频h264、音频aacwebm容器默认vp8opus。渲染过程中可以用onProgress回调观察进度它接收encodedFrames、progress、renderEstimatedTime、doneIn等字段。如果希望渲染时页面保持响应保持默认pageResponsiveness: medium即可要渲染速度优先可以传disabled。如何验证迁移成功验证按文档给出的方式分三层渲染前canRenderMediaOnWeb()返回canRender: true且没有severity: error的 issue渲染中/后renderMediaOnWeb()正常 resolvegetBlob()返回可下载的视频Blob若出现第 3 节中的 CORS 报错说明资源配置尚未改对Studio 验证从 v4.0.491 起 Remotion Studio 始终启用客户端渲染使用 Render in browser 按钮即可在 Studio 里直接发起浏览器渲染用于对照检查迁移后的 composition。迁移后要清楚的限制客户端渲染不是同一套代码换个执行器。由于浏览器无法直接截取视口Remotion 是把元素按它在 DOM 中的位置手动绘制到 canvas 上只有canvas、img、video、svg能原生捕获像素其余样式用 Canvas 2D API 模拟因此 只支持一个 CSS 子集。迁移后需要对照限制文档检查项目用到的样式重点包括object-position、perspective、transform-style、writing-mode、backdrop-filter、mix-blend-mode均不支持z-index不支持层级要靠 DOM 中元素从后往前的书写顺序控制filter的blur()、brightness()等函数支持但Safari/WebKit 不支持 filters需要滤镜效果时用 Chrome 或 Firefoxbox-shadow基础形态支持inset阴影和 spread 半径不支持。另有两条运行边界客户端渲染没有多线程并发渲染所在的浏览器标签页切到后台时requestAnimationFrame会被浏览器节流Remotion 会用 Web Worker 定时器兜底继续渲染但后台渲染会比前台慢渲染期间最好保持标签页可见。最后提醒一点客户端渲染每次渲染都会发送一条遥测事件即使没有设置 license key。这与服务端渲染的行为不同迁移后请确认这一点对你的部署环境可接受详见文档中的 Telemetry 章节。相关文档迁移指南客户端渲染工作原理客户端渲染限制renderMediaOnWeb()APIcanRenderMediaOnWeb()API【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何把 Remotion 视频渲染项目从 SSR 迁移到客户端渲染？
如何把 Remotion 视频渲染项目从 SSR 迁移到客户端渲染【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion如果你有一个已经能跑通的 Remotion 视频渲染项目现在想把渲染从 Node.js 服务端搬到浏览器里执行需要完成三件事确认浏览器环境可用、按文档要求修改现有代码中的全局 API 和媒体组件、然后用renderMediaOnWeb()发起渲染并验证结果。客户端渲染由remotion/web-renderer包提供API 自 v4.0.491 起稳定。它的渲染依赖 WebCodecs API浏览器最低版本要求为浏览器最低版本Chrome94Firefox130Safari26与 SSR 相比客户端渲染不需要 Node 服务器或 Remotion Lambda用 WebCodecs 加 Mediabunny 编码而不是 FFmpeg且没有 bundling 步骤——渲染函数直接接收组件和配置。迁移前先确认浏览器能否渲染remotion/web-renderer提供canRenderMediaOnWeb()用于在实际渲染前检查配置是否可执行文档明确说它适合向用户反馈浏览器兼容性和配置问题。安装remotion/web-renderer后安装方式见 包文档可以用它做迁移前的第一道检查import {canRenderMediaOnWeb} from remotion/web-renderer; const result await canRenderMediaOnWeb({ container: mp4, videoCodec: h264, width: 1920, height: 1080, }); if (!result.canRender) { for (const issue of result.issues) { console.error(issue.message); } } else { console.log(Ready to render!); console.log(Video codec:, result.resolvedVideoCodec); console.log(Audio codec:, result.resolvedAudioCodec); }canRender为false时issues数组里每一项都有type和message。文档列出的问题类型包括webcodecs-unavailable浏览器没有 WebCodecs API、container-codec-mismatch、invalid-dimensionsH.264 和 H.265 要求宽高是 2 的倍数、video-codec-unsupported、audio-codec-unsupported、transparent-video-unsupported透明度需要 VP8 或 VP9、webgl-unsupported3D CSS transform 需要 WebGL、output-target-unsupported。每一项的severity是error阻塞或warning非阻塞例如已应用回退。按迁移指南修改现有代码官方迁移文档列出了四类必须处理的代码差异。逐条修改即可不需要重写项目结构。1. 用useRemotionEnvironment()替换getRemotionEnvironment()getRemotionEnvironment()是全局 API当同一页面存在多个 Remotion 实例比如页面上挂着Player时可能冲突。改用useRemotionEnvironment()hook它把环境信息限定在调用它的组件上下文里。返回值包括isStudio、isRendering、isPlayer、isReadOnlyStudio以及自 v4.0.344 起的isClientSideRendering标识当前是否处于客户端渲染上下文import React from react; import {useRemotionEnvironment} from remotion; export const MyComp: React.FC () { const {isStudio, isPlayer, isRendering, isClientSideRendering} useRemotionEnvironment(); if (isClientSideRendering) { return divClient-side render/div; } // ... return divHello World!/div; };2. 用useDelayRender()替换全局delayRender()、continueRender()、cancelRender()项目里如果有多个渲染同时发生、或同页存在Player全局的delayRender()等函数可能互相冲突。useDelayRender()把这三个函数限定到单个 composition 作用域内文档称其为推荐写法import {useDelayRender} from remotion; const MyComp: React.FC () { const {delayRender, continueRender, cancelRender} useDelayRender(); return divMy component/div; };把组件里直接 import 的delayRender、continueRender、cancelRender全部替换为从 hook 解构出来的同名函数调用处代码不需要改动。3. 确保所有资源可通过 CORS 访问这是 SSR 与客户端渲染最容易被忽略的差异SSR 在 Node.js 进程中下载音视频资源图片即使 tainted 也能截图客户端渲染则强制 CORS图片和 canvas 不允许 tainted。如果你的图片 URL 没有Access-Control-Allow-Origin响应头渲染时会看到这样的报错文档示例Could not draw image with srchttps://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.如果图片 URL 本身加载失败例如 404则报Could not draw image with srchttps://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.迁移时需要逐一核对项目中图片、字体等资源所在服务器的 CORS 配置两种报错分别对应服务器缺少 CORS 头和资源本身不可达。4. 媒体组件替换为remotion/media的Video和Audio客户端渲染只支持remotion/media包提供的Video和Audio。迁移文档要求把所有Html5Video、Html5Audio和OffthreadVideo标签替换掉限制文档给出了明确对应关系Html5Video→VideoHtml5Audio→AudioOffthreadVideo→VideoAnimatedEmoji不支持 → 改用Lottie替换示例import {Video} from remotion/media; // 迁移前Html5Video srchttps://example.com/video.mp4 / // 迁移后 const MyComp: React.FC () { return Video srchttps://example.com/video.mp4 /; };音频的捕获方式是挂载的Audio和Video元素的声音会被采集、混音后写入输出视频的音轨见 工作原理文档。另外注意一个 API 差异客户端渲染中不能使用getInputProps()读取输入参数必须通过renderMediaOnWeb()的inputProps参数传入。用renderMediaOnWeb()发起渲染代码改完后把原来走remotion/renderer的渲染调用替换为renderMediaOnWeb()。它直接接收 React 组件和 composition 配置没有 bundling 步骤。官方文档示例import {renderMediaOnWeb} from remotion/web-renderer; import {Video} from remotion/media; const Component: React.FC () { return Video srchttps://remotion.media/video.mp4 /; }; const {getBlob} await renderMediaOnWeb({ composition: { component: Component, durationInFrames: 100, fps: 30, width: 1920, height: 1080, id: my-composition, }, }); const blob await getBlob();composition必须包含id、component、durationInFrames、fps、width、height如果提供calculateMetadata则宽高帧率时长可以动态计算。把渲染结果落盘的文档示例通过URL.createObjectURL触发浏览器下载const result await renderMediaOnWeb({composition}); const blob await result.getBlob(); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download video.mp4; a.click();默认输出容器是mp4视频h264、音频aacwebm容器默认vp8opus。渲染过程中可以用onProgress回调观察进度它接收encodedFrames、progress、renderEstimatedTime、doneIn等字段。如果希望渲染时页面保持响应保持默认pageResponsiveness: medium即可要渲染速度优先可以传disabled。如何验证迁移成功验证按文档给出的方式分三层渲染前canRenderMediaOnWeb()返回canRender: true且没有severity: error的 issue渲染中/后renderMediaOnWeb()正常 resolvegetBlob()返回可下载的视频Blob若出现第 3 节中的 CORS 报错说明资源配置尚未改对Studio 验证从 v4.0.491 起 Remotion Studio 始终启用客户端渲染使用 Render in browser 按钮即可在 Studio 里直接发起浏览器渲染用于对照检查迁移后的 composition。迁移后要清楚的限制客户端渲染不是同一套代码换个执行器。由于浏览器无法直接截取视口Remotion 是把元素按它在 DOM 中的位置手动绘制到 canvas 上只有canvas、img、video、svg能原生捕获像素其余样式用 Canvas 2D API 模拟因此 只支持一个 CSS 子集。迁移后需要对照限制文档检查项目用到的样式重点包括object-position、perspective、transform-style、writing-mode、backdrop-filter、mix-blend-mode均不支持z-index不支持层级要靠 DOM 中元素从后往前的书写顺序控制filter的blur()、brightness()等函数支持但Safari/WebKit 不支持 filters需要滤镜效果时用 Chrome 或 Firefoxbox-shadow基础形态支持inset阴影和 spread 半径不支持。另有两条运行边界客户端渲染没有多线程并发渲染所在的浏览器标签页切到后台时requestAnimationFrame会被浏览器节流Remotion 会用 Web Worker 定时器兜底继续渲染但后台渲染会比前台慢渲染期间最好保持标签页可见。最后提醒一点客户端渲染每次渲染都会发送一条遥测事件即使没有设置 license key。这与服务端渲染的行为不同迁移后请确认这一点对你的部署环境可接受详见文档中的 Telemetry 章节。相关文档迁移指南客户端渲染工作原理客户端渲染限制renderMediaOnWeb()APIcanRenderMediaOnWeb()API【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考