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. Quickstart
Install the SDK
npm install @browserbasehq/sdk playwright-core
pip install browserbase playwright
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();
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}`);
from browserbase import Browserbase
from playwright.sync_api import sync_playwright
import os
bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])
session = bb.sessions.create()
with sync_playwright() as p:
browser = p.chromium.connect_over_cdp(session.connect_url)
context = browser.contexts[0]
page = context.pages[0]
page.goto("https://news.ycombinator.com")
page.wait_for_timeout(3000)
page.close()
browser.close()
print(f"View recording: https://browserbase.com/sessions/{session.id}")
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);
bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])
recording = bb.sessions.recording.retrieve(session_id)
print(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({
browserSettings: {
recordSession: false,
},
});
session = bb.sessions.create(
browser_settings={"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.
