webview适配input标签调用相机或选取相册

背景:

博主的项目是用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;
        }
    }
}
Android Studio 中使用 WebView 调用相机相册,需要使用 Android 系统提供的 WebChromeClient 和 WebViewClient 类。具体步骤如下: 1. 首先在 AndroidManifest.xml 文件中添加以下权限: ```xml <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> ``` 2. 在 Activity 中创建 WebView,并设置 WebChromeClient 和 WebViewClient: ```java WebView webView = findViewById(R.id.webview); webView.setWebChromeClient(new WebChromeClient() { // 处理打开相机相册的请求 @Override public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { // 创建打开相机相册的 Intent Intent intent = fileChooserParams.createIntent(); try { // 启动 Intent startActivityForResult(intent, REQUEST_CODE_FILE_CHOOSER); } catch (ActivityNotFoundException e) { e.printStackTrace(); return false; } return true; } }); webView.setWebViewClient(new WebViewClient() { // 处理网页加载完成事件 @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 在网页中注入 JavaScript 代码,用于调用相机相册 view.loadUrl("javascript: function chooseImage() {window.android.chooseImage();}"); } }); ``` 3. 在 Activity 中重写 onActivityResult 方法,处理选择图片后的结果: ```java @Override protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { if (requestCode == REQUEST_CODE_FILE_CHOOSER) { if (resultCode == RESULT_OK && data != null) { // 获取选择的图片 Uri Uri uri = data.getData(); if (uri != null) { // 把 Uri 返回给网页 ValueCallback<Uri[]> filePathCallback = mFilePathCallback; if (filePathCallback != null) { filePathCallback.onReceiveValue(new Uri[]{uri}); mFilePathCallback = null; } } } else { // 如果选择图片失败,也要返回结果给网页 ValueCallback<Uri[]> filePathCallback = mFilePathCallback; if (filePathCallback != null) { filePathCallback.onReceiveValue(null); mFilePathCallback = null; } } } } ``` 4. 在 JavaScript 中调用 window.android.chooseImage() 方法,用于打开相机相册并选择图片: ```javascript function chooseImage() { // 创建 input 元素,用于触发选择图片的操作 var input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.onchange = function () { // 把选择图片的结果返回给 Android var uri = input.files; if (uri) { window.android.chooseImage(uri); } else { window.android.chooseImage(null); } }; // 触发点击 input 元素的操作,打开相机相册 input.click(); } ``` 以上就是在 Android Studio 中使用 WebView 调用相机相册的基本步骤。如果您还有其他问题,请随时提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值