在electron中获取麦克风和相机权限

使用Electron开发应用的时候,我们偶尔需要使用到麦克风或者相机,比如:

  • 视频会议
  • 语音聊天
  • 实时语音识别
  • ......

在 macOS 系统中,应用程序需要获得用户的明确授权才能使用麦克风或摄像头等硬件设备。

本文主要讲如何在macOS(苹果系统)中去获取媒体权限,以获取麦克风为例🎤。

在macOS中获取权限的流程

macOS中,当应用程序首次尝试访问麦克风时,系统通常不会自动在系统偏好设置 - 安全与隐私 - 麦克风列表中显示该应用。而是会触发一个权限提示对话框询问用户是否允许该应用访问麦克风。只有当用户对此作出响应(选择允许或拒绝),该应用才会出现在"麦克风"设置列表中,并记录用户的权限选择。

流程如下:

  1. 应用程序尝试访问麦克风。
  2. macOS系统检测到这一行为,并弹出权限提示框询问用户是否允许该应用使用麦克风。
  3. 用户做出选择(允许或拒绝),然后系统根据用户的选择给予相应的权限。
  4. 用户可以在"系统偏好设置 > 安全与隐私 > 麦克风"中查看和修改所有已请求过麦克风访问权限的应用及其当前的访问状态。如果用户之前错过了权限提示框或者希望更改权限设置,他们也可以在这里手动添加或移除应用的麦克风访问权限。

首次请求麦克风权限,系统会弹框,提示用户点击授权,如图所示:

授权过后,下一次可以在"系统偏好设置 - 安全与隐私 - 麦克风"中查看:

代码实现

electron主进程代码,requestMediaAccess.ts文件

ts 复制代码
/**
 * Mac 获取媒体权限
 */

import {ipcMain, systemPreferences} from 'electron'

enum EMediaType {
  microphone = 'microphone', // 麦克风
  camera = 'camera', // 相机
}

/**
 * 访问状态
 *  'not-determined':[未确定]表示用户尚未做出决定,或者系统尚未提示用户进行授权。
 *  'granted':[已授权]表示用户已经明确授予了应用的权限。
 *  'denied':[拒绝]表示用户拒绝了应用授权的请求。
 *  'restricted':[受限]在某些情况下,可能是由于系统策略或其他安全限制导致应用无法获得改权限。
 *  'unknown':[未知]在无法确定权限状态的情况下返回,可能是因为某种错误或其他不可预知的情况。
 */
type IAccessStatus = 'not-determined' | 'granted' | 'denied' | 'restricted' | 'unknown'

/**
 * 请求媒体权限
 * @param mediaType
 */
const requestMediaAccess = async (mediaType: EMediaType): Promise<IAccessStatus> => {

  try {
    // 获取当前媒体设备(在这里指麦克风或摄像头)的访问权限状态
    const privilege: IAccessStatus = systemPreferences.getMediaAccessStatus(mediaType)

    if (privilege !== 'granted') {
      // 未授权,则重新唤起系统弹框,等待用户点击授权
      await systemPreferences.askForMediaAccess(mediaType)
      // 请求权限后,再次获取媒体访问状态并返回
      return systemPreferences.getMediaAccessStatus(mediaType)
    }
    // 已授权,则直接返回媒体访问状态
    return privilege
  } catch (e) {
    console.error('Failed to request media access:', e)
    return 'unknown'
  }

}

ipcMain.handle('request-media-access', async (event, mediaType: EMediaType = EMediaType.microphone) => {
  return requestMediaAccess(mediaType)
})

渲染进程如何调用:

ts 复制代码
// 请求麦克风权限
 ipcRenderer.invoke('request-media-access').then((res) => {
   console.log(res)
 })
相关推荐
崔庆才丨静觅2 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60613 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了3 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅3 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅4 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment4 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅4 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊4 小时前
jwt介绍
前端
爱敲代码的小鱼4 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax