JS 嵌入 Android 后无法打开相机的问题
问题描述
最近项目中,前端和安卓协同开发,安卓端把 JS 前端项目,直接打包嵌入到安卓应用中,安卓的同事反馈,无法打开安卓的相机进行拍照。
如果是 iOS 或者移动端浏览器中,可以打开相机并进行拍照。
具体的代码如下,我使用 React JSX 语法,其中 input 输入图片。
<input
multiple
type="file"
capture="camera"
accept="image/*"
ref='camera_upload_image'
onClick={this.onClick}
onChange={this.onChange}
/>
问题原因
经调研:这是JS在安卓端兼容性问题。input 有 capture 和 multiple 两个属性。capture="camera"
表示调用照相机进行拍照,multiple 表示多选上传。
在浏览器网页或者 ios 系统中,都可以直接打开相机进行拍照。
在某些安卓原生应用中,这两个属性冲突,也就是设置了 multiple 后 capture 就失效了,表现为安卓原生应用无法直接打开相机拍照。
我们实际的代码中,设置了 multiple 和 capture 两个属性,所以无法直接打开安卓的相机。
解决
因为拍照只能同时拍摄一张,设置 multiple 没有意义,所以直接去掉 multiple 即可。上线后安卓真机测试基本正常。
<input
type="file"
capture="camera"
accept="image/*"
ref='camera_upload_image'
onClick={this.onClick}
onChange={this.onChange}
/>