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

H5編寫

html文件里只需要<input>標(biāo)簽即可實(shí)現(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>相冊(cè)</span><input type="file" accept="image/*" id="picture" placeholder="相冊(cè)"
                          onchange="changePicture()"/>
</div>

其中accept表示文件類型倒得，capture表示將要進(jìn)行的動(dòng)作。

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拍照和攝像以及選取相冊(cè)驻粟，需要html文件里使用input標(biāo)簽根悼，Android原生監(jiān)聽webview回調(diào)凶异，做出相應(yīng)處理。效果如下所示：

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

Demo地址

Demo已上傳Github挤巡，地址為 H5AndroidDemo剩彬。