mcpField
P
product-recording

product-recording

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

product-recording について

product-recording は、ブラウザー録画を準備し、ユーザーが撮影した元データを packages/brand に取り込む内部向け Remotion ワークフロースキルです。録画メタデータを保持し、検証とホスト先への移行手順も示します。

主な機能

  1. 01Remotion Studio と Chrome の準備
  2. 02任意のショットの構図設定と確認
  3. 03録画操作をユーザーに引き継ぎ
  4. 04メタデータ付きの元録画をインポート
  5. 05ハッシュ検証後にアセットを移行

活用シーン

  1. 01ブラウザーでのデモ録画を準備
  2. 02MP4 または WebM の録画を brand に取り込み
  3. 03ローカルのメディアアセットをホスト URL に置換

MCP 対応

利用可能な場合、このワークフローは Canvas Capture 拡張機能の WebMCP ツール setup_shot と get_shot を使用できます。

インストール

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

$npx skills add https://github.com/remotion-dev/remotion --skill product-recording

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

詳細

製品の録画

ブラウザーとショットを準備し、ユーザーに操作を行って録画してもらってから、 元のキャプチャを packages/brand に取り込みます。これは内部用の Remotion ワークフローです。このスキルは .agents/skills に保管してください。

Studio と Chrome の準備

  1. canvas-capture-extension を使って、 拡張機能を永続的なディレクトリにビルドしてインストールします。再ビルド後は chrome://extensions からインストール済みの拡張機能を再読み込みしてください。 ビルドが成功しただけでは、Chrome に読み込まれた拡張機能は更新されません。

  2. Canvas Draw Element を有効にした、既存の互換性のある Chrome を使います。 関係のないブラウザーのタブや、未完了の録画はそのままにしてください。

  3. 対象のコンポジションの登録箇所と、所有するパッケージを特定します。依存関係や ビルドの準備、サーバーの起動については studio に 従いますが、所有するパッケージから起動し、互換性のある Chrome で録画を 開きます。bunx remotion studio --no-open を使い、その実行で表示された正確な URL を開いてください。既存のサーバーが報告された場合も同様です。ポート 3000 が このチェックアウトのものだと決めつけないでください。

  4. クエリー文字列に studioPixelRatio=4 を指定してコンポジションを開き、 その他の URL パラメーターは保持します。たとえば、Studio がポート 3001 を 報告した場合は次のようになります。

    http://localhost:3001/RollerSkiRoughCut?studioPixelRatio=4

    このパラメーターは、タイムラインのキャプチャを鮮明にするため、Studio の キャンバスのバッキング解像度を上げます。拡張機能の出力解像度は設定しません。 RollerSkiRoughCut は packages/jonnys-videos にあります。ほかの対象 コンポジションは、packages/example にあると決めつけずに場所を特定してください。

  5. 対象のコンポジションと現在のタイムラインが表示されていることを確認します。 ツールバーのアイコンまたは拡張機能メニューから Canvas Capture を有効にします。

任意のショットを準備して引き渡す

  • 対象のデモに合わせて、ビューポート、タイムラインの高さやズーム、再生ヘッド、 サイドバーを調整します。ショットを決める前に行ってください。
  • 利用できる場合は、拡張機能の setup_shot と get_shot WebMCP ツールを使います。 これらのツールは拡張機能を有効にした後に利用できます。ビューポート、表示中の 要素 1 つ、または矩形を選び、preview: true を指定して get_shot で静止画を 確認します。切り抜き範囲はビューポートの CSS ピクセルで固定されるため、 ウィンドウやレイアウトを変更した場合は、フレームを調整し直してください。
  • これらのツールが利用できない場合は、拡張機能の Entire page または Select area コントロールを使い、選択範囲を目視で確認します。出力のズームと 寸法は studioPixelRatio とは別の設定です。目的のショットに合わせて設定し、 表示された寸法を確認してください。
  • 引き渡す前に、ユーザーの Downloads フォルダーにある既存のキャプチャファイルと その更新日時を記録しておき、新しいテイクを後で特定できるようにします。
  • 録画を開始せず、ショットを準備した状態にしておきます。ユーザーに Record をクリックして操作を行い、停止してから Download recording を選ぶように 伝えます。カーソルの操作と録画の開始・停止はユーザーが行います。ユーザーが 録画するまでここで待機してください。古いダウンロードを代用したり、取り込みが 完了したと主張したりしないでください。

ダウンロードしたテイクをインポートする

  1. ユーザーが終了したら、ファイル名と引き継ぎ時点からの更新日時を基に、~/Downloads にある新しい完全にダウンロード済みのキャプチャを特定します。 ダウンロードが完了していない .crdownload ファイルは除外します。候補となるテイクが複数ある場合は、どれを使用するか確認します。

  2. 埋め込みの REMOTION_CAPTURE_DATA メタデータを含む元の MP4 または WebM をそのまま保持します。 インポート前にトランスコードしないでください。メタデータには編集可能なカーソルデータが含まれています。

  3. import-canvas-capture を使用し、対象を packages/brand とそのコンポジション登録ファイル（現在は src/Root.tsx）にします。未使用の、内容がわかりやすいコンポジション ID を選びます。packages/brand からは、次のようにローカルにビルドされた CLI を実行できます。

    node ../cli/remotion-cli.js experimental-codemod add-canvas-capture \
  /absolute/path/to/downloaded-capture.mp4 \
  --composition-file src/Root.tsx --id TimelineRecording

    そのスキルに記載された寸法、依存関係、競合に関するガイダンスに従います。フルショットをインポートする場合は、キャプチャの寸法を確認し、一致するように --width と --height を指定します。生成されたコンポーネントは動画のネイティブ寸法を維持するため、デフォルトの 1920×1080 のコンポジションでは、より大きな録画の一部が切り取られることがあります。ダウンロードしたファイルと既存のコンポジション／アセットは保持します。

  4. 生成されたコンポーネント、登録、コピーされたパブリックアセット、および依存関係の変更を確認します。オフロードする前に、該当するブランドの検証を実行します。

録画をオフロードする

offload-r2 で仕上げます。インポートした録画を remotion.media にアップロードし、パブリックオブジェクトの SHA-256 がローカルファイルと一致することを確認して、コンポジションのローカルアセット参照をホストされた URL に置き換えます。リポジトリ内のメディアコピーは、検証が完了してから削除します。元のダウンロードは保持します。そのスキルに記載された対象を絞った検証を行い、コンポジション ID、ホストされた URL、変更したファイルを報告します。録画可能な状態のブラウザーと、完了してインポートおよびオフロードされたテイクを区別してください。

コメント

Markdown 対応