在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)
 })
相关推荐
学逆向的1 分钟前
inilne HOOK
前端·网络安全·hook
web打印社区31 分钟前
Vue3 发票静默打印,我这边能跑通的一版
前端·javascript·vue.js·chrome·electron
嘟哩DuliDuli1 小时前
创作 Agent 的任务状态该如何保存
android·java·javascript
lemon_sjdk1 小时前
JavaScript 常用关键字全解析
开发语言·javascript·ecmascript
妖孽白小白2 小时前
el-select的内容续写实现
前端·vue.js·elementui
不可能片场2 小时前
Electron 主进程热补丁:单行 JS 安全打法
前端·electron
梨想橙汁2 小时前
Pinia 状态管理实战:定义 Store、修改数据、模块拆分
前端·vue.js
高申航2 小时前
Vue 3 + DYMO Connect Framework 实战:从标签模板到打印服务的完整实现
前端·javascript·vue.js
梨想橙汁2 小时前
Vue3 组件开发:生命周期钩子,组件之间通信全方案
前端·vue.js
雪芽蓝域zzs2 小时前
分页组件 + el-config-provider 中文国际化 + 靠右布局
前端·javascript·vue.js