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

这里写自定义目录标题

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

前言

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

结论

先上结论

  1. H5中使用以下方式调用,一定要加上capture,表明希望通过捕获的方式获取照片,也就是拍照。
<input type="file" accept="image/*" capture>
  1. Android中的webview需要重写WebChromeClient类下的onShowFileChooser方法,才能实现拍照、图库的功能。
  2. 通过fileChooserParams.isCaptureEnabled()区分拍照还是图库。
//Android 5.0 及以上 必须重写此方法
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
	// 通过这个方法区分 具体是拍照还是图库
    boolean fromCamera = fileChooserParams.isCaptureEnabled();
}

问题分析

H5端

先从H5查看问题

  • Capturing an Image from the User google的web文档中说明了,直接使用Input标签,H5就能唤起拍照、图库。
  • MDN-web-doc文档中也有说明capture属性的作用
<input type="file" accept="image/*">

Android/Flutter WebView加载H5区分拍照和选择图片_第1张图片
为了表明想直接进入拍照,需要加上capture字段,由于android在5.0+无法准确区分capture后面的内容,所以加不加capture=“user”,在android上都是一样,只要有capture就行。

<input type="file" accept="image/*" capture>

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

Android-WebView端

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

mWebView.setWebChromeClient(new WebChromeClient(){

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

            }

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

            }

            //For Android  >= 4.1
            public void openFileChooser(ValueCallback<Uri> 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<Uri[]> 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()。在

<input capture />

中含有capture属性时,isCaptureEnabled()返回值为true,android官方isCaptureEnabled文档说明 但没有说明这个与原来openFileChooser方法中的capture关联关系,但从官方介绍看推测可以使用isCaptureEnabled来判断是否要直接打开摄像头。
Android/Flutter WebView加载H5区分拍照和选择图片_第3张图片

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

在Inappwebview中存在的问题

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

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

  • 需要修改InAppWebViewChromeClient源码

参考

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

测试html文件

<!DOCTYPE html>
<!-- 测试拍照和选择图片 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flutter InAppWebView</title>
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body class="text-center" style="background-color:#cccccc">
    <div>
        普通输入没有capture字段: <input type="file" name="uploadfile">&nbsp;&nbsp;
    </div>

    <div>
        属性中带有capture:<input type="file" accept="image/*" capture>
    </div>

    <div>
        属性中带有capture="user":<input accept="image/*" capture="user" id="imgFile" name="imgFile"  type="file">&nbsp;&nbsp;
    </div>

    <script src="js/main.js"></script>
</body>
</html>

你可能感兴趣的:(Flutter,Android,android,flutter,webview)