MediaDevices.getUserMedia()的部分坑和解决方案

2024-06-23 17:26| 来源: 网络整理| 查看: 265

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

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

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

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

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

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

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

解决方案： 1.可以给video标签直接设置transfrom:rotate(180deg)； 2.通过给API参数中设置ID，唤醒自己手机的前置摄像头(前置默认都是’default’)

video: { deviceId: 'default', facingMode:'user', } 在谷歌浏览器中显示正常，在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); }); } } 调用完前置后，后置摄像头调用无效

这个问题特别无助…测试中发现很多机型后置都是不能被唤醒，我自己的p30 pro 调用后默认居然是50倍变焦…吐血… 解决方案： 1.可以通过获取设备id，然后参数中通过id唤醒，这在上一篇博客中提到过。 2.使用Input唤醒（推荐）

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

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

【本文地址】

公司简介

联系我们