HTML5通过通过navigator.mediaDevices.getUserMedia调用手调用手
机摄像头问题机摄像头问题
navigator.mediaDevices.getUserMedia
应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下：
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
看上去很简单，最终却写的怀疑人生。
API环境环境
问题一：（为什么不管怎么配置都显示前置摄像头）问题一：（为什么不管怎么配置都显示前置摄像头）
想正常使用API必须在https环境下进行，否则你会发现不管怎么写，都只能调用默认的摄像头（大部分都是前置，只有少部分
是后置）
前端开发者可以将文件上传至"码云"仓库，获取https链接然后在手机上预览
链接：码云仓库入口
问题二：（问题二：（API在安卓和在安卓和ios效果一样吗？）效果一样吗？）
根据官方文档，目前navigator.mediaDevices.getUserMedia在ios上只支持11版本以上，且只能在safari正常运行。安卓目前没
有发现版本限制，需要兼容的代码如下
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ||
navigator.oGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
问题三：（第一次启用成功调用前置摄像头，第二次需要调用后置却黑屏或者失败）问题三：（第一次启用成功调用前置摄像头，第二次需要调用后置却黑屏或者失败）
失败的原因很多，列举两个一开始我遇到的问题
1.前置摄像头调用后，摄像功能需要关闭后才能正常执行第二次调用，否则会报错：设备被占用。解决方法，在每次执行调用
方法前，先关闭摄像设备。
if (window.stream) {
window.stream.getTracks().forEach(track => {
track.stop();
});
}
亲测有用，别的找了很多停止的方法都没有效果。
2.调用后置API的方法还是无法唤醒后置摄像头，于是我找到另外一个方法，通过查看手机摄像头ID，来直接唤醒后置。
var deviceInfoId="", //摄像头ID
num = 0, //摄像头数量
carema = []; //摄像头ID数组
//在页面加载完成后获得设备ID数组
window.onload = navigator.mediaDevices.enumerateDevices().then(gotDevices);
function gotDevices(deviceInfos) {
for (let i = 0; i < deviceInfos.length; ++i) {
if (deviceInfos[i].kind === 'videoinput') {
carema.push(deviceInfos[i].deviceId)
}
}
deviceInfoId = carema[后置位置];
}
var constraints = {
audio: false,
video: {
deviceId: deviceInfoId,
//放在app里面需要下面配置一下
- 1
- 2
前往页