之前一直認為H5調(diào)用Android，H5不需要Android配合能直接實現(xiàn)功能。前段時間，自己做這個功能，才發(fā)現(xiàn)不是這么回事。

H5編寫

html文件里只需要<input>標簽即可實現(xiàn)代碼，代碼如下所示：

<div>
    <span>拍照</span><input type="file" capture="camera" accept="image/*" id="photo" placeholder="拍照"
                          onchange="changePhoto()"/>
</div>
<div>
    <span>攝像</span><input type="file" capture="camcorder" accept="video/*" id="video"
                          placeholder="攝像" onchange="changeVideo()"/>
</div>
<div>
    <span>相冊</span><input type="file" accept="image/*" id="picture" placeholder="相冊"
                          onchange="changePicture()"/>
</div>

其中accept表示文件類型，capture表示將要進行的動作。

Android編寫

Android需要監(jiān)聽webview，代碼如下所示：

mWebView.setWebChromeClient(new WebChromeClient() {

            // For Android >= 5.0
            @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                LogUtil.d(TAG, "onShowFileChooser");
                mUploadCallbackAboveL = filePathCallback;
                if (fileChooserParams.isCaptureEnabled()) {
                    String[] acceptTypes = fileChooserParams.getAcceptTypes();
                    LogUtil.d(TAG, "acceptTypes=" + acceptTypes);
                    for (int i = 0; i < acceptTypes.length; i++) {
                        if (acceptTypes[i].contains("video")) {
                            mVideoFlag = true;
                            break;
                        }
                    }
                    if (mVideoFlag) {
                        recordVideo();
                        mVideoFlag = false;
                    } else {
                        takePhoto();
                    }
                } else {
                    pickPhoto();
                }
                return true;
            }

            // For Android < 3.0
            public void openFileChooser(ValueCallback<Uri> uploadMsg) {
                LogUtil.d(TAG, "openFileChooser1");
                mUploadMessage = uploadMsg;
                pickPhoto();
            }

            // For Android  >= 3.0
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
                LogUtil.d(TAG, "openFileChooser2");
                mUploadMessage = uploadMsg;
                mVideoFlag = acceptType.contains("video");
                if (mVideoFlag) {
                    recordVideo();
                    mVideoFlag = false;
                } else {
                    pickPhoto();
                }
            }

            //For Android  >= 4.1
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
                LogUtil.d(TAG, "openFileChooser3");
                mUploadMessage = uploadMsg;
                if (!TextUtils.isEmpty(capture)) {
                    mVideoFlag = acceptType.contains("video");
                    if (mVideoFlag) {
                        recordVideo();
                        mVideoFlag = false;
                    } else {
                        takePhoto();
                    }
                } else {
                    pickPhoto();
                }
            }
        });

需要監(jiān)聽以上方法，兼容多版本Android。

總結(jié)

H5調(diào)用Android拍照和攝像以及選取相冊，需要html文件里使用input標簽，Android原生監(jiān)聽webview回調(diào)，做出相應(yīng)處理。效果如下所示：

H5調(diào)用Android拍照和攝像以及選取相冊效果圖.jpg

Demo地址

Demo已上傳Github，地址為 H5AndroidDemo。