0
点赞
收藏
分享

微信扫一扫

h5调用摄像头拍照兼容性及原生实现拍照取景框

代码敲到深夜 2021-09-24 阅读 197

h5调用摄像头拍照

方法一:navigator.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

举报

相关推荐

0 条评论