如何封装一个H5照相机组件（放大缩小、连拍、预览、手电筒，横竖屏拍摄）

文章预览

作者：非凡00 https://juejin.cn/post/7410209171801325606 为什么要封装一个H5照相机组件 项目上有个需求就是说移动端网页中的照相机要支持连拍功能。 要知道咱们一般网页中通过input标签调用出来的照相机都是拍完后需要进行点击确认操作，然后再重新点击拍照按钮调起照相机如此往复，这样的交互方式对于需要快速拍摄的场景来说效率确实太低了。 如果本机摄像头无法进行连拍操作的话只能通过直接调用媒体摄像头的方式看看能否实现，考虑到开源的组件可能无法完全满足项目需要且也不太好扩展功能所以决定自己封装一个。 使用到的技术 Navigator.mediaDevices.getUserMedia：获取摄像头数据流，用于显示摄像头画面； canvas：捕捉摄像头画面帧，生成可使用的图片数据； lrz：用于图片压缩； orientation.js：判断手机横竖屏 Taro:移动端框架 如何在页面上显示摄像 ………………………………