浏览器调用摄像头问题

发布于 2022-09-11 21:38:37 字数 1458 浏览 28 评论 0

这几天在做浏览器拍照的功能,使用到了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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文