如何在 Electron 应用中获取并选择本地摄像头列表-html教程-PHP中文网

如何在 Electron 应用中获取并选择本地摄像头列表

本文详解在 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()，或引导用户先点击“授权摄像头”按钮。