【browserbase】实现manus自动回放的方案？

有个人神神叨叨

于 2025-03-16 09:36:35 发布

阅读量681

点赞数 19

文章标签： ai 人工智能

本文链接：https://blog.youkuaiyun.com/adcwa/article/details/146290809

版权

Browserbase 会话回放功能

offical doc

一、功能概述

定义：会话回放是 Browserbase 提供的一项强大功能，允许用户逐页回放浏览器会话，以检查执行的操作和网络请求。
用途：通过会话回放，用户可以详细地查看和分析浏览器会话中的各种事件、网络请求、DOM 变化等，从而更好地调试和优化自动化脚本、排查问题或进行性能分析。

二、使用方法

（一）安装 Browserbase SDK

Node.js 环境：
- 使用 npm 安装：npm install @browserbasehq/sdk tsx
- 其他包管理器如 pnpm 和 yarn 也可使用。

（二）创建脚本以录制会话

使用支持的框架（如 Playwright、Puppeteer 或 Selenium）连接到 Browserbase 会话。

示例代码（使用 Playwright）：

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

const BROWSERBASE_PROJECT_ID = process.env.BROWSERBASE_PROJECT_ID;
const BROWSERBASE_API_KEY = process.env.BROWSERBASE_API_KEY;

const bb = new Browserbase({
  apiKey: BROWSERBASE_API_KEY,
});

(async () => {
  const session = await bb.sessions.create({
    projectId: BROWSERBASE_PROJECT_ID,
  });

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

  await page.goto("https://docs.browserbase.com/introduction");
  await page.waitForTimeout(10000);
  await page.close();
  await browser.close();

  console.log(`Session complete! View replay at https://browserbase.com/sessions/${session.id}`);
})().catch((error) => console.error(error.message));

（三）运行脚本

使用命令 npx tsx index.ts 运行脚本。
脚本运行完成后，会在终端输出会话回放的链接，例如：Session complete! View replay at https://browserbase.com/sessions/<session-id>。

三、会话回放的组成部分

（一）时间线（Timeline）

时间线是会话回放的核心部分，显示了会话期间的所有操作和事件。
回放是基于 rrweb 事件对 DOM 的重建，可以逐帧查看会话中的用户交互和页面变化。

（二）DOM

会话回放标签显示会话期间网页的 HTML 结构的实时表示。
用户可以检查 DOM 的精确状态、元素的属性以及它们在页面中的嵌套方式。

（三）控制台日志（Console Logs）

显示会话期间通过 Web 控制台 API 发出的日志（如 console.log()）。
常见日志示例：
- browser-solving-started
- browser-solving-completed
- browserbase-keeping-connection-alive
- Starting recording
还包括浏览器的其他日志，如 [DOM] Updated style of [body] 或 [Network] Request finished loading: GET "https://example.com/style.css"。

（四）网络事件（Network Events）

详细描述会话期间进行的网络请求和响应。
网络事件的时间轴也包含由 Web 控制台 API 发出的日志，便于调试远程会话。

（五）会话日志（Session Logs）

包含在 Browserbase 会话期间捕获的详细信息，包括浏览器事件、网络请求和其他运行时数据。
可以通过会话 API 或 Browserbase SDK 中的 logs.list() 方法获取会话日志。

（六）会话录制（Session Recordings）

提供会话数据、唯一 ID、时间戳和会话类型的表示。
会话录制基于 rrweb 事件，用户可以通过 recording.retrieve() 方法检索会话录制。

四、会话回放的高级用法

（一）检索会话录制

使用 Browserbase SDK 的 recording.retrieve() 方法检索特定会话的录制数据：

const replay = await bb.sessions.recording.retrieve(session.id);
console.log(replay);

（二）集成录制播放器

使用 rrweb 播放器组件：

在前端框架（如 Next.js）中，可以使用 rrwebPlayer 组件显示会话回放：

import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";

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

播放器支持多种事件监听（如 play、pause 和 finish），还可以通过 goto() 方法跳转到特定时间点。

使用 iframe 容器：
- 将录制播放器嵌入到 iframe 中：
```
<iframe
  src="/replay/${sessionId}"
  width="100%"
  height="600px"
  frameborder="0"
  allow="fullscreen"
></iframe>
```
- 需要托管一个单独的页面来初始化 rrweb 播放器，并确保妥善处理会话身份验证和访问控制。

（三）与会话事件一起工作

将会话录制事件传递给 rrweb 播放器：

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

播放器支持多种事件监听，例如：

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