本文详解在 Electron 桌面应用中调用 navigator.mediaDevices.enumerateDevices() 获取可用摄像头列表，并结合 实现动态选择与实时预览的完整实现方案，涵盖权限处理、主进程/渲染进程协作及常见兼容性问题。
本文详解在 electron 桌面应用中调用 `navigator.mediadevices.enumeratedevices()` 获取可用摄像头列表，并结合 `
Electron 应用虽基于 Chromium，但默认沙箱和安全策略会限制部分 Web API 的行为。直接在渲染进程中调用 navigator.mediaDevices.enumerateDevices() 可能返回空数组或仅含音频设备——这是因为 摄像头枚举需用户已授予媒体权限，而 Electron 渲染进程在未触发 getUserMedia 请求前，系统不会主动授权设备访问。
✅ 正确做法是：先请求一次最小权限的媒体流（如仅音频），再枚举设备。示例代码如下：
// renderer.js
async function loadCameraList() {
try {
// 关键：触发权限请求（即使只请求音频，也能解锁设备枚举）
await navigator.mediaDevices.getUserMedia({ audio: true });
const devices = await navigator.mediaDevices.enumerateDevices();
const videoInputs = devices.filter(d => d.kind === 'videoinput');
const select = document.getElementById('camera-select');
select.innerHTML = '';
videoInputs.forEach(device => {
const option = document.createElement('option');
option.value = device.deviceId;
option.textContent = device.label || `Camera ${select.length + 1}`;
select.appendChild(option);
});
} catch (err) {
console.error('Failed to enumerate cameras:', err);
alert('请确保已允许摄像头访问权限（可在系统设置中检查）');
}
}
// 绑定选择事件，启动对应摄像头预览
document.getElementById('camera-select').addEventListener('change', async (e) => {
const stream = await navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: e.target.value } },
audio: false
});
document.getElementById('video-preview').srcObject = stream;
});⚠️ 注意事项：
-
macOS / Windows 权限需显式开启：首次运行时系统弹窗可能被拦截，建议在
main.js中监听media-access-required事件并引导用户手动授权； -
避免沙箱模式干扰：若启用
sandbox: true，需通过contextBridge安全暴露enumerateDevices调用，或改用webPreferences: { nodeIntegration: false, contextIsolation: true }配合预加载脚本； -
设备标签为空？：Chrome/Edge 在非 HTTPS 或非 localhost 环境下
device.label可能为空，建议 fallback 显示device.groupId或序号； -
Electron 版本兼容性：v12+ 已全面支持
enumerateDevices()，旧版本建议升级。
? 进阶提示：如需支持热插拔（USB 摄像头即插即用），可监听 devicechange 事件：
navigator.mediaDevices.addEventListener('devicechange', () => {
console.log('Camera list may have changed');
loadCameraList(); // 重新加载列表
});综上，Electron 中获取摄像头列表并非“不支持”，而是需遵循浏览器安全模型——以权限为前提、以标准 Web API 为工具。合理组合 getUserMedia 与 enumerateDevices，即可稳定构建多摄像头切换的桌面级音视频应用。
