Skip to main content

客户端渲染

warning

非常实验性的功能——随时可能出现漏洞和重大更改。 在 GitHub 上跟踪进度 并在 Discord 的 #web-renderer 通道中讨论。

客户端渲染是 Remotion 的一项新的附加功能，它允许你直接在浏览器中渲染视频、图片和音频，而无需服务器端基础设施。

🌐 Client-side rendering is a new additional capability of Remotion that allows you to render videos, images, and audio directly in the browser, without requiring server-side infrastructure.

它目前以实验性的 alpha 版本发布在 @remotion/web-renderer 套件下。

🌐 It is currently released as an experimental alpha under the @remotion/web-renderer package.

与服务器端渲染的主要区别​

🌐 Key differences from server-side rendering

与使用 @remotion/renderer 的服务器端渲染不同，客户端渲染：

🌐 Unlike server-side rendering with @remotion/renderer, client-side rendering:

  • 在浏览器中运行 - 无需设置 Node 服务器或 Remotion Lambda
  • 使用 Mediabunny 而不是 FFmpeg 通过 WebCodecs 编码
  • 仅限于 HTML 元素的子集 - 参见 限制
  • 无需打包步骤 - 直接使用组件和视频配置

浏览器支持​

🌐 Browser support

客户端渲染需要 WebCodecs API，这限制了浏览器支持范围为：

🌐 Client-side rendering requires the WebCodecs API, which limits browser support to:

浏览器最低版本
Chrome94+
Firefox130+
Safari26+

应用接口​

🌐 APIs

该包提供名为 renderStillOnWeb() 和 renderMediaOnWeb() 的 API。

🌐 The package provides APIs called renderStillOnWeb() and renderMediaOnWeb().

这里是一个如何使用它的示例：

🌐 Here is an example of how to use it:

Tentative API example
import {renderMediaOnWeb} from '@remotion/web-renderer';

const Component: React.FC = () => {
  return (
    <svg viewBox="0 0 100 100" width="100" height="100" style={{transform: 'rotate(45deg)'}}>
      <polygon points="50,10 90,90 10,90" fill="orange" />
    </svg>
  );
};

const {getBlob} = await renderMediaOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 100,
    height: 100,
    calculateMetadata: null,
    id: 'my-composition',
  },
  inputProps: {},
});

在工作室启用​

🌐 Enable in the Studio

要在 Studio 中启用客户端渲染，你需要在你的 remotion.config.ts 文件中调用 Config.setExperimentalClientSideRenderingEnabled(true)。

🌐 To enable client-side rendering in the Studio, you need to call Config.setExperimentalClientSideRenderingEnabled(true) in your remotion.config.ts file.

remotion.config.ts
Config.setExperimentalClientSideRenderingEnabled(true);

状态​

🌐 Status

客户端渲染目前正在进行大量迭代。

🌐 Client-side rendering is currently in heavy iteration.

查看当前状态和进度 →

另请参阅​

🌐 See also

Last updated on