WEBRTC 实现浏览器拍照

最近的几个需求都涉及到了扫码和拍照之类的功能，扫码用的是插件 html5-qrcode，拍照就自己写了一下，没多少行代码。

用的是 WEBRTC 的 api 然后把视频流画到 canvas 里面，再保存成图片，直接上代码：

  
  
  



  

开始
拍照
关闭

一开始用的是简写 navigator.getUserMedia，结果 ios 居然不行，后面 navigator.mediaDevices.getUserMedia 就可以了，也是神奇。

还有要注意，如果不想视频拍照的时候全屏（移动端），给 video 加上属性 webkit-playsinline playsinline x5-video-player-type=“h5-page”

另外视频可以设置前置和后置摄像头，分辨率，video 是对象，user 是前置，environment 是后置，width/height 是分辨率，移动端可能还反着来，就是这个分辨率一直不知道是怎么可以设置全，因为拍照的框是固定的，所以很难设置的刚好，如果只是播放视频还好，通过判断分辨率然后用 css 控制 object-fit，是 cover 还是 contain，如果是 fill 就有肯能变形。

{
  facingMode: 'environment',
  width: { ideal: 720 },
  height: { ideal: 1280 },
}

要是有人对这个分辨率有很好的理解，求指教，毕竟现在的项目有可能要解决满框。

也可以到 GitHub 下载对应的代码：https://github.com/wade3po/demoCode

欢迎关注订阅号 coding 个人笔记