Remotion LabRemotion Lab
›渲染›渲染所有 Composition

渲染所有 Composition

了解如何一次渲染 Remotion 專案中的所有 Composition，包括使用 CLI 的 Bash 腳本方法和 Node.js API 方法。

渲染所有 Composition

在某些情況下，你可能會發現一次渲染所有 Composition 很有用。

透過 CLI

你可以將 npx remotion compositions 命令與 bash 迴圈結合使用：

# render-all.sh
compositions=($(npx remotion compositions src/index.ts -q))
 
for composition in "${compositions[@]}"
do
  npx remotion render src/index.ts $composition $composition.mp4
done

你可以使用以下命令執行它：

sh ./render-all.sh

注意：這只適用於基於 UNIX 的系統（Linux、macOS）以及 Windows 上的 WSL。

透過 Node.JS 腳本

你可以使用 Node.JS API 建立適合你的腳本。以下是一個範例：

// render-all.mjs
import { bundle } from '@remotion/bundler';
import { getCompositions, renderMedia } from '@remotion/renderer';
import { createRequire } from 'module';
 
const require = createRequire(import.meta.url);
 
const bundled = await bundle({
  entryPoint: require.resolve('./src/index.ts'),
  // 如果你有 Webpack 覆寫設定，請確保在此處添加
  webpackOverride: (config) => config,
});
 
const compositions = await getCompositions(bundled);
 
for (const composition of compositions) {
  console.log(`Rendering ${composition.id}...`);
  await renderMedia({
    codec: 'h264',
    composition,
    serveUrl: bundled,
    outputLocation: `out/${composition.id}.mp4`,
  });
}

執行：

node render-all.mjs

使用 Lambda 批次渲染

如果你使用 Remotion Lambda，可以透過程式化方式渲染所有 Composition：

import { getCompositionsOnLambda, renderMediaOnLambda } from '@remotion/lambda/client';
 
const compositions = await getCompositionsOnLambda({
  functionName: process.env.REMOTION_FUNCTION_NAME,
  region: 'us-east-1',
  serveUrl: process.env.REMOTION_SERVE_URL,
});
 
for (const composition of compositions) {
  console.log(`在 Lambda 上渲染 ${composition.id}...`);
  await renderMediaOnLambda({
    functionName: process.env.REMOTION_FUNCTION_NAME,
    region: 'us-east-1',
    serveUrl: process.env.REMOTION_SERVE_URL,
    composition: composition.id,
    codec: 'h264',
    outName: `${composition.id}.mp4`,
  });
}

進階：帶有並行渲染的腳本

如需更高效率，你可以並行渲染多個 Composition：

// render-all-parallel.mjs
import { bundle } from '@remotion/bundler';
import { getCompositions, renderMedia } from '@remotion/renderer';
import { createRequire } from 'module';
 
const require = createRequire(import.meta.url);
 
const bundled = await bundle({
  entryPoint: require.resolve('./src/index.ts'),
  webpackOverride: (config) => config,
});
 
const compositions = await getCompositions(bundled);
 
// 並行渲染所有 Composition
const renderPromises = compositions.map((composition) => {
  console.log(`開始渲染 ${composition.id}...`);
  return renderMedia({
    codec: 'h264',
    composition,
    serveUrl: bundled,
    outputLocation: `out/${composition.id}.mp4`,
  }).then(() => {
    console.log(`完成渲染 ${composition.id}`);
  });
});
 
await Promise.all(renderPromises);
console.log('所有 Composition 渲染完成！');

注意：並行渲染會大量使用 CPU 和記憶體。根據你的機器能力，你可能需要限制並行數量。

限制並行數量的範例

// render-all-limited.mjs
import { bundle } from '@remotion/bundler';
import { getCompositions, renderMedia } from '@remotion/renderer';
import { createRequire } from 'module';
 
const require = createRequire(import.meta.url);
 
const CONCURRENCY = 3; // 同時最多渲染 3 個
 
const bundled = await bundle({
  entryPoint: require.resolve('./src/index.ts'),
  webpackOverride: (config) => config,
});
 
const compositions = await getCompositions(bundled);
 
// 分批處理 Composition
for (let i = 0; i < compositions.length; i += CONCURRENCY) {
  const batch = compositions.slice(i, i + CONCURRENCY);
  await Promise.all(
    batch.map((composition) =>
      renderMedia({
        codec: 'h264',
        composition,
        serveUrl: bundled,
        outputLocation: `out/${composition.id}.mp4`,
      })
    )
  );
  console.log(`已完成批次 ${Math.floor(i / CONCURRENCY) + 1}`);
}

另請參閱