如何在getMediaStream中检测设备的摄像头类型（前置/后置/两者兼具）

嘿，这个问题问到点子上了！日常开发中经常遇到需要区分前后置摄像头的场景，我们完全可以利用浏览器原生的MediaDevices API来实现，具体看我下面的步骤和代码示例：

核心思路 #

我们要用到两个关键API：

1. navigator.mediaDevices.getUserMedia()：先请求摄像头权限（很多浏览器需要授权后才能获取完整的设备信息）
2. navigator.mediaDevices.enumerateDevices()：枚举所有媒体设备，过滤出摄像头后通过设备标识区分前后置

具体实现代码 #

async function checkCameraTypes() {
  try {
    // 第一步：请求基础摄像头权限，否则部分浏览器拿不到设备的完整标签信息
    await navigator.mediaDevices.getUserMedia({ video: true });

    // 第二步：获取所有可用的媒体设备
    const allDevices = await navigator.mediaDevices.enumerateDevices();

    // 过滤出所有视频输入设备（也就是摄像头）
    const cameraDevices = allDevices.filter(device => device.kind === 'videoinput');

    if (cameraDevices.length === 0) {
      console.log("当前设备未检测到任何摄像头");
      return { hasFrontCam: false, hasBackCam: false };
    }

    let hasFrontCam = false;
    let hasBackCam = false;

    // 遍历每个摄像头，通过标签或设备ID判断类型
    cameraDevices.forEach(cam => {
      const lowerLabel = cam.label.toLowerCase();
      // 前置摄像头常见标识：front、user（移动端标准标识）
      if (lowerLabel.includes('front') || lowerLabel.includes('user')) {
        hasFrontCam = true;
      }
      // 后置摄像头常见标识：back、environment（移动端标准标识）
      if (lowerLabel.includes('back') || lowerLabel.includes('environment')) {
        hasBackCam = true;
      }
    });

    // 输出检测结果
    console.log(`前置摄像头：${hasFrontCam ? '存在' : '不存在'}`);
    console.log(`后置摄像头：${hasBackCam ? '存在' : '不存在'}`);
    return { hasFrontCam, hasBackCam };

  } catch (error) {
    console.error("摄像头检测失败：", error);
    // 处理权限拒绝的常见情况
    if (error.name === 'NotAllowedError') {
      alert("请先授予摄像头权限，才能检测设备类型哦！");
    }
  }
}

// 调用检测函数
checkCameraTypes();

重要注意事项 #

• 权限是关键：部分浏览器（比如Chrome、Edge）在用户未授权前，enumerateDevices()返回的设备标签是空白字符串，所以必须先调用getUserMedia()请求一次基础权限，才能拿到带标识的设备信息。
• 兼容性：这个方案支持所有现代浏览器（Chrome 45+、Firefox 39+、Edge 12+），IE浏览器完全不支持，就不用考虑啦。
• 标识的兼容性：不同设备和浏览器的标签可能有差异，比如部分国产安卓设备会用中文标签“前置摄像头”，如果要适配这种场景，可以在判断逻辑里加上中文关键词的检测。

这样就能轻松判断设备是只有前置摄像头（比如大部分笔记本）、只有后置，还是前后都有啦！

备注：内容来源于stack exchange，提问作者Ali Ehyaie