Remotionコード分析 — renderMedia()とフレームレンダリングループ
Puppeteerで各フレームをスクリーンショットしFFmpegで結合するレンダリングコアループをソースコードで分析
GitHub: remotion-dev/remotion/packages/renderer
バンドリング完了後、実際のレンダリングが開始されます。renderMedia()がすべてを調整するオーケストレーターです。
フロー: renderMedia()がselectComposition()でメタデータ取得、renderFrames()でPNGシーケンス生成、stitchFramesToVideo()でFFmpegエンコーディング。
renderFrames()では複数のChromeページが並列実行。各フレームで: window.remotion_setFrame(n)を注入、Reactが再レンダリング、waitForDelayRender()で非同期処理完了を確認、page.screenshot()でフレームキャプチャ。
delayRender/continueRenderはシンプルなカウンターパターン — window.__REMOTION_DELAY_RENDER配列が空になってからスクリーンショットが進行します。
動作フロー
renderMedia()がバンドルサーバーを開きselectComposition()でCompositionメタデータを照会
renderFrames()がconcurrency数だけChromeページを開きフレームを分配
各ページでwindow.remotion_setFrame(n) → React再レンダー → waitForDelayRender() → screenshot()
delayRender配列が空になるまで（= すべての非同期完了）スクリーンショットを待機
stitchFramesToVideo()がFFmpegでPNGシーケンス → MP4/WebMエンコード + オーディオmux
メリット
- ✓ remotion_setFrame → React再レンダーパターン: 既存のReactエコシステムをそのまま活用する優雅な設計
- ✓ delayRenderがシンプルなカウンター → 複雑な非同期シナリオも安全に処理
デメリット
- ✗ Chromeプロセス管理の複雑さ: ページクラッシュ、メモリリークなどブラウザ特有の問題