Skip to main content
Video recordings in the Dashboard capture up to 10 tabs as separate video streams. The Sessions API returns rrweb (DOM-based) events for the primary tab only. Read more here.

Overview

Every Browserbase session is automatically recorded as a video. You can replay these video recordings to inspect the actions performed, review network requests, and debug issues page by page. Video recordings are available in the Dashboard. You can also retrieve rrweb DOM replay data programmatically via the API.

Quickstart

Install the SDK

npm install @browserbasehq/sdk playwright-core

Run a session

import { Browserbase } from "@browserbasehq/sdk";
import { chromium } from "playwright-core";

const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });

const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID!,
});

const browser = await chromium.connectOverCDP(session.connectUrl);
const context = browser.contexts()[0];
const page = context.pages()[0];

await page.goto("https://news.ycombinator.com");
await page.waitForTimeout(3000);

await page.close();
await browser.close();

console.log(`View recording: https://browserbase.com/sessions/${session.id}`);
After the session completes, the recording is available at https://browserbase.com/sessions/{session.id}.

Viewing Video Recordings

The video recording player supports:
  • Playback speed control (0.5x, 1x, 2x, 4x)
  • Timeline navigation
  • Pause/resume at any point

Multitab Support

Video recordings capture up to 10 tabs as separate video streams. Each tab can be viewed individually in the Session Inspector.
The rrweb DOM replay API (recording.retrieve()) only captures the primary tab. For multitab sessions, use the video recordings in the Dashboard.

Retrieving rrweb DOM Replays

Via SDK

Retrieve rrweb DOM replay events programmatically for custom playback:
const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });

const recording = await bb.sessions.recording.retrieve(sessionId);
console.log(recording);
The recording.retrieve() method returns rrweb DOM replay events. This is separate from video recordings, which are only available in the Dashboard.

Embedding the rrweb Player

To embed rrweb DOM replays in your application, use the rrweb player:
import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";

const player = new rrwebPlayer({
  target: document.body,
  props: {
    events: recording.events,
    width: 1024,
    height: 576,
    skipInactive: true,
    showController: true,
    autoPlay: false,
  },
});

// Control playback
player.addEventListener("play", () => console.log("Started"));
player.addEventListener("pause", () => console.log("Paused"));
player.addEventListener("finish", () => console.log("Finished"));

// Clean up when done
player.destroy();

Disabling Video Recordings

To disable video recording for a session, set recordSession to false in your browser settings:
const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID!,
  browserSettings: {
    recordSession: false,
  },
});
Disabling recording also disables rrweb DOM replay data. Live View remains available for real-time debugging.

Troubleshooting

rrweb DOM replay doesn’t match session:
  • rrweb DOM replays are DOM reconstructions and may not always be fully accurate
  • Video recordings in the Dashboard provide the most authentic representation
  • Recording starts when the first page loads, not when the browser launches
  • Use Live View for real-time debugging
rrweb DOM replay not available:
  • Some sites may block rrweb DOM replays (e.g., Opentable, Salesforce family). Video recordings in the Dashboard should be unaffected.
Questions? Contact us at [email protected]