如何使用Playwright为Safari(WebKit)和Firefox开启摄像头与麦克风权限

WebKit(Safari) 正确配置 #

WebKit不支持Chromium的--use-fake-device-for-media-stream参数，需通过上下文（Context）的权限设置配合媒体模拟选项实现：

const browser = await webkit.launch({ headless: config.headless });
// 创建上下文时直接授予权限，并配置媒体相关选项
const context = await browser.newContext({
  // 直接授予摄像头和麦克风权限
  permissions: ['camera', 'microphone'],
  // WebKit需禁用媒体播放的用户手势要求，避免权限请求被拦截
  webkit: {
    mediaPlaybackRequiresUserGesture: false,
  },
});

// 也可在已创建的上下文调用grantPermissions，效果一致
// await context.grantPermissions(['camera', 'microphone']);

注意：若为有头模式（headless: false），WebKit可能弹出系统级权限提示，需预先在系统设置中给测试用Safari授权，或添加启动参数--webkit-use-fake-ui-for-media-stream（仅适用于有头模式）。

Firefox 正确配置 #

Firefox的权限偏好设置与Chromium不同，之前将permissions.default.microphone和camera设为1是「询问」，需改为0（「允许」），同时启用模拟媒体流：

const browser = await firefox.launch({
  headless: config.headless,
  firefoxUserPrefs: {
    // 0=允许，1=询问，2=拒绝
    'permissions.default.microphone': 0,
    'permissions.default.camera': 0,
    // 启用模拟媒体流，无需真实设备
    'media.navigator.streams.fake': true,
    // 禁用权限提示弹窗
    'media.navigator.permission.disabled': true,
  },
});

// 创建上下文后授予权限（可选，配合偏好设置更稳妥）
const context = await browser.newContext();
await context.grantPermissions(['camera', 'microphone']);

注意：Firefox不识别Chromium专属的--use-fake-device-for-media-stream启动参数，无需添加。

通用注意事项 #

• 确保使用最新版本的Playwright，旧版本对WebKit/Firefox的权限支持可能存在缺陷。
• 无头模式下，浏览器对媒体权限的处理与有头模式有差异，优先通过上下文权限设置和浏览器偏好配置，避免依赖系统级弹窗。

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