h5调用摄像头拍照
方法一:navigator.getUserMedia API
网上很多用此API实现的例子,但MDN显示此API已废弃,被方法二的MediaDevices.getUserMedia() API代替。
1.参考文档:《WebRTC的getUserMedia获取摄像头信息模拟拍照》
2.在线测试:在线实例DEMO
实测在Android和IOS效果都不好。
在微信和很多浏览器直接不支持摄像头,支持的也未正确调用摄像头。
3.mobile兼容性:
方法二:MediaDevices.getUserMedia() API
1.参考资料: 《getUserMedia API的两个使用案例》
2.在线测试: 在线实例DEMO
实测在Android和IOS效果还是都不好。
3.兼容性:
方法三:Camera API
1.说明:通过Camera API,可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页:
<input type="file" id="take-picture" accept="image/*">
2.兼容性:
Camera API测试效果还行,可能存在兼容性问题,如果要实现拍照蒙版,只能在图片获取到页面后再截取图片,无法实现给调用的本机摄像界面添加蒙版取景框。
原生APP方式实现拍照界面取景框
1. Android
1.参考资料: 《Android实现身份证拍摄框》
2.demo实测效果:
2. IOS
1.参考文档 :《相机拍照界面取景框》
2.参考 github demo