Puppeteer模拟点击后相机无法启动，需手动交互恢复

问题原因 #

Chrome的媒体设备权限机制要求navigator.mediaDevices.getUserMedia()必须由真实用户主动交互触发，Puppeteer的模拟点击属于程序自动化操作，会被浏览器判定为非用户发起的请求，直接拦截媒体权限申请，导致调用停滞，必须手动点击才能触发权限确认流程。

解决方法 #

1. 配置Puppeteer启动参数（核心） #

无头模式下无法访问真实摄像头，必须通过参数指定使用虚拟媒体设备，并跳过权限弹窗：

const browser = await puppeteer.launch({
  headless: 'new', // 使用新版无头模式，兼容性更好
  args: [
    '--use-fake-ui-for-media-stream', // 跳过媒体权限确认弹窗
    '--use-fake-device-for-media-stream', // 使用虚拟摄像头/麦克风设备
    '--allow-file-access-from-files', // 本地静态文件服务时需添加
    '--disable-features=MediaStreamCapturePermissionPrompt' // 禁用权限提示
  ]
});

2. 主动授予页面媒体权限 #

在页面加载完成后，通过Puppeteer主动设置相机/麦克风权限：

await page.goto('http://localhost:your-port');
// 授予相机权限
await page.setPermission('camera', 'granted');
// 如果需要麦克风权限，添加下面一行
// await page.setPermission('microphone', 'granted');

3. 优化模拟点击逻辑（可选） #

如果单纯的page.click()仍不生效，可以模拟更接近真实用户的点击流程：

const buttonSelector = '#start-recognition-btn'; // 替换为你的按钮选择器
await page.hover(buttonSelector);
await page.mouse.down();
await page.mouse.up();

4. 确保face-api.js逻辑适配虚拟设备 #

face-api.js基于媒体流运行，虚拟设备生成的流和真实设备兼容，无需修改核心逻辑，但需确保代码在媒体流成功获取后再初始化人脸识别：

// 页面内的face-api初始化示例（确保在getUserMedia成功后执行）
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    videoElement.srcObject = stream;
    return faceapi.nets.tinyFaceDetector.loadFromUri('/models');
  })
  .then(() => {
    // 开始人脸识别逻辑
  });

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