mcpField
B
browser-video-recording

browser-video-recording

github.com/akillnessクリエイティブ・メディア5360 回インストール今日更新
リポジトリ

browser-video-recording について

Codex のスキルで、アプリ内ブラウザーのスクリーンショットからデモ動画を作成します。ブラウザー状態の取得と、カーソルやカメラ移動を加えるレンダラーを組み合わせ、書き出し後の確認手順も備えています。

主な機能

  1. 01Codex のアプリ内ブラウザーで状態を取得
  2. 02カーソルとズーム追従付きで MP4 にレンダリング
  3. 03シーン、カーソル、カメラ、クリック時刻を設定
  4. 04動画の仕様とカーソル位置を確認

活用シーン

  1. 01ブラウザー操作から製品デモを作成
  2. 02意図的なカーソル移動を含む UI 紹介動画を制作
  3. 03解像度、フレームレート、尺、カーソル精度を確認

MCP 対応

新しい Codex アプリ内ブラウザーのスクリーンショット取得に Browser skill/MCP を使用します。ネイティブ録画 MCP はアプリ録画時のみ任意で使い、同梱レンダラーは MCP を必要としません。

インストール

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

$npx skills add https://github.com/akillness/jeo-skills --skill browser-video-recording

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

同梱ファイルSKILL.toonscripts/render_browser_demo.py

詳細

ブラウザー動画の録画

このスキルを使うタイミング

  • ユーザーから、クリック、スクロール、ページ遷移などのブラウザー操作を録画または再録画し、洗練されたデモ動画にするよう依頼された場合に使います。
  • 自然な macOS カーソル、意図的なクリックの演出、落ち着いたズーム追従のフレーミングが必要な Dribbble／UI インスピレーション動画や製品デモの録画を作成する場合に使います。
  • Codex、Playwright、MCP で自然なブラウザーデモ動画を作成できるか尋ねられた場合に使います。このスキルでは、3 層の依存関係モデル（Codex アプリ内ブラウザーのキャプチャ、ローカルの ffmpeg／Pillow レンダラー、任意のネイティブレコーダー）を定義しています。
  • scripts/render_browser_demo.py を使って、Codex アプリ内ブラウザーのスクリーンショットから、決定論的な 60 fps、4:3、4K の MP4 出力をレンダリングする場合に使います。
  • ffprobe と動画中盤のサムネイル確認を使って、納品する動画の解像度、フレームレート、長さ、カーソルの正確さを検証する場合に使います。
  • Codex アプリ内ブラウザーとは関係のない一般的なデスクトップ画面の録画や、カーソル／ズームを使ったデモのレンダリングを超える動画編集には使いません。その場合は別の録画ツールまたは編集ツールが必要です。

依存関係モデル

ワークフローを次の 3 層に分けます。

  1. ブラウザーの操作とソースフレーム：Browser スキル／MCP を通じて Codex アプリ内ブラウザーを使います。ユーザーが Codex ブラウザーを指定している場合、またはプロジェクトで使用しないよう指示されている場合は、Chrome を使わないでください。ブラウザー層では、実際のスクリーンショットと、実際のクリック／スクロール／ページ遷移の状態を取得します。
  2. ローカル動画レンダラー：付属の Python スクリプトを使って、自然な macOS カーソル、控えめなクリック時のスケール効果、落ち着いたズーム追従のフレーミングを加えた MP4 にスクリーンショットをレンダリングします。これに画面録画 MCP は必要ありません。
  3. 任意のネイティブレコーダー連携：ネイティブ録画 MCP は、実際のアプリ録画の開始／停止や、生成されたプロジェクトを開く場合に、呼び出し可能で明確な利点があるときにのみ使います。利用できない、ブロックされている、または Codex ブラウザーの画面をキャプチャできない場合は、スクリーンショットから動画へのレンダラーに切り替え、その理由を説明します。

自己完結型の実行

スキルフォルダー全体（scripts/render_browser_demo.py を含む）がインストールされていれば、別の Codex インスタンスでもこのスキルだけで Python レンダリングを実行できます。Codex はレンダラーを作り直すのではなく、付属のスクリプトを実行してください。

必要なローカルツール：

  • python3
  • Python パッケージ Pillow
  • ffmpeg と ffprobe

任意の macOS カーソル抽出には swift と /usr/sbin/screencapture を使います。これらを利用できない場合は、cursor_asset で透過 PNG を指定し、設定で cursor_hotspot を設定してください。

新しい Codex アプリ内ブラウザーのスクリーンショットを取得するには、引き続き Browser スキル／MCP が必要です。利用できない場合は、利用可能な最適なブラウザー自動化のスクリーンショット取得元を使い、代替手段を明記してください。

任意のネイティブレコーダーのサポート

ネイティブアプリの録画では、MCP が次の設定に対応していることを確認してください。

  • frameRate: 60 を使います。
  • resolutionRawValue: "4K" を使います。
  • 範囲を指定して録画する場合は、ratioPresetRawValue: "4:3" を使います。
  • 埋め込みブラウザーのビューポートを切り抜く場合は、selectedRegionOnScreen を明示的に指定します。

ローカルレンダラーでは、4K 4:3 は 3840x2880 です。ネイティブレコーダーで 4K 列挙値が提供されている場合は、アプリ側の解像度プリセットとして扱い、その MCP で録画するときは 4:3 の範囲選択と組み合わせてください。

キャプチャのワークフロー

まず browser:control-in-app-browser を使用します。ドキュメントを読み込んだ後、Node/browser API でアプリ内ブラウザーを操作します。

  • 4:3 4K 出力用にビューポートを 1920x1440 に設定し、終了前に元に戻します。
  • 指定されたページに移動し、実際にクリック、戻る操作、検索、スクロールを行います。
  • 重要な状態が変化するたびに、ブラウザーのみのスクリーンショットを保存します。01-results-top.png、02-after-card-click.png、03-back-results.png のような名前を付けます。
  • 各クリック／スクロール対象のビューポート座標を記録します。最終的なカーソルの軌跡では、これらの位置に移動して一時停止し、クリックしてから、次の意味のある位置へ移動します。

ユーザーがシステム UI を明示的に必要としている場合を除き、デスクトップの座標による自動操作は避けてください。Codex のブラウザー表示ではキャプチャ可能な macOS 画面を取得できない場合があります。確実なソースはブラウザー API のスクリーンショットです。

モーションのルール

カーソルが意図的に動いているように見せます。

  • カーソルの動きは控えめにし、ほとんどを直線にします。
  • クリックする前に、対象の上で少し一時停止します。
  • 関係のない UI 上をうろつかないでください。
  • クリック後にページ遷移が起きるようにし、クリック前に遷移させないでください。
  • クリックのフィードバックは控えめにし、装飾的なリングはリクエストがない限り使わず、縮小して戻る動きだけにします。
  • ズームの追従はカーソルよりも落ち着かせます。カメラは細かなマウスの動きを追いかけず、クリックされたコンテンツを画面に収めます。

デフォルトの視覚的な目標：

  • コンポジターから抽出した実際の macOS ポインター、または既存の透明なカーソルアセットを使用します。
  • 編集済みのデモ録画でよく使われる大きなカーソルのスタイルに合わせ、カーソルのスケールを 3.0 にします。
  • 控えめなクリック時の縮小として、クリックアニメーションの強度を 15 にします。
  • 回転の強度は最大 8deg とし、水平方向の速度に応じてのみ適用します。

レンダリングスクリプト

決定論的な 60 fps、4:3 4K 出力には scripts/render_browser_demo.py を使用します。

python3 /path/to/browser-video-recording/scripts/render_browser_demo.py \
  --config /tmp/browser-demo-config.json \
  --output /tmp/browser-demo-4x3-4k-60fps.mp4

初期設定を生成します。

python3 /path/to/browser-video-recording/scripts/render_browser_demo.py --write-template

設定には以下が含まれます。

  • shots：状態名とスクリーンショットの PNG パスのマップです。
  • scene_starts：[time, shotName, transition] のエントリーです。
  • cursor_keys：[time, x, y] のビューポート座標エントリーです。
  • camera_keys：[time, x, y, zoom] のエントリーです。
  • click_times：クリック時刻です。
  • duration、fps、output_size、source_size、cursor_scale です。

推奨されるデフォルト設定：

{
  "fps": 60,
  "output_size": [3840, 2880],
  "source_size": [1920, 1440]
}

cursor_asset を省略すると、スクリプトは一時的に単色のオーバーレイを表示し、screencapture を使用して現在の macOS カーソルを透明な PNG として抽出します。これはローカルでのレンダリングをサポートする機能であり、MCP の依存関係ではありません。

検証

納品する動画は必ず検証します。

ffprobe -v error \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration,size \
  -of json /path/to/output.mp4

動画の途中からサムネイルを少なくとも 1 枚抽出して確認します。

ffmpeg -y -ss 8 -i /path/to/output.mp4 -frames:v 1 -update 1 /tmp/browser-demo-thumb.png

以下を確認します。

  • 解像度が指定された出力サイズであること。4:3 4K の場合は通常 3840x2880 です。
  • フレームレートが 60/1 または同等であること。
  • 尺がリクエストと一致していること。
  • カーソルが表示され、自然に動き、対象に合っていること。
  • 動画がデスクトップではなく、ブラウザーのコンテンツに合わせてクロップされていること。
  • ブラウザーのビューポートの上書きがリセットされていること。

参考資料

コメント

Markdown 対応