mcpField
B
browser-video-recording

browser-video-recording

github.com/mengtoクリエイティブ・メディア7.1k1.4k 回インストール3 日前に更新
リポジトリ

browser-video-recording について

Codex の内蔵ブラウザーで実際の画面を撮影し、付属の Python レンダラーで MP4 デモ動画を作るスキルです。ネイティブ録画 MCP は任意です。

主な機能

  1. 01内蔵ブラウザーでの撮影手順
  2. 02スクリーンショットの MP4 化
  3. 03カーソルとカメラの動き制御
  4. 04任意のネイティブ録画ガイド
  5. 05動画出力の検証手順

活用シーン

  1. 01ウェブサイトの操作デモ動画の作成
  2. 02ブラウザー操作状態からのデモ制作
  3. 03ネイティブ録画不可時の動画生成
  4. 04出力解像度とフレームレートの確認

MCP 対応

内蔵ブラウザーの操作とスクリーンショット取得に Browser skill/MCP を使用します。ネイティブ録画 MCP は任意で、呼び出し可能かつ有用な場合にのみ使用します。

インストール

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

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

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

demo/
expected-output.md
index.html
input.md
PROMPT.md
scripts/
render_browser_demo.py

詳細

ブラウザー動画の録画

依存関係モデル

ワークフローを次の3つのレイヤーに分けます。

  1. ブラウザーの操作とソースフレーム：Browser skill/MCP を通じて Codex のアプリ内ブラウザーを使用します。ユーザーが Codex ブラウザーを求めている場合や、プロジェクトで使用しないよう指定されている場合は、Chrome を使用しないでください。ブラウザーレイヤーでは、実際のスクリーンショットと、実際のクリック／スクロール／ナビゲーションの状態を取得します。
  2. ローカル動画レンダラー：付属の Python スクリプトを使って、スクリーンショットから、自然な macOS カーソル、控えめなクリック時の拡大縮小、穏やかなズーム追従のフレーミングを備えた MP4 をレンダリングします。スクリーン録画用 MCP は必要ありません。
  3. オプションのネイティブレコーダー連携：ネイティブ録画 MCP が呼び出し可能で、実際のアプリ録画の開始／停止や生成済みプロジェクトを開くために明確に役立つ場合に限り使用します。利用できない場合、ブロックされている場合、または Codex ブラウザー画面をキャプチャできない場合は、スクリーンショットから動画へのレンダラーに切り替え、その理由を説明します。

自己完結型の実行

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

必要なローカルツール：

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

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

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

オプションのネイティブレコーダーのサポート

ネイティブアプリを録画する場合は、MCP が以下をサポートしていることを確認します。

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

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

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

最初に browser:control-in-app-browser を使用します。ドキュメントを読み込んだら、Node／ブラウザー 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 対応