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

Posted 2023-04-27

参考技术A

1.参考文档： 《WebRTC的getUserMedia获取摄像头信息模拟拍照》

2.在线测试： 在线实例DEMO
实测在android和ios效果都不好。
在微信和很多浏览器直接不支持摄像头，支持的也未正确调用摄像头。

3.mobile兼容性：

1.参考资料： 《getUserMedia API的两个使用案例》

2.在线测试： 在线实例DEMO
实测在Android和IOS效果还是都不好。

3.兼容性：

1.说明：通过Camera API,可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页:

2.兼容性：

Camera API测试效果还行，可能存在兼容性问题，如果要实现拍照蒙版，只能在图片获取到页面后再截取图片，无法实现给调用的本机摄像界面添加蒙版取景框。

1.参考资料： 《Android实现身份证拍摄框》
2.demo实测效果：

1.参考文档 : 《相机拍照界面取景框》
2.参考 github demo

如何调用h5的相机

实现方式常见有两种：

一种是通过video控件，通过捕获video的流，截取video中的图像实现拍照，

还有一种是通过input[file]控件调用移动端的摄像头，实现拍照。

两种方法各有利弊，第一种可以实现对拍照界面的重写（比如添加拍照界面的遮罩层提示框等）

但是，第一种方式在IPhone环境下不兼容，不能使用。

第二种方式实际上是调用input[type=‘file‘]，会弹出一个选择框让用户选择是调用相机还是调用相册，

好处就是兼容优于上一种，不好的地方就是这种方法无法控制拍照，想要在移动端实现只能拍照不能选择照片或者在拍照界面添加引导遮罩层的方法是行不通了。

这里说一下第二种方式的实现方式：

首先在页面上添加一个input控件实现调用相机。