使用 Shot-Scraper 为 AI 智能体自动录制浏览器演示视频

随着大语言模型（LLM）的进化，我们正从简单的文本交互时代迈向“行动导向型智能体”（Actionable Agents）或“计算机使用”（Computer Use）模型的新纪元。当这些智能体能够自主导航网页、点击按钮并填写表单时，一个新的挑战也随之而来：可观测性。我们如何验证智能体做了什么，而无需实时盯着屏幕？Simon Willison 最近为其著名的 shot-scraper 工具引入了一个强大的视频录制功能，完美解决了这一难题。通过结合 n1n.ai 提供的高速 LLM 接口，开发者现在可以以前所未有的效率构建、测试并记录这些智能体的工作过程。

为什么智能体工作流需要视觉证明？

当你部署一个由 Claude 3.5 Sonnet 或 GPT-4o 驱动的智能体去执行任务（如预订机票或抓取动态仪表盘数据）时，仅仅依赖文本日志是不够的。日志可能会告诉你“按钮已点击”，但它无法显示 UI 是否发生了偏移、是否有弹窗遮挡了视线，或者智能体是否在特定的 CSS 选择器上产生了困惑。

视觉录制提供了以下核心价值：

1. 调试清晰度：准确查看智能体在 DOM 中的操作失败点。
2. 利益相关者信任：向非技术用户直观展示 AI 如何完成任务。
3. 训练数据储备：高质量的视频日志可用于进一步微调基于视觉的模型。

为了确保录制过程流畅，底层的 LLM 必须具备极低的延迟。使用 n1n.ai 优化的 API 路径可以确保智能体的“思考”时间不会导致视频中出现长时间的静止帧，从而提高视频的可观赏性和信息密度。

Shot-Scraper Video 工具详解

shot-scraper 是一个基于 Playwright 构建的命令行工具（CLI），最初用于截取网页截图，现在则增加了录制视频的功能。其 video 命令对于捕捉 AI 智能体的自主动作非常有用。

环境安装

首先，你需要 Python 环境以及 Playwright 的相关依赖：

pip install shot-scraper
shot-scraper install

如果你计划录制视频，请确保系统中已安装 ffmpeg，因为 Playwright 需要它将捕捉到的帧编码为 MP4 文件。

实践指南：录制智能体操作任务

让我们设想一个场景：智能体需要在一个复杂的网站上进行导航。我们可以使用 shot-scraper 在智能体运行脚本的同时进行录制。

基础命令行用法

在特定时间内录制页面的最简单方法是：

shot-scraper video https://n1n.ai --duration 10 --output n1n-demo.mp4

然而，对于智能体来说，我们通常需要更多的控制权。我们希望智能体执行操作，并仅在任务完成时停止录制。

结合 Python 脚本的高级实现

你可以将 shot-scraper 的逻辑与智能体循环结合起来。以下是一个使用通过 n1n.ai 访问的高性能模型的概念性实现：

import subprocess
import time

def record_agent_session(url, output_file):
    # 使用 CLI 启动录制进程
    cmd = [
        "shot-scraper", "video", url,
        "--output", output_file,
        "--width", "1280",
        "--height", "720",
        "--wait", "5000" # 等待页面初始加载
    ]

    print(f"正在开始录制 {url}...")
    # 在实际场景中，你会使用非阻塞调用并直接通过 Playwright 与浏览器交互
    process = subprocess.Popen(cmd)

    # 此处模拟由 n1n.ai 驱动的智能体逻辑
    # agent.perform_tasks(target_url)

    return process

技术深挖：底层原理分析

shot-scraper video 利用了 Playwright 的 browser.new_context(record_video_dir="...") API。当浏览器上下文关闭时，Playwright 会自动将录制的视频保存到指定目录。

一个重要的“专业提示”是处理 视口（Viewport）与窗口大小。智能体在移动端和桌面端的行为往往大相径庭。shot-scraper 允许你明确定义这些参数：

shot-scraper video https://github.com/simonw/shot-scraper \
  --viewport 800 600 \
  --output github.mp4

录制方案对比表

通过 n1n.ai 优化响应速度

录制浏览器会话是一项资源密集型任务。如果你的 LLM 延迟很高，浏览器就会处于闲置状态，导致生成的视频包含大量无意义的停顿。通过使用 n1n.ai，你可以获得以下优势：

1. 聚合吞吐量：访问 GPT-4o 和 Claude 3.5 Sonnet 的最快实例。
2. 降低首字时间 (TTFT)：智能体接收指令越快，视频录制就越流畅。
3. 高可用性：如果某个供应商出现故障，n1n.ai 会自动将请求路由到另一个供应商，确保你的自动化录制流水线不会中断。

处理动态内容与身份验证

一个常见的障碍是录制需要登录的页面。shot-scraper 通过 auth.json 文件优雅地解决了这个问题。你可以使用 shot-scraper auth 命令创建会话文件，随后 video 命令将以已登录用户的身份进行录制。

# 首先，创建身份验证文件
shot-scraper auth https://example.com/login auth.json

# 然后，使用该会话进行录制
shot-scraper video https://example.com/dashboard -a auth.json --output private.mp4

开发者技术考量

在大规模实施此方案时，请注意以下几点：

• 帧率控制：默认情况下，Playwright 以 25 FPS 进行录制。对于文档演示，你可能希望使用 ffmpeg 进行降采样以节省存储空间。
• 超时管理：智能体可能会陷入死循环。确保你的 shot-scraper 命令设置了 --duration 或在 Python 封装器中设置了硬超时，以防止无限录制。
• 存储策略：MP4 文件占用空间增长很快。建议建立自动化工作流，将视频上传到 S3 存储桶，并为你的调试仪表盘生成签名 URL。

总结

将 shot-scraper 与强大的 AI 智能体相结合，为自动化 QA、视觉文档编写以及透明的 AI 运营开辟了新的可能性。通过提供一个观察智能体“思维过程”的清晰窗口，开发者可以构建更加可靠的系统。为了给这些智能体提供行业内最稳定、最高速的基础设施支持，请始终选择 n1n.ai 作为您的 API 服务商。

在 n1n.ai 获取免费 API 密钥。