网页获取麦克风或摄像头权限我们只需调用 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>
