【转载】webview适配input标签调用相机或选取相册

转载自CSDN https://blog.csdn.net/ycqfdqy/article/details/142612478 供学习使用,转载请联系原作者

背景:

博主的项目是用webview嵌套网页的形式实现的,但是在开发过程中遇到了这样一个问题,前端页面使用vant-uploadder(同input type='file’标签)时无法调用摄像头以及相册,但是在chrome等手机浏览器中又是可打开的。

原因分析

根据前人描述,是因为 Android 源码中将这部分屏蔽了,需要在 webView.setWebChromeClient(new WebChromeClient()) 中重写 WebChromeClient 的 openFileChooser() 等方法。

解决方案:
不多说直接贴代码:
WebChromeClient 中重写的方法有很多

    /**
     * 8(Android 2.2) <= API <= 10(Android 2.3)回调此方法
     */
    public void openFileChooser(ValueCallback<Uri> uploadMsg) {
    }
      /**
     * 11(Android 3.0) <= API <= 15(Android 4.0.3)回调此方法
     */
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
    }

    /**
     * 16(Android 4.1.2) <= API <= 20(Android 4.4W.2)回调此方法
     */
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
    }

    /**
     * API >= 21(Android 5.0.1)回调此方法
     */
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
    }       

现在哪还有安卓5.0的设备果断使用最后一个依旧直接贴代码

    public ValueCallback<Uri[]> uploadMessageAboveL;
    private Uri imageUri;
    private final WebChromeClient mWebChromeClient = new WebChromeClient() {
     @Override
     public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
         uploadMessageAboveL = filePathCallback;
         //拍照图片存储位置及名称
         //Android 10(API级别29)开始,直接通过文件路径访问存储变得更加受限,推荐使用MediaStore或FileProvider来创建和管理文件URI。这里我通过MediaStore来实现
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
             ContentValues values = new ContentValues();
             values.put(MediaStore.Images.Media.DISPLAY_NAME, "IMG_" + System.currentTimeMillis() + ".jpg");
             values.put(MediaStore.Images.Media.MIME_TYPE, "image/jpeg");
             values.put(MediaStore.Images.Media.RELATIVE_PATH, Environment.DIRECTORY_PICTURES + File.separator + "YourAppName");
             imageUri = getContentResolver().insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, values);
         } else {
             String filePath = Environment.getExternalStorageDirectory() + File.separator
                     + Environment.DIRECTORY_PICTURES + File.separator;
             String fileName = "IMG_" + DateFormat.format("yyyyMMdd_hhmmss", Calendar.getInstance(Locale.CHINA)) + ".jpg";
             imageUri = Uri.fromFile(new File(filePath + fileName));
         }

         //拍照intent
         Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
         captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);

         //图片选择intent
         Intent Photo = new Intent(Intent.ACTION_PICK,
                 android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        //这里加两个intent回在底部弹窗可以让用户选择相册上传还是拍照上传
         Intent chooserIntent = Intent.createChooser(Photo, "请选择");
         chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent});
         //StartActivityForResult被废弃后的用法
         filePickerLauncher.launch(chooserIntent);
         return true;
     }
 };
 //这个用法每一个launch都要新建一个 不用requestcode来区分了
private final ActivityResultLauncher<Intent> filePickerLauncher = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(), result -> {
   if (result.getResultCode() == Activity.RESULT_OK) {
       // 更新系统图库 不知道有啥用 前人这么写的
       Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
       intent.setData(imageUri);
       sendBroadcast(intent);

       Intent data = result.getData();
       if (data != null) {
           Uri[] uris;
           Uri uriData = data.getData();
           if (uriData != null) {//如果是用相册上传的那么这里是有值的直接返回
               uris = new Uri[]{uriData};
               uploadMessageAboveL.onReceiveValue(uris);
           } else {
               uploadMessageAboveL.onReceiveValue(new Uri[]{imageUri});//如果是用拍照上传的那么这里是有值的直接将上面的imageUri直接返回
           }
       }
   } else {
       uploadMessageAboveL.onReceiveValue(null);
   }
   uploadMessageAboveL = null;
});

到这里基本大功告成了

坑:
注意:前面步骤完成后你会发现点击相册没反应,这是没有相机权限导致的,这里可以手动给权限也可以动态申请权限:存储权限及相机权限
首先AndroidManifest先进行声明

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
        android:maxSdkVersion="32" />

动态申请:更坑的一点是安卓13还是14以上的存储权限进行了细分直接上代码

private void permissionApplication() {
    List<String> PERMISSIONS_STORAGE = new ArrayList<>();
    //相机权限
    PERMISSIONS_STORAGE.add(Manifest.permission.CAMERA);
    //存储权限
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
        PERMISSIONS_STORAGE.add(Manifest.permission.READ_MEDIA_IMAGES);
        PERMISSIONS_STORAGE.add(Manifest.permission.READ_MEDIA_VIDEO);
        PERMISSIONS_STORAGE.add(Manifest.permission.READ_MEDIA_AUDIO);
    } else {
        PERMISSIONS_STORAGE.add(Manifest.permission.READ_EXTERNAL_STORAGE);
    }
    for (String permission : PERMISSIONS_STORAGE) {
        if (ActivityCompat.checkSelfPermission(this, permission) != PackageManager.PERMISSION_GRANTED) {
        //PERMISSION_CODE状态码随便设置如果要处理界面那必须和result方法中的requestCode一致相当于key
            requestPermissions(new String[]{permission}, PERMISSION_CODE);
        }
    }
}
    //如果你想在权限申请后做些什么可以在下面方法中加
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    for (int i : grantResults) {
        if (grantResults[i] != PackageManager.PERMISSION_GRANTED) {
            return;
        }
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容