在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 小时前
什么?还不知道git cherry pick?
前端·javascript·git
白兰地空瓶2 小时前
🏒 前端 AI 应用实战:用 Vue3 + Coze,把宠物一键变成冰球运动员!
前端·vue.js·coze
Liu.7743 小时前
vue3使用vue3-print-nb打印
前端·javascript·vue.js
松涛和鸣4 小时前
Linux Makefile : From Basic Syntax to Multi-File Project Compilation
linux·运维·服务器·前端·windows·哈希算法
dly_blog4 小时前
Vue 逻辑复用的多种方案对比!
前端·javascript·vue.js
万少4 小时前
HarmonyOS6 接入分享,原来也是三分钟的事情
前端·harmonyos
烛阴5 小时前
C# 正则表达式:量词与锚点——从“.*”到精确匹配
前端·正则表达式·c#
wyzqhhhh5 小时前
京东啊啊啊啊啊
开发语言·前端·javascript
JIngJaneIL5 小时前
基于java+ vue助农电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
想学后端的前端工程师5 小时前
【Java集合框架深度解析:从入门到精通-后端技术栈】
前端·javascript·vue.js