如何在macOS上让Electron应用的摄像头权限持久生效？

核心原因 #

Electron 默认不会持久化媒体设备授权结果，每次调用getUserMedia都会触发新的权限请求，需要在主进程手动处理权限请求的存储与复用。

具体实现步骤 #

• 主进程添加权限监听与持久化逻辑
  你可以使用electron-store做本地配置存储，也可以自行用fs模块读写本地文件保存权限结果，示例代码如下：

const { app, session, BrowserWindow, dialog } = require('electron')
const Store = require('electron-store')
const path = require('path')

// 初始化权限存储实例
const permissionStore = new Store({ name: 'app-permissions' })

app.whenReady().then(() => {
  // 配置全局权限请求处理器
  session.defaultSession.setPermissionRequestHandler(async (webContents, permission, callback) => {
    // 过滤摄像头、麦克风等媒体权限
    if (['videoCapture', 'audioCapture', 'media'].includes(permission)) {
      // 读取已存储的权限配置
      const savedGranted = permissionStore.get(`perm_${permission}`)
      if (typeof savedGranted === 'boolean') {
        // 存在已保存的权限直接返回，不重复弹窗
        return callback(savedGranted)
      }
      // 无历史权限，弹出授权确认（也可以直接走系统默认授权逻辑）
      const { response } = await dialog.showMessageBox({
        type: 'question',
        buttons: ['拒绝', '允许'],
        title: '权限申请',
        message: '应用需要使用摄像头权限，是否允许？'
      })
      const granted = response === 1
      // 存储授权结果，下次请求直接复用
      permissionStore.set(`perm_${permission}`, granted)
      return callback(granted)
    }
    // 其他权限按默认逻辑处理
    callback(false)
  })

  // 原有窗口创建逻辑
  const mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
})

• 补充打包配置（针对发布场景）
  如果打包后仍出现重复请求权限的问题，需要添加对应平台的权限声明与签名配置：

macOS 配置示例（electron-builder 配置文件）：

"mac": {
  "entitlements": {
    "com.apple.security.device.camera": true
  },
  "extendInfo": {
    "NSCameraUsageDescription": "需要使用摄像头完成视频采集功能"
  },
  "identity": "你的开发者签名证书名称"
}

Windows 配置要求：
对安装包与可执行文件添加数字签名，避免系统识别为未知来源应用导致权限无法持久存储。

• 渲染进程无需修改
  你当前使用的getUserMedia调用逻辑完全符合规范，不需要做任何调整。

开发环境提示：开发阶段每次启动的应用临时路径可能发生变化，系统层面可能无法记住权限，属于正常现象，打包签名后即可恢复正常。

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