使用MediaDevices.getUserMedia()遇到的坑及解决方法

1. 按照文档设置了后置参数,却还是显示前置摄像头

解决方案:将文件配置在https环境下就能正常运行

2. 用户第一次误点拒绝授权以后,再次进入页面无法正常唤醒摄像头

解决方案:关闭页面后清除页面cookies,再次进入就能重新授权

3. 部分手机打开摄像头以后是黑屏,但是拍照仍然可以成像

解决方案:做了很多处理都没用,最后发现只要把参数中的分辨率(width,height)删除掉,就解决了黑屏问题

4. 前置摄像头调用后镜像问题

解决方案:

1.可以给video标签直接设置transfrom:rotate(180deg);

2.通过给API参数中设置ID,唤醒自己手机的前置摄像头(前置默认都是’default’)

video: {
    deviceId: 'default',
    facingMode:'user',
}

5. 在谷歌浏览器中显示正常,在QQ浏览器就不能正常显示

解决方案:代码执行前先处理兼容性,如果放置app中,也可以给web-view添加类似X5内核,使网页在同一环境下运行

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);
        });
    }
}

6. 调用完前置后,后置摄像头调用无效

这个问题特别无助…测试中发现很多机型后置都是不能被唤醒,我自己的p30 pro调用后默认居然是50倍变焦…吐血…

解决方案:

1.可以通过获取设备id,然后参数中通过id唤醒,这在上一篇博客中提到过。

2.使用Input唤醒(推荐)

<input class="card_input" v-on:change="appCapture" type="file" accept="image/*" capture="camera" />

7.使用input唤醒相机放在web-view里面,第一次正常,退出重新进入再执行img.onload时候没有反应

解决方案:app内部设置了退出清除了缓存,把“清除缓存”摘除掉以后就恢复了正常

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 使用MediaDevices.getUserMedia()遇到的坑及解决方法

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们