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

前言

在使用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查看问题

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

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

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

在这里插入图片描述

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来判断是否要直接打开摄像头。
在这里插入图片描述

在Inappwebview中存在的问题

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

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

参考

测试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>
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flutter 中,可以使用 `webview_flutter` 插件来实现加载 H5 视频的功能。下面是一个简单的示例代码: ```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class VideoPlayer extends StatefulWidget { final String url; VideoPlayer({required this.url}); @override _VideoPlayerState createState() => _VideoPlayerState(); } class _VideoPlayerState extends State<VideoPlayer> { late WebViewController _controller; @override Widget build(BuildContext context) { return Scaffold( body: WebView( initialUrl: widget.url, javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) { _controller = webViewController; }, onPageFinished: (String url) { _controller.evaluateJavascript( 'document.getElementsByTagName("video")[0].play();'); }, ), ); } } ``` 这里我们创建了一个名为 `VideoPlayer` 的组件,并传入一个 `url` 参数来指定要播放的视频地址。在 `build` 方法中,我们返回一个 `WebView` 组件,并在其中设置了以下属性: - `initialUrl`:指定要加载的初始网页地址,即 H5 视频的地址。 - `javascriptMode`:指定 WebView 中的 JavaScript 模式为不受限制的,以便我们可以执行自定义 JavaScript 代码。 - `onWebViewCreated`:当 WebView 创建完成后,我们将获取到的 `WebViewController` 对象保存在 `_controller` 属性中以便后续使用。 - `onPageFinished`:当 WebView 加载完成后,我们执行 JavaScript 代码来播放 H5 视频。在这里,我们通过 `document.getElementsByTagName("video")[0]` 获取到页面中的第一个视频元素,并调用其 `play()` 方法来开始播放视频。 这样,我们就可以在 Flutter 应用中使用 WebView 组件来播放 H5 视频了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值