navigator.mediaDevices.getUserMedia问题总结

最新推荐文章于 2025-03-17 12:11:01 发布

pg_li

最新推荐文章于 2025-03-17 12:11:01 发布

阅读量1.2w

点赞数 7

分类专栏： # html5音视频文章标签： html5

本文链接：https://blog.csdn.net/ligaoming_123/article/details/113943906

版权

html5音视频专栏收录该内容

3 篇文章

订阅专栏

navigator.mediaDevices.getUserMedia

1、在PC端不能配置facingMode字段来设定前置或者后置摄像头，否则不能打开摄像头

2、使用后置摄像头设置分辨率时，宽高颠倒才能正确显示（手机本身的比例是高大于宽）
width: { min: 776, ideal: 720, 1080: },
height: { min: 1024, ideal: 1280, max: 1920  }
3、使用浏览器真机调试时，使用了http协议，导致无法打开摄像头

在chrome中可以在url地址栏中直接输入chrome://flags/#unsafely-treat-insecure-origin-as-secure来配置chrome的安全策略，配置如下，然后点击确定重启后可使用

4、使用 Safari时，如果使用iframe嵌套模式，注意配置allow="camera;microphone"
<iframe
  allow="camera;microphone"
  src="https://xxx">
</iframe>
5、使用 Safari打开摄像头黑屏，但是可以成像，需要添加playsinline,webkit-playsinline属性为true，设置非全屏播放可正常使用
<video v-show="!imgSrc" id="videoCamera" playsinline webkit-playsinline="true"
                   :width="videoWidth" :height="videoHeight" autoplay>
                您的浏览器不支持 video 标签。
            </video>