navigator.mediaDevices.getUserMedia问题总结

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>