浏览器调用摄像头问题

这几天在做浏览器拍照的功能,使用到了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?
还望各位路过的大佬指点一二!!

阅读 5.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题