Electron中无法获取摄像头列表的解决方案求助

核心逻辑 #

要完成需求，核心依赖WebRTC的媒体设备API，关键是先获取用户的媒体访问授权，再枚举设备列表，最后绑定选择事件播放对应摄像头的流。

具体实现步骤 #

1. 基础页面结构 #

先准备用于选择摄像头的下拉框和播放流的视频元素：

<select id="cameraSelect"></select>
<video id="videoPlayer" autoplay playsinline></video>

2. 获取摄像头列表并填充下拉框 #

必须先请求用户的媒体权限，否则enumerateDevices()无法返回带名称的设备信息，只能拿到无意义的设备ID：

async function loadCameraList() {
  const select = document.getElementById('cameraSelect');
  try {
    // 先请求空的媒体流，仅用于获取权限
    await navigator.mediaDevices.getUserMedia({ video: true });
    // 枚举所有媒体设备
    const devices = await navigator.mediaDevices.enumerateDevices();
    // 过滤出视频输入设备（即摄像头）
    const cameras = devices.filter(device => device.kind === 'videoinput');
    
    // 清空旧选项
    select.innerHTML = '';
    // 填充摄像头选项，无名称的设备用默认标识
    cameras.forEach(camera => {
      const option = document.createElement('option');
      option.value = camera.deviceId;
      option.textContent = camera.label || `摄像头 ${select.options.length + 1}`;
      select.appendChild(option);
    });
    
    // 默认选中第一个摄像头并播放
    if (cameras.length > 0) {
      playCameraStream(cameras[0].deviceId);
    }
  } catch (err) {
    console.error('获取摄像头列表失败:', err);
    alert('需要授权摄像头访问权限才能使用此功能');
  }
}

// 页面加载完成后初始化列表
window.addEventListener('load', loadCameraList);

3. 播放选中摄像头的直播流 #

编写函数，根据选中的设备ID获取对应摄像头的媒体流，并绑定到视频元素：

async function playCameraStream(deviceId) {
  const video = document.getElementById('videoPlayer');
  try {
    // 停止之前的流（避免资源占用）
    if (video.srcObject) {
      const tracks = video.srcObject.getTracks();
      tracks.forEach(track => track.stop());
    }
    // 根据设备ID请求对应摄像头的媒体流
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { deviceId: { exact: deviceId } }
    });
    // 将流绑定到视频元素
    video.srcObject = stream;
  } catch (err) {
    console.error('播放摄像头流失败:', err);
    alert('无法打开选中的摄像头');
  }
}

// 监听下拉框选择事件，切换摄像头
document.getElementById('cameraSelect').addEventListener('change', (e) => {
  playCameraStream(e.target.value);
});

关键注意点 #

• 权限优先：必须先通过getUserMedia获取授权，否则无法拿到摄像头的名称信息。
• 环境限制：媒体设备API仅支持HTTPS环境（本地开发的localhost除外）。
• 兼容性：现代Chrome、Firefox、Edge都支持该API，IE完全不兼容。

内容的提问来源于stack exchange，提问作者Abdul Rafey