本文详解在 Electron 桌面应用中通过 navigator.mediaDevices.enumerateDevices() 安全、可靠地获取系统已连接摄像头列表，并结合 实现动态选择与实时预览，规避常见权限与上下文限制问题。
本文详解在 electron 桌面应用中通过 navigator.mediadevices.enumeratedevices() 安全、可靠地获取系统已连接摄像头列表，并结合 <select></select> 实现动态选择与实时预览，规避常见权限与上下文限制问题。
在 Electron 中获取摄像头列表看似简单，实则需特别注意渲染进程的安全上下文与权限模型。Electron 默认禁用不安全的混合内容（如未启用 webSecurity: false 或未正确配置 sandbox），而 enumerateDevices() 要求页面运行在安全上下文（secure context）中——即必须通过 file:// 协议加载时启用 webPreferences.allowRunningInsecureContent: true（不推荐），或更佳方案：使用本地 HTTP 服务（如 http://localhost）启动主窗口，以满足浏览器对 getUserMedia 和设备枚举的 HTTPS/localhost 安全策略要求。
✅ 正确实现步骤如下：
-
确保主进程创建窗口时启用必要选项（推荐
nodeIntegration: false,contextIsolation: true，配合preload.js）：// main.js const mainWindow = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: false, contextIsolation: true, // ⚠️ 关键：允许 localhost 上运行安全上下文 webSecurity: true, // 保持开启，仅通过 localhost 规避限制 } }); mainWindow.loadURL('http://localhost:3000'); // 推荐：用 express/static 启服务 -
在
preload.js中暴露安全的设备查询方法：// preload.js const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('cameraAPI', {
getCameras: async () => {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
return devices
.filter(device => device.kind === 'videoinput')
.map(device => ({ id: device.deviceId, label: device.label || Camera ${device.deviceId.slice(0, 5)} }));
} catch (err) {
console.error('Failed to enumerate cameras:', err);
throw err;
}
},
startStream: async (deviceId) => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId } });
return stream;
} catch (err) {
console.error('Failed to access camera:', err);
throw err;
}
}
});
3. **渲染进程调用并渲染选择器与视频流**：
```html
<!-- index.html -->
<select id="cameraSelect"></select>
<video id="preview" autoplay muted></video>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const select = document.getElementById('cameraSelect');
const video = document.getElementById('preview');
try {
const cameras = await window.cameraAPI.getCameras();
cameras.forEach(cam => {
const opt = document.createElement('option');
opt.value = cam.id;
opt.textContent = cam.label;
select.appendChild(opt);
});
select.addEventListener('change', async () => {
// 停止当前流（如有）
if (video.srcObject) {
video.srcObject.getTracks().forEach(track => track.stop());
}
try {
const stream = await window.cameraAPI.startStream(select.value);
video.srcObject = stream;
} catch (e) {
alert('无法启动该摄像头：' + e.message);
}
});
// 初始化默认摄像头
if (cameras.length > 0) {
select.value = cameras[0].id;
const stream = await window.cameraAPI.startStream(cameras[0].id);
video.srcObject = stream;
}
} catch (e) {
console.error('初始化失败:', e);
alert('请确保已允许摄像头权限，并刷新页面重试');
}
});
</script>⚠️ 关键注意事项：
- ❌ 不要直接在
file://协议下运行（Chrome 会拒绝enumerateDevices()，返回空数组且无错误）； - ✅ 必须在用户交互（如点击按钮）后首次调用
getUserMedia()才能触发权限弹窗； - ? 若启用
sandbox: true，navigator.mediaDevices仍可用，但需确保preload.js正确桥接； - ? 标签名（
label）在无用户授权前可能为空，建议首次调用getUserMedia({ video: true })获取权限后再执行enumerateDevices()，或引导用户先点击“授权摄像头”按钮。
总结：Electron 中获取摄像头列表的核心在于满足浏览器安全上下文要求 + 合理隔离主/渲染进程 + 显式处理权限流。遵循上述模式，即可稳定支持多摄像头切换与实时预览，为视频会议、扫码识别等场景奠定基础。
