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

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196604.html

1. 1. 按照文档设置了后置参数，却还是显示前置摄像头
2. 2. 用户第一次误点拒绝授权以后，再次进入页面无法正常唤醒摄像头
3. 3. 部分手机打开摄像头以后是黑屏，但是拍照仍然可以成像
4. 4. 前置摄像头调用后镜像问题
5. 5. 在谷歌浏览器中显示正常，在 QQ 浏览器就不能正常显示
6. 6. 调用完前置后，后置摄像头调用无效
7. 7.使用 input 唤醒相机放在 web-view 里面，第一次正常，退出重新进入再执行 img.onload 时候没有反应

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  v-on:change="appCapture" type="file" accept="image/*" capture="camera" />

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

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

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/