JS input 在 Android 中无法打开相机的问题

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}
/>

参考

W3官网

CSDN

CSDN