uniapp调用手机摄像头_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.g