无头Chrome中getUserMedia自动选择当前标签页的配置方法

核心解决方法：Chrome命令行参数配置 #

通过启动Chrome时指定命令行参数，可以直接跳过媒体权限确认并自动选定捕获源：

• --use-fake-ui-for-media-stream：禁用getUserMedia的用户确认弹窗，自动授予媒体访问权限
• --auto-select-desktop-capture-source="目标标签页标题"：直接指定桌面捕获的源为对应标题的标签页，无需用户手动选择；如果要捕获整个屏幕，可将参数值改为"Entire screen"
• 可选参数--enable-usermedia-screen-capturing：确保屏幕捕获功能正常启用

Puppeteer代码配置示例 #

在启动浏览器时传入上述参数，即可实现无交互获取标签页流：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false, // 录制场景建议使用非无头模式，若用新版无头需加额外参数
    args: [
      '--use-fake-ui-for-media-stream',
      '--auto-select-desktop-capture-source="测试页面"', // 替换为你的目标页面标题
      '--enable-usermedia-screen-capturing'
    ]
  });

  const page = await browser.newPage();
  await page.goto('https://your-target-url.com');

  // 在页面上下文执行流捕获逻辑
  const captureStream = await page.evaluate(async () => {
    return navigator.mediaDevices.getDisplayMedia({
      video: { displaySurface: 'browser' }, // 指定捕获浏览器标签页
      audio: true // 如需捕获音频可开启
    });
  });

  // 后续可对captureStream进行录制、转码等处理
  // ...

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

额外注意事项 #

• 若使用新版无头模式（headless: 'new'），需额外添加--enable-features=WebContentsCaptureWithoutUserGesture参数确保捕获正常
• --auto-select-desktop-capture-source的参数值必须与目标标签页的标题完全匹配，否则无法自动选定
• 音频捕获需确保页面音频权限已被自动授予，上述参数已覆盖该需求

内容的提问来源于stack exchange，提问作者Exlord