セッション録画

ブラウザー自動化が失敗したり、想定外の動きをしたりすると、何が起きたかを把握しにくいことがあります。セッション録画は、DOM の変化、マウスとキーボードのイベント、ページ遷移を、動画ではなく構造化 JSON イベントとして記録します。軽量で検査しやすいです。録画は rrweb ↗ を使い、セッションごとにオプトインです。

セッション録画は、最初のセッション取得時に有効にする必要があります。既存セッションへの再接続時には有効にできません。

puppeteer.launch() または playwright.launch() に recording: true を渡します。

import puppeteer from "@cloudflare/puppeteer";

interface Env {
	MYBROWSER: Fetcher;
}

export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		const browser = await puppeteer.launch(env.MYBROWSER, { recording: true });
		const page = await browser.newPage();

		await page.goto("https://example.com");
		// ... your automation steps ...

		const sessionId = browser.sessionId();
		await browser.close();

		return new Response(`Session recorded: ${sessionId}`);
	},
};

import { launch } from "@cloudflare/playwright";

interface Env {
	MYBROWSER: Fetcher;
}

export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		const browser = await launch(env.MYBROWSER, { recording: true });
		const page = await browser.newPage();

		await page.goto("https://example.com");
		// ... your automation steps ...

		const sessionId = browser.sessionId();
		await browser.close();

		return new Response(`Session recorded: ${sessionId}`);
	},
};

CDP エンドポイント を使い、任意の環境から Browser Run に接続する場合は、WebSocket URL にクエリパラメーター recording=true を追加します。

wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?recording=true&keep_alive=600000

たとえば MCP クライアントでセッション録画を有効にするには、クライアント設定の --wsEndpoint URL に recording=true を追加します。

{
	"mcpServers": {
		"browser-rendering": {
			"command": "npx",
			"args": [
				"-y",
				"chrome-devtools-mcp@latest",
				"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?recording=true&keep_alive=600000",
				"--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
			]
		}
	}
}

ほかの MCP クライアントと、Puppeteer または Playwright での CDP の使い方は、CDP ドキュメント を参照してください。

セッションが閉じたあと、録画は Cloudflare ダッシュボードの Browser Run > Runs で利用できます。セッション横の録画アイコンを選び、録画ビューアーを開きます。タイムラインをスクラブし、セッション中に起きたことを再生できます。

セッションが複数タブを開いた場合、録画ビューアーは再生領域の右上にタブ選択ドロップダウンを表示します。これを使い、録画されたタブを切り替え、各タブのアクティビティを個別に確認します。

セッション ID を使い、プログラムからも録画を取得できます。ブラウザーを閉じる前に browser.sessionId() でセッション ID を取得し、recordings エンドポイントに渡します。

curl https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/recording/<SESSION_ID> \
  -H "Authorization: Bearer <API_TOKEN>"

成功した応答は、次のようになります。

{
	"success": true,
	"result": {
		"sessionId": "e26d4660-5b78-4761-b82f-c6b5bad5a925",
		"duration": 4380,
		"events": {
			"target-1": [],
			"target-2": []
		}
	}
}

録画したセッションが閉じたあと、録画はまだ確定中のことがあります。この期間、エンドポイントは一時的に 404 を返すことがあります。確定が完了するまで、呼び出し側はリクエストを再試行できます。

イベント配列は result.events にあります。result.events のキー（target-1、target-2 など）は CDP ターゲット ↗ です。セッション録画では、各ターゲットは通常 1 つのブラウザータブに対応します。複数タブを開いたセッションはタブごとに 1 つのターゲットを持ち、各ターゲットの値はそのタブ用の独立した rrweb イベント配列です。

特定ターゲットでキャプチャしたリクエストを取得するには、network recording エンドポイントを使います。target クエリパラメーターは必須で、result.events に返されたターゲット ID の 1 つを入れる必要があります。

curl 'https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/recording/<SESSION_ID>/network?target=<TARGET_ID>' \
  -H "Authorization: Bearer <API_TOKEN>"

応答は、そのターゲットで録画されたリクエストを含む JSON 配列です。利用可能なリクエスト / レスポンスヘッダー、ペイロード、ステータスコード、タイミング情報、転送サイズを含みます。

ネットワークアクティビティを HTTP Archive（HAR）1.2 ↗ ドキュメントとして取得するには、format=har を設定します。

curl 'https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/recording/<SESSION_ID>/network?target=<TARGET_ID>&format=har' \
  -H "Authorization: Bearer <API_TOKEN>"

result.events の各値は標準の rrweb イベント配列です。rrweb-player ↗ に直接渡し、タイムラインスクラバーと再生コントロール付きの再生 UI をセルフホストできます。

タブは独立して再生されます。複数タブのセッションを再生するには、ターゲットごとに 1 つのプレーヤーを描画するか、ユーザーがターゲットを切り替えられる UI を作ります（ダッシュボードの録画ビューアーのタブ選択に似ています）。

• 録画はセッション終了から 30 日間保持され、自動削除されます。
• 録画はオプトインです。デフォルトでは有効ではありません。
• セッション録画は、launch() による Browser Sessions と CDP エンドポイント で利用できます。Quick Actions では利用できません。
• 最小録画時間は 1 秒です。1 秒未満のセッションでは、閲覧可能な録画は作られません。
• 最大録画時間は 2 時間です。

セッション録画は rrweb ↗ を使い、ピクセルではなく DOM の状態とイベントを記録します。この方法は軽量ですが、次の制限があります。

• Canvas 要素 — <canvas> 要素の内容はキャプチャされません。要素自体は、空白のプレースホルダーとして録画に現れます。
• クロスオリジン iframe — クロスオリジンの <iframe> 要素内のコンテンツは録画されません。同一オリジンの iframe は通常どおり録画されます。
• 動画と音声 — <video> と <audio> 要素の DOM 構造はキャプチャされますが、メディアの再生状態と内容はキャプチャされません。
• WebGL — WebGL の描画はキャプチャされません。
• 入力フィールド — すべての入力フィールドの内容はデフォルトでマスクされ、再生では見えません。
• 大きなページや複雑なページ — DOM の変更が頻繁なページ（リアルタイムデータフィードや重いアニメーションがあるページなど）は、大量のイベントを生成し、録画サイズが大きくなります。