如何用HTML5/JS调用移动端后置摄像头？facingMode配置无效

我来帮你解决这个问题！你遇到的facingMode不生效，主要是两个原因：一是原代码的媒体配置没有正确指定摄像头方向约束，二是旧版的getUserMedia API不支持这种高级配置。下面是具体的解决方案：

问题根源拆解 #

你的原代码里mediaConfig仅设置了video: true，没有添加摄像头方向的约束参数；而且旧版的navigator.getUserMedia（包括带webkit/moz前缀的版本）不支持facingMode这类详细配置，只有现代的navigator.mediaDevices.getUserMedia才支持完整的媒体流约束。

解决方案步骤 #

1. 正确配置媒体约束

把mediaConfig中的video字段从布尔值改为对象，明确指定优先使用后置摄像头，同时配置 fallback 逻辑避免设备无后置摄像头时出错：

var mediaConfig = { 
  video: { 
    facingMode: { ideal: 'environment', fallback: 'user' } 
  } 
};

• ideal: 'environment'：优先请求后置摄像头
• fallback: 'user'：如果后置不可用，自动 fallback 到前置摄像头

2. 优先使用现代API

旧版API无法支持摄像头方向配置，所以我们重点保留现代API的实现，旧版部分仅做基础兼容（无法实现后置优先）。

修改后的完整代码 #

function startcam() { 
  var video = document.getElementById('video'); 
  // 配置摄像头优先使用后置， fallback到前置
  var mediaConfig = { 
    video: { 
      facingMode: { ideal: 'environment', fallback: 'user' } 
    } 
  }; 
  var errBack = function(e) { 
    console.log('An error has occurred!', e) 
  }; 

  // 优先使用现代API，只有它支持facingMode配置
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
    navigator.mediaDevices.getUserMedia(mediaConfig)
      .then(function(stream) { 
        // 现代浏览器推荐使用srcObject替代createObjectURL
        video.srcObject = stream; 
        video.play(); 
      })
      .catch(errBack); 
  } 
  // 旧版API兼容（无法指定后置摄像头，只能用系统默认）
  else if(navigator.getUserMedia) { 
    navigator.getUserMedia({ video: true }, function(stream) { 
      video.src = stream; 
      video.play(); 
    }, errBack); 
  } else if(navigator.webkitGetUserMedia) { 
    navigator.webkitGetUserMedia({ video: true }, function(stream){ 
      video.src = window.webkitURL.createObjectURL(stream); 
      video.play(); 
    }, errBack); 
  } else if(navigator.mozGetUserMedia) { 
    navigator.mozGetUserMedia({ video: true }, function(stream){ 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
    }, errBack); 
  }; 
}; 
startcam();

额外注意事项 #

• HTTPS环境要求：除了本地localhost，浏览器要求getUserMedia必须在HTTPS环境下运行，否则会拒绝摄像头调用请求。
• 真实设备测试：建议在真实移动设备上测试，模拟器可能无法正确识别物理摄像头的方向。
• API废弃提醒：现代浏览器推荐使用video.srcObject = stream代替window.URL.createObjectURL(stream)，后者已被逐步废弃。

这样修改后，移动端就能优先调用后置摄像头了！

内容的提问来源于stack exchange，提问作者Maja Jelen