【Android-混合开发】H5 能直接调起原生的相册和相机吗？

最新推荐文章于 2025-06-09 21:37:22 发布

原创

最新推荐文章于 2025-06-09 21:37:22 发布 · 2.5k 阅读

最近混合开发中出现，H5 界面调用原生的相册和相机。一开始的我，并不知道 H5 可以直接调起原生的相机和相册。iOS 的同事告诉我，可以的。我很开心，因为这样才符合混合开发的意义嘛。（只要 H5 端写好了，两个移动端就可以不写）。但是万万万万万万没想到，Android，好像不可以？？？（我爱 Android）

尝试1：抱着希望在 Google 上一顿搜索，有文章说要在 H5 标签中，添加capture属性。

<input type="file" accept="image/*" capture="camera"> 
<input type="file" accept="video/*" capture="camcorder"> 
<input type="file" accept="audio/*" capture="microphone">

让前端的同学加了属性，发现然并卵

尝试2：通过研究（google）发现，当 <input> 标签修饰的控件被点击，我们这边是可以收到这个事件的。会通过 WebChromClient 中的 onShowFileChooser() 回调用来。

private val webViewChromeClient = object : WebChromeClient() {

    override fun onShowFileChooser(webView: WebView, 
                                   filePathCallback:ValueCallback<Array<Uri>>,
                                   fileChooserParams: FileChooserParams): Boolean {
        //这个拿到，将结果返回给 H5 的
        mFilePathCallback = filePathCallback
        val acceptTypes = fileChooserParams.acceptTypes
        if (acceptTypes.contains("image/*")) {
            //todo 调起选择框
        }
        return true
    }
}

那？？拿到照片后，怎么返回给 H5 呢？

看到上面的 ValueCallback 了吗？点击源码瞅一眼，哦？就一个方法，那就调它返回文件的 path 给到 H5。

public interface ValueCallback<T> {
    void onReceiveValue(T var1);
}

整体思路如上。

那具体上怎么操作呢？

 //1.调起选择框
 //2.权限申请和管理
 //3.操作完的回调
 //其实就是基本调起原生相册，相机的操作。不过，需要特别注意的就是，在回调返回值给H5的时候，
 //无论是否有值都要回调给 H5,否则下次就调不起来了。believe it or not, you can try it.
 //mFilePathCallback?.onReceiveValue(null)

/**
 * 显示相册/拍照选择对话框
 */
private fun showSelectDialog() {
    if (mSelectPhotoDialog == null) {
        //简单写个Dialog
        mSelectPhotoDialog = SelectDialog(this, View.OnClickListener { view ->
            when (view.id) {
                //不同选择的，不同权限申请
                R.id.tv_camera -> requestPermissions(SELECT_CAMERA)
                R.id.tv_photo -> requestPermissions(SELECT_ALBUM)
                //♨♨♨不管选择还是不选择，必须有返回结果，否则就只会调用一次。（不理解的话，可以试试不写下面的代码）
                R.id.tv_cancel -> {
                    mFilePathCallback?.onReceiveValue(null)
                    mFilePathCallback = null
                }
            }
        })
    }
    mSelectPhotoDialog?.show()
}

//权限申请和管理，这里用了 PermissionX （郭霖大佬），假设你知道（ResonDia