浏览器调用摄像头问题
这几天在做浏览器拍照的功能,使用到了webrtc
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
'audio': true,
'video': {facingMode: 'user'} // facingMode: {exact: "environment"} 调用后置摄像头
}).then(function (mediaStream) {
getVideoStream(mediaStream)
}).catch(function (error) {
console.log(error);
parent.layer.msg('检测到权限被禁用,请刷新页面重试', {
area: ['20%', '8%'],
offset: ['46%', '40%'],
});
})
} else if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': true,
'audio': true
}, getVideoStream)
} else {
parent.layer.msg('该浏览器暂不支持调用摄像头', {
area: ['20%', '8%'],
offset: ['46%', '40%'],
});
}
如上可以看到,我写的是调用前置摄像头,但是不知道为什么,调用的却是后置摄像头,我用的是华为平板,win10系统,chrome浏览器。
但我在华为Android机上测试,用的也是chrome浏览器,但是调用的却是前置摄像头。
难道说Android和win10的前后置摄像头是相反的?
我将{facingMode: 'user'}改成facingMode: {exact: "environment"}(标准上是调用的后置摄像头,在平板上实际上是前置)
chrome下弹出检测到权限被禁用的提示(这是我layer的效果),实际报错是OverconstrainedError
,百度一下,全是说一些不要限制width、height之类什么的,但我也没设置这些玩意儿啊。。
而当我在Edge浏览器上测试的时候,却一切都是正常的,{facingMode: 'user'}调用的还是前置,facingMode: {exact: "environment"}调用的是后置,和Android一样,这也排除了Android和win10的前后置摄像头是相反的这个结论!!!
难道说这是浏览器之间兼容性问题?不,我刚刚也说了,我在Android下用的也是Chrome浏览器。
这。。。,既然既不是系统的原因也不是浏览器问题,那么到底是什么原因导致了这个诡异的Bug?
还望各位路过的大佬指点一二!!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论