Android/Flutter WebView加载H5区分拍照和选择图片

• 前言
• 结论
• 问题分析
• • H5端
  • Android-WebView端
• 在Inappwebview中存在的问题
• 参考
• 测试html文件

在使用flutter_inappwebview时，H5中需要进行交互拍照、选择图片。但in_appwebview中实现的方式目前无法区分拍照还是选择图片。现在分析原因，看解决办法。

先上结论

1. H5中使用以下方式调用，一定要加上capture，表明希望通过捕获的方式获取照片，也就是拍照。

2. Android中的webview需要重写WebChromeClient类下的onShowFileChooser方法，才能实现拍照、图库的功能。
3. 通过fileChooserParams.isCaptureEnabled()区分拍照还是图库。

//Android 5.0 及以上 必须重写此方法
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) {
	// 通过这个方法区分 具体是拍照还是图库
    boolean fromCamera = fileChooserParams.isCaptureEnabled();
}

先从H5查看问题

• Capturing an Image from the User google的web文档中说明了，直接使用Input标签，H5就能唤起拍照、图库。
• MDN-web-doc文档中也有说明capture属性的作用

为了表明想直接进入拍照，需要加上capture字段，由于android在5.0+无法准确区分capture后面的内容，所以加不加capture=“user”，在android上都是一样，只要有capture就行。

由于android系统自带的webview默认是不支持拍照、图库功能，需要自己加入代码支持。重写onShowFileChooser方法，网上方法很多。

mWebView.setWebChromeClient(new WebChromeClient(){

            // For Android < 3.0
            public void openFileChooser(ValueCallback valueCallback) {

            }

            // For Android  >= 3.0
            public void openFileChooser(ValueCallback valueCallback, String acceptType) {

            }

            //For Android  >= 4.1
            public void openFileChooser(ValueCallback valueCallback, String acceptType, String capture) {
                // 这里的capture是个字符串，可以把h5中input中的capture="user"、capture="environment"属性值带过去，
                // 但由于openFileChooser已经废弃，所以这个方法不用了
            }

            //Android 5.0 及以上 必须重写此方法，支持拍照和图库
            @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) {
                // 在这里实现拍照、图库。
                boolean fromCamera = fileChooserParams.isCaptureEnabled();
                String[] acceptTypes = fileChooserParams.getAcceptTypes();

                Log.i("zzb", "fromCamera = " + fromCamera);
                return super.onShowFileChooser(webView, filePathCallback, fileChooserParams);
            }
        });

旧的api是通过openFileChooser中的，这里的capture是个字符串，可以把h5中input中的capture=“user”、capture="environment"属性值带过去，但由于openFileChooser已经废弃。所以使用onShowFileChooser，但onShowFileChooser又没有capture字段，查看源码，发现有个类似方法，fileChooserParams.isCaptureEnabled()。在

中含有capture属性时，isCaptureEnabled()返回值为true，android官方isCaptureEnabled文档说明 但没有说明这个与原来openFileChooser方法中的capture关联关系，但从官方介绍看推测可以使用isCaptureEnabled来判断是否要直接打开摄像头。

• 在这个回答中，也是使用了isCaptureEnabled来判断是否是摄像头

1. 无法直接进入拍照。
2. 没有相机权限的时候并没有通知用户。
3. 没有相机权限的时候，会直接进入到图库。

通过以上的结论，可以自己进行修改，如果有需要区分的功能，可以通过以上的方式对源码进行修改。

• 需要修改InAppWebViewChromeClient源码

• h5前端调用android拍照功能,H5中，嵌入式webview中，调用摄像头拍照功能的实现汇总

    
    
    
    
    
    
    
    


    

        普通输入没有capture字段:   
    

    

        属性中带有capture:
    

    

        属性中带有capture="user":