mcpField
I
import-canvas-capture

import-canvas-capture

github.com/remotion-devクリエイティブ・メディア68.6k131 回インストール今日更新
リポジトリ

import-canvas-capture について

Remotion プロジェクトにキャンバス録画をコンポジションとして取り込む、内部向けの不安定なワークフローです。録画メタデータからコンポーネント、登録情報、公開アセットを生成するリポジトリ作業に使います。

主な機能

  1. 01録画メタデータをコンポジションに取り込み
  2. 02コンポーネントの生成と登録
  3. 03録画を公開アセットにコピー
  4. 04コンポジションの寸法とフレームレートを変更
  5. 05dry-run で変更を確認

活用シーン

  1. 01キャンバス録画を Remotion プロジェクトに追加
  2. 02ファイルに書き込まず変更案を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/remotion-dev/remotion --skill import-canvas-capture

インストール後、Claude Code で/import-canvas-captureを入力して読み込まれたか確認します。

詳細

Canvas キャプチャのインポート

これは内部向けの不安定なワークフローです。このスキルは .agents/skills に配置し、packages/skills を通じて配布したり、このコマンドを安定した API として文書化したりしないでください。

ワークフロー

  1. 記録されたキャプチャファイルと対象の Remotion プロジェクトを特定します。元の録画には埋め込みの REMOTION_CAPTURE_DATA メタデータが含まれている必要があります。このメタデータが失われた変換済み動画はインポートできません。

  2. プロジェクトを調べて、コンポジション登録を含む TypeScript ファイル（通常は src/Root.tsx）を見つけます。未使用のコンポジション ID を選択します。

  3. 対象プロジェクトのルートから、次を実行します。

    bunx remotion experimental-codemod add-canvas-capture /absolute/path/capture.webm \
  --composition-file src/Root.tsx \
  --id MyCapture

    モノレポでこのコマンドを開発する場合は、まず bun run build で CLI をビルドし、対象プロジェクトのルートからローカル CLI を実行します。

    node /absolute/path/to/remotion/packages/cli/remotion-cli.js \
  experimental-codemod add-canvas-capture /absolute/path/capture.webm \
  --composition-file src/Root.tsx --id MyCapture

  4. 報告されたソースファイルと公開アセットを確認します。インポーターは登録ファイルと同じ場所にコンポーネントを生成して登録し、動画を公開ディレクトリにコピーし、プロジェクトの Remotion バージョンに合わせて不足している @remotion/media と @remotion/mac-cursors の依存関係をインストールします。Studio を起動しておく必要はありません。起動中の Studio セッションでは、ファイルウォッチャーを通じてソースの変更が反映されます。この操作は Studio の取り消し履歴には記録されません。

  5. コンポジション ID と変更されたファイルをユーザーに報告します。

オプションと競合

  • デフォルト値は Studio のキャプチャインポートと同じで、1920×1080、60 fps、録画時間を切り上げた長さです。--width、--height、または --fps を指定すると、これらの値を上書きできます。録画された動画の寸法は、コンポジションの寸法とは独立しています。
  • --public-dir で設定済みの公開ディレクトリを上書きできます。--package-manager で依存関係のインストーラーを選択します。
  • --dry-run は録画を解析して、依存関係のインストールやプロジェクトファイルへの書き込みを行わずにソースの変更を生成します。プログラムからの戻り値には、提案されたソースの変更が含まれます。
  • 登録ファイルのパスはプロジェクトルートを基準に解決されます。CLI のキャプチャパスは現在の作業ディレクトリを基準に解決されます。
  • 既存のコンポーネントファイルや競合する公開アセットは拒否されます。録画がすでに公開ディレクトリにある場合は、そのファイルを入力として渡して再利用してください。それ以外の場合は、入力の名前を変更するか別のコンポジション ID を選択してください。エラーを回避するために、既存のアセットやコンポーネントを上書きしないでください。

プログラムからの利用

@remotion/cli の CliInternals.importCanvasCapture を使用します。これは内部向けで不安定です。入力は captureFile、compositionFile、compositionId、remotionRoot、publicDir、fps、width、height、packageManager、logLevel、dryRun です。ディレクトリ、寸法、フレームレート、パッケージマネージャーをデフォルトにする場合は、null を指定します。ファイルパスは remotionRoot を基準に解決されます。

戻り値には、コンポジション ID、ソースとアセットのパス、コンポジションのメタデータ、codemod による変更が含まれます。メモリ上で変更を確認するには、dryRun: true を渡します。

コメント

Markdown 対応