使用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 内部设置了退出清除了缓存,把“清除缓存”摘除掉以后就恢复了正常
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 使用MediaDevices.getUserMedia()遇到的坑及解决方法
码云笔记 » 使用MediaDevices.getUserMedia()遇到的坑及解决方法