electron 下网页获取 micphone 权限

网页获取麦克风或摄像头权限我们只需调用 navigator.mediaDevices.getUserMedia 方法就可唤起浏览器用户授权

const useMicphone = async () => {
  try{
    let mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    if (mediaStream) {
      console.log('获取 micphone 成功')
    }
  }catch(e){  
    console.warn('获取 micphone 失败')
  }
};

但在 electron 内可能不起作用

我们用 electron 来包裹网页本意大多就是为了方便获取更多的操作权限

如果获取失败的话可尝试在 electron 内提前让用户权限可在 electron 提供的 api 内在用户打开软件时提前授权

在创建窗体后，加载网页前调用 systemPreferences.getMediaAccessStatus 授权：

import { app, systemPreferences } from "electron";

// 权限授权
async function checkMediaAccess(mediaType: 'microphone' | 'camera' | 'screen'){
  const result = systemPreferences.getMediaAccessStatus(mediaType)
  if(result !== "granted"){
    await systemPreferences.askForMediaAccess('microphone')
  }
}

// 创建主窗体
async function createMainWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, "preload.js"),
      webSecurity: false,
    },
  });
  // 此处调用并授权
  await checkMediaAccess('microphone')

  if (isDev) {
    win.loadURL(VITE_DEV_SERVER_URL);
    win.webContents.openDevTools();
  } else {
    win.loadFile('dist/index.html')
  }
  return win;
}

如果获取 micphone 或者摄像头是在 electron 网页内再嵌入的 iframe 内则还需要在 iframe 上加上 allow 属性：

// 允许地理信息，麦克风，摄像头.. 等权限
<iframe allow="geolocation; microphone; camera; midi; encrypted-media;" src="http://helloworld.com" style="min-width: 100%; height: 100%; width: 100%;"></iframe>

---

注：转载请注明出处博客园：王二狗Sheldon池中物 (willian12345@126.com)