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

最新推荐文章于 2023-07-20 17:32:46 发布
最新推荐文章于 2023-07-20 17:32:46 发布
阅读量4.8k 收藏 6
点赞数 3
分类专栏： Flutter Android 文章标签： android flutter webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZB_Bin/article/details/120885958
版权

这里写自定义目录标题

前言

在使用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>
Super-Bin
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【Flutter】Flutter 如何使用 WebView
Code Metaverse
06-15 6023
在 Flutter 中使用 WebView 的基本方法，以及如何使用 `webview_flutter` 库。
Flutter InAppWebView Unknown feature SUPPRESS_ERROR_PAGE
最新发布
菜鸟博客
06-07 359
SUPPRESS_ERROR_PAGE
【相机】(2)——WebView中打开相机、文件选择器的问题和解决方法
衷水木先生的博客
09-15 1万+
上一篇[Intent调相机的2种方式以及那些你知道的和不知道的坑]中完成了对 Intent 调起系统相机、结果处理以及一些问题的应对。其实上篇文章还是因为今天的主题 **WebView中调用系统相机** 而起，因为涉及到调用相机本身的一些问题之前不是很明确，所以专门搞了一下，记录下来，所以如果调
webview_flutter官方插件选择文件、图片的问题
SuperBin的博客
09-30 3070
前言 webview_flutter官方的webview插件，很多功能缺失，现在H5有上传图片的需求，但官方的插件并不支持。 点击H5中的选择文件，没有任何响应，问题issues，官方库的issues上已经有提出相关问题。 原因分析 H5要想调用原生选择图片功能，需要webview重写WebChromeClient类中的onShowFileChooser方法。 解决方案 使用其他完善的webview替代 flutter_inappwebview 这个库目前最完善 flutter_webview_plug
android webview 弹出图片选择器上传文件
guquan12315的专栏
08-30 999
import android.annotation.TargetApi; import android.app.Activity; import android.content.ActivityNotFoundException; import android.content.ClipData; import android.content.Intent; import android.
Android WebView 选择照片【无改动处理！】
汪随安的博客
07-20 1167
方法来处理文件选择请求。当用户点击选择照片时，会触发该方法，我们会创建一个文件选择的Intent，然后通过。在使用此方法时，你需要确保在。是WebChromeClient的一个回调方法，它允许你在WebView中处理文件选择请求。同时，为了确保用户隐私和安全，你需要根据你的具体需求对文件选择的逻辑进行适当的处理和验证。当用户完成选择后，选择的文件路径会通过。文件中申明相应的文件读写权限和相机权限。方法来实现在WebView中选择照片。方法返回，并传递给WebView。在Android中，你可以使用。
webview_flutter在H5唤起相机和相册及安卓分区存储问题
zoeou的博客
05-26 1314
随着Android设备上存储技术的发展，如引入加密文件系统和云备份等功能，分区存储为这些高级功能提供了更好的支持，确保未来无论底层存储如何变化，应用都能够以标准化的方式进行交互。在之前的Android版本中，由于权限体系的复杂性，应用可能通过各种手段绕过权限控制来访问用户的数据。分区存储限制了应用对用户个人文件的无节制访问，尤其是外部存储上的公共目录。总之，Android 10 的分区存储设计改进了存储权限管理和数据隔离，提升了用户体验的同时也增强了安全性。参照了其它人的文章,特地在这里记录下.
android短视频开发，调用相机、相册，压缩图片后上传
云豹网络科技
12-16 413
android短视频开发，调用相机、相册，压缩图片后上传实现的相关代码 重写webChromeClient的onShowFileChooser方法 @Override public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { mUploadCallbackAb
解决WebView通过URL加载H5界面出现空白的问题
08-19
在使用WebView加载H5界面时，需要在配置文件中设置网络权限，否则无法加载网页内容。可以在AndroidManifest.xml文件中添加以下代码： `<uses-permission android:name="android.permission.INTERNET" />` 二、基本...
Flutter使用JsBridge方式处理Webview与H5通信的方法
08-19
在移动开发中，加载 H5 页面需要使用 WebView 组件，同时为了和 H5 页面进行数据交换，有时候还需要借助 JsBridge 来实现客户端与 H5 之间的通讯。 一、JsBridge 介绍 JsBridge 是一种 JavaScript 桥接技术，用于...
详解Flutter WebView与JS互相调用简易指南
01-04
WebView与JS互相调用是一个刚需，但是貌似现在大家写的文章讲的都不是很清楚，我这个简易指南简单粗暴地分为两部分：JS调用Flutter和Flutter调用JS，拒绝花里胡哨，保证一看就懂，一学就会。 开始之前先简单了解...
android 之 webView 显示h5 执行选择图片或者拍照功能
09-05
开发工具是 android studio SDK版本是 4.3 实现过程基本是这样 h5中调用手机选择文件图片的代码是： 用安卓的 webView 控件来显示h5网页 然后给webView 设置WebChromeClient WebChromeClient 主要处理解析，渲染网页等浏览器做的事情 设置完毕后 重写WebChromeClient 的openFileChooser方法即可实现h5调用手机摄像头了。 但是这个方法的使用却不简单，这个方法是要调用webview的setWebChromeClient方法，然后重写一个WebChromeClient类。来到这一步，相信有点开发经验的同行都不难解决。问题的关键就在于，当你重写WebChromeClient这个类的时候会发现，根本就没有openFileChooser这个方法，那要怎么重写呢？是不是意味着这个方法其实行不通？于是再次翻查资料，发现原来这个方法居然是隐藏方法，并不不存在显性的继承重写关系。 最后，我发现要使用这个方法，还得自己继承WebChromeClient这个类把openFileChooser(ValueCallback uploadFile)这个方法给写出来，代码如下：
Android WebView H5调用拍照
07-31
Android中Webview H5调用拍照功能，有需要的请下载。。。
flutter webview 一直黑屏以及js调用失败.pdf
12-16
- **初始化问题**：当Webview加载页面时，如果初始化过程出现问题，可能会导致屏幕显示为黑色。确保在使用`WebView` widget时正确设置了URL和必要的配置参数，例如`initialUrl`。 - **渲染问题**：检查是否启用了...
基于Android的知乎图片选择Flutter插件库设计源码
04-11
本源码提供了一个基于Android的知乎图片选择Flutter插件库设计。项目包含111个文件，其中包括26个PNG图片、14个Java源文件、11个XML文件、10个Dart文件、6个Gitignore文件、6个Gradle文件、4个Markdown文档、4个...
webview开发中使用onShowFileChooser实现web页打开照相机或者图片浏览
热门推荐
easyboot的专栏
01-11 1万+
web页面中input type="file"的事件监听在webview中使用onShowFileChooser实现，代码如下： import android.app.Activity; import android
关于Android WebView调用onShowFileChooser 无法重复调用的问题
xiangzhihong8的专栏
06-28 2171
在WebVIew开发中，经常会遇到调⽤⼿机系统相册的场景，不过由于Android版本多的原因，很多系统无法正常打开手机的系统相册。通常，在Web页⾯上点击选择⽂件的控件时，前端一般会使用的写法，此时系统会自动调用WebChromeClient 的openFileChooser()方法（5.0及以上系统会调用onShowFileChooser()）来打开打开系统相册。参考代码如下： 然后，在onActivityResult()中将选择的图⽚内容通过ValueCallback的onReceiveValue()方
Android WebView相册选取图片及集成(X5内核,crosswalk)
Te_small的博客
12-22 2207
webview加载商城连接地址，系统webview的加载商城里的一个分类页面卡顿，其余页面正常。 自己写webview显然不现实，继承系统的写出来效果还是如此，然后就集成了腾讯X5的内核。 TBS(腾讯浏览服务)的优势 速度快：相比系统webview的网页打开速度有30+%的提升； 省流量：使用云端优化技术使流量节省20+%； 更安全：安全问题可以在24小时内修复； 更稳定：...
flutter项目中使用
zoeou的博客
06-18 1020
AppBar(backgroundColor: ConstValue().barSearchBG, //定义背景颜色automaticallyImplyLeading: false, //是否显示默认的后退按钮elevation: 0, //阴影,值越大越清楚Key key,@required VoidCallback onPressed, //点击按钮的回调函数ValueChanged onHighlightChanged, //高亮变化的回调。
flutter webview 代码实现播放H5视频
05-25
在 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、付费专栏及课程。

余额充值