在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)
 })
相关推荐
随风一样自由3 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
月走乂山3 小时前
Anything Analyzer MCP 401 Unauthorized 故障排查
electron·故障排查·mcp·claude code·anything analyzer
IMPYLH3 小时前
HTML 的 <data> 元素
前端·html
YHHLAI4 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
weixin_BYSJ19874 小时前
SpringBoot + MySQL 乒乓球运动员信息管理系统项目实战--附源码04954
java·javascript·spring boot·python·django·flask·php
沪飘大军5 小时前
ll-llm:一个零依赖、可插拔的 OpenAI 兼容 LLM 代理
javascript
kyriewen6 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H6 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
山河木马6 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
陆枫Larry7 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端