在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)
 })
相关推荐
2501_9209317016 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
layman052816 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔16 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李16 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN16 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒16 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库16 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
方也_arkling17 小时前
Element Plus主题色定制
javascript·sass
电商API_1800790524717 小时前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫
晓晓莺歌17 小时前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js