Remotion LabRemotion Lab
›客戶端渲染›客戶端渲染

客戶端渲染

在瀏覽器中直接渲染影片、圖片和音訊，無需伺服器基礎架構的實驗性功能。

客戶端渲染

警告 — 實驗性功能：此功能隨時可能出現錯誤和重大變更。請在 GitHub 上追蹤進度，並在 Discord 的 #web-renderer 頻道中參與討論。

客戶端渲染是 Remotion 的一項新附加功能，允許你直接在瀏覽器中渲染影片、圖片和音訊，無需伺服器端基礎架構。

目前以實驗性 alpha 版本發布，套件名稱為 @remotion/web-renderer。

與伺服器端渲染的主要差異

與使用 @remotion/renderer 的伺服器端渲染不同，客戶端渲染：

  • 在瀏覽器中執行 — 無需設定 Node.js 伺服器或 Remotion Lambda
  • 使用 WebCodecs 搭配 Mediabunny 進行編碼 — 而非 FFmpeg
  • 僅支援部分 HTML 元素 — 詳見限制說明
  • 無需打包步驟 — 直接接收元件和影片設定

瀏覽器支援

客戶端渲染需要 WebCodecs API，這限制了瀏覽器支援範圍：

瀏覽器最低版本
Chrome94+
Firefox130+
Safari26+

API

此套件提供 renderStillOnWeb() 和 renderMediaOnWeb() 兩個 API。

以下是使用範例：

render-on-web.tsx
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: {},
});

請注意，此 API 目前是暫定性的（tentative），可能會在正式穩定版本中有所更改。

在 Studio 中啟用

若要在 Remotion Studio 中啟用客戶端渲染，你需要在 remotion.config.ts 檔案中呼叫 Config.setExperimentalClientSideRenderingEnabled(true)。

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

目前狀態

客戶端渲染目前仍在積極開發中。請查看目前狀態和進度以了解最新資訊。

使用場景

客戶端渲染非常適合以下情況：

  • 無伺服器應用程式：你想在前端直接產出影片，而無需後端基礎架構
  • 互動式工具：讓使用者在瀏覽器中即時預覽和下載影片
  • 輕量部署：避免設定複雜的伺服器端渲染管線
  • 快速原型開發：在不需要完整生產環境的情況下快速測試想法

限制

由於在瀏覽器環境中執行，客戶端渲染有以下已知限制：

  • 不支援所有 HTML 元素（例如某些媒體元素的處理方式不同）
  • 效能受限於用戶裝置的瀏覽器能力
  • 不支援需要 Node.js 執行環境的功能
  • 無法使用 FFmpeg 提供的進階編碼選項

詳細的限制清單請參閱官方限制文件。

相關資源