本文详解如何在 Electron 桌面应用中可靠获取系统已连接摄像头列表、动态渲染到 元素，并实现选中后实时预览对应摄像头画面，涵盖 WebRTC 权限处理、navigator.mediaDevices.enumerateDevices() 的正确调用时机及主进程与渲染进程协同方案。
本文详解如何在 electron 桌面应用中可靠获取系统已连接摄像头列表、动态渲染到 `
Electron 应用中无法获取摄像头列表（如 navigator.mediaDevices.enumerateDevices() 返回空数组或 Promise 拒绝），通常并非 API 本身失效，而是受限于 上下文权限、安全策略与生命周期时机。关键在于：Electron 渲染进程默认运行在 file:// 协议下，而 enumerateDevices() 要求页面处于安全上下文（secure context）——即 https:// 或 localhost（含 127.0.0.1）。直接双击打开的 index.html 文件（file://...）不满足该条件，导致 API 被禁用。
✅ 正确做法是启用 Electron 的 webSecurity: false（仅开发阶段）或更推荐的方式：通过 http://localhost 启动应用（例如使用 electron-forge、vite-plugin-electron 或自建简易 HTTP 服务）。同时确保在 DOM 完全加载且用户已授予媒体权限后调用：
// renderer.js（渲染进程）
async function loadCameraList() {
try {
// 1. 首先请求一次权限（触发用户授权弹窗）
await navigator.mediaDevices.getUserMedia({ video: true });
// 2. 再枚举设备（此时权限已确认）
const devices = await navigator.mediaDevices.enumerateDevices();
const videoInputs = devices.filter(device => device.kind === 'videoinput');
const select = document.getElementById('camera-select');
select.innerHTML = '';
videoInputs.forEach((device, index) => {
const option = document.createElement('option');
option.value = device.deviceId;
option.textContent = device.label || `Camera ${index + 1}`;
select.appendChild(option);
});
// 3. 初始化首个摄像头预览
if (videoInputs.length > 0) {
startStream(videoInputs[0].deviceId);
}
} catch (err) {
console.error('获取摄像头列表失败:', err.name, err.message);
alert('请允许摄像头访问权限，或检查浏览器/系统设置');
}
}
async function startStream(deviceId) {
const video = document.getElementById('video-preview');
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: deviceId } }
});
video.srcObject = stream;
} catch (err) {
console.error('启动视频流失败:', err);
}
}
// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
loadCameraList();
// 切换摄像头
document.getElementById('camera-select').addEventListener('change', (e) => {
startStream(e.target.value);
});
});
⚠️ 注意事项：
-
不要在未获权限前调用
enumerateDevices()：部分系统（如 macOS）可能返回空label字段，需依赖deviceId唯一标识；首次调用getUserMedia()是触发权限提示并“激活”设备枚举的必要步骤。 -
避免
file://协议：生产环境务必通过http://localhost或打包后嵌入WebView并配置webPreferences: { webSecurity: false, allowRunningInsecureContent: true }（仅限可信内网场景，不推荐线上使用）。 -
主进程辅助方案（可选增强）：若需更高控制力（如检测热插拔），可用
systeminformation库（npm install systeminformation）在主进程中获取摄像头硬件信息，再通过ipcRenderer向渲染进程同步，但实时流仍必须由渲染进程通过getUserMedia建立。
总结：Electron 中获取摄像头列表的核心是满足安全上下文 + 显式触发权限 + 正确调用时序。只要确保页面运行在 localhost、用户已授权、且 enumerateDevices() 在 getUserMedia() 成功后调用，即可稳定获取设备列表并实现动态切换预览。
