Browser Useに動画制作機能：AIのブラウザ操作から解説動画を自動生成

browser-useが手がけるブラウザ自動操作ツール「browser-harness」に、PR #532として画面録画と自動動画編集機能が統合された。AIエージェントがWebサイトを操作する様子を記録し、Screen Studio風の洗練されたチュートリアル動画を全自動で書き出してくれる。

何ができるか

これまでブラウザエージェントの作業内容は、ターミナルのログや単調なスクリーンショットで確認するのが一般的だった。今回の機能追加により、エージェントは記録から動画の編集・出力までを単独で完結できるようになった。

エージェントが操作を進めると、システムはアクションごとのスクリーンショットと操作ログ（events.jsonl）を自動保存する。作業完了後に「make-video」スキルを呼び出せば、それらの素材が一本のまとまった解説動画に変換される。

生成される映像は、ただ録画を倍速にしたものではない。Chromeのウィンドウ枠、背景グラデーション、滑らかなカーソル移動、要所でのカメラズーム、画面下のステップ字幕が自動で組み合わされる。途中でエラーが発生した場合は、画面端が赤く発光して小さく振動し、どこでつまずいたかを視覚的に伝えてくれる。

プライバシー対策も施されている。URLに含まれるOAuthトークンやAPIキーなどの認証パラメータはログ書き込み前に自動で除外されるほか、指定エリアのモザイク処理にも対応しており、ズーム時でも機密情報をしっかり隠蔽する。

仕組みと使い方

技術面で特徴的なのは、動画生成にffmpegなどの外部ライブラリを一切使わない点だ。

開発陣は独立したHTMLコンポジタ（video-template.html）を用意し、ブラウザ上のCanvasを使ってウィンドウや動くカーソル、字幕をフレームごとに描画している。最終的な書き出しにはブラウザ標準のMediaRecorder APIを利用し、WebM形式の動画として出力する。余計な依存関係を増やさず、軽量に動くのが強みだ。

通常、録画はオフになっているが、エージェントに「操作を録画して」「デモを作って」と指示するだけで録画が開始される。環境変数「BH_RECORD=1」を設定すれば常時録画も可能で、無操作が180秒続くと別セッションとして自動分割される。

動画を出力する際は、内蔵のmake-videoスキルを使うか、CLIから動画コマンドを実行する。コードはすでにbrowser-use/browser-harnessのメインブランチにマージされているため、リポジトリを取得すればすぐに手元で試すことができる。

なぜ重要か

社内向けのマニュアル作成や自社ツールのデモ動画制作、ブラウザエージェントの開発に携わっているなら、すぐに試す価値がある。これまで録画ソフトと動画編集アプリを行き来して30分以上かけていた作業が、エージェントに作業を依頼するだけで終わる。

外部の動画変換基盤やクラウドレンダリングに頼らず、ブラウザ内部の描画機能だけで高品質な動画を完成させるアプローチは見事だ。インフラの管理負荷を増やさず、社内データの外部流出を防ぎながら、AIの作業成果を誰にでもわかりやすい形で残せる。