Playwright通过CDP连接Chrome录视频遇报错，求可行解决方案

问题原因 #

通过connectOverCDP连接到已运行的Chrome后，调用browser.newContext({recordVideo: ...})报错，是因为Playwright的recordVideo功能依赖自身启动浏览器时的初始化逻辑，而原生Chrome的CDP接口（Target.createBrowserContext）不支持Playwright的录屏配置参数。Playwright仅能对自己启动的浏览器上下文启用内置录屏。

可行解决方法 #

方法1：改用Playwright直接启动Chrome并启用录屏 #

如果不需要连接已运行的Chrome，直接用Playwright启动浏览器并配置录屏，这是最稳定的方案：

const { chromium } = require('playwright');

(async () => {
  // 启动Chrome并添加自定义参数（可选）
  const browser = await chromium.launch({
    headless: false,
    args: ['--start-maximized']
  });

  // 创建带录屏的上下文
  const context = await browser.newContext({
    recordVideo: {
      dir: './recorded-videos/', // 视频保存目录
      size: { width: 1280, height: 720 } // 视频分辨率
    }
  });

  const page = await context.newPage();
  // 执行你的页面操作
  await page.goto('https://example.com');
  await page.waitForTimeout(3000);

  // 关闭上下文时自动保存视频
  await context.close();
  await browser.close();
})();

方法2：连接已有Chrome时，通过CDP原生命令录制页面 #

如果必须连接已运行的Chrome，可直接调用Chrome的CDP命令启动单页面录屏：

const { chromium } = require('playwright');
const fs = require('fs');

(async () => {
  // 连接到已运行的Chrome（需提前开启远程调试：chrome.exe --remote-debugging-port=9222）
  const browser = await chromium.connectOverCDP('http://localhost:9222');
  
  // 获取现有浏览器上下文和页面
  const existingContext = browser.contexts()[0];
  const targetPage = existingContext.pages()[0];

  // 通过CDP启动页面录屏
  await targetPage._client.send('Page.startRecording', {
    format: 'webm',
    quality: 80,
    videoSize: { width: 1280, height: 720 }
  });

  // 执行你的操作
  await targetPage.goto('https://example.com');
  await targetPage.waitForTimeout(3000);

  // 停止录屏并保存视频文件
  const recordingResult = await targetPage._client.send('Page.stopRecording');
  fs.writeFileSync('./chrome-recording.webm', Buffer.from(recordingResult.data, 'base64'));

  await browser.close();
})();

注意：部分Chrome版本可能不支持Page.startRecording，需根据版本调整；此方法仅录制单个页面，而非整个浏览器上下文。

方法3：使用第三方工具录制Chrome窗口 #

如果上述CDP方法不适用，可直接用屏幕录制工具（如ffmpeg）捕获Chrome窗口：

• Windows系统：

# 捕获标题为"Google Chrome"的窗口
ffmpeg -f gdigrab -framerate 30 -i title="Google Chrome" -c:v libx264 -qp 0 -preset ultrafast chrome-recording.mp4

• macOS系统：

# 先查看可用设备：ffmpeg -f avfoundation -list_devices true -i ""
# 替换1:0为你的屏幕+音频设备编号
ffmpeg -f avfoundation -framerate 30 -i "1:0" -c:v libx264 -qp 0 -preset ultrafast chrome-recording.mp4

内容的提问来源于stack exchange，提问作者Little Bobby Tables