@remotion/web-renderer
warning
非常实验性的功能——随时可能出现漏洞和重大更改。
在 GitHub 上跟踪进度 并在 Discord 的 #web-renderer 通道中讨论。
这个包允许你直接在浏览器中渲染视频和静态图片，无需服务器端基础设施。
🌐 This package allows you to render videos and stills directly in the browser, without requiring server-side infrastructure.
与服务器端渲染的主要区别
🌐 Key differences from server-side rendering
与使用 @remotion/renderer 的服务器端渲染不同，客户端渲染：
🌐 Unlike server-side rendering with @remotion/renderer, client-side rendering:
- 在浏览器中运行，而不是在 Node.js 中
- 使用 Mediabunny 而不是 FFmpeg 通过 WebCodecs 编码
- 仅限于部分标签和 CSS 属性 - 参见 限制
- 无需打包步骤 - 直接使用组件和视频配置
安装
🌐 Installation
- Remotion CLI
- npm
- bun
- pnpm
- yarn
npx remotion add @remotion/web-renderer
This assumes you are currently using v4.0.431 of Remotion.npm i --save-exact @remotion/web-renderer@4.0.431
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.431 of Remotion.pnpm i @remotion/web-renderer@4.0.431
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.431 of Remotion.bun i @remotion/web-renderer@4.0.431
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.431 of Remotion.yarn --exact add @remotion/web-renderer@4.0.431
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.应用编程接口
🌐 API
renderMediaOnWeb()
Render a video in the browser
renderStillOnWeb()
Render a still image in the browser
canRenderMediaOnWeb()
Check if a render can be performed
getEncodableVideoCodecs()
Get video codecs the browser can encode
getEncodableAudioCodecs()
Get audio codecs the browser can encode
Types
TypeScript types reference
另请参阅
🌐 See also