摄像和选择相片问题">

android原生webview兼容h5的摄像和选择相片问题

h5的在ios中app中能够正常调用显示拍照或者选择相片的选项框。在android自带的浏览器和微信中打开也是没有问题的。但是当在android app嵌套h5页面。发现在webview中,h5无法直接调起android 的摄像头和选择相册功能。
于是查了资料才发现。android中webview不能支持h5的直接调用摄像头和选择相册功能。需要需要setWebChromeClient并重写WebChromeClient下的openFileChooser和onShowFileChooser(5.0以后的)方法。input点击会触发这两个函数。需要在这里用android代码去调用摄像头和相册功能,然后把图片地址处理后回传给h5.
1.先说一下坑吧,第一个就是权限问题,一个是读取存储权限,一个是照相机权限。这两个权限都是属于危险权限,在android6.0以后需要动态申请权限
2.android 7.0以后访问文件需要设置FileProvider
3.要设置webview的setting相关配置
        webView.setVerticalScrollBarEnabled(false);
        webView.setHorizontalScrollBarEnabled(false);

        WebSettings settings = webView.getSettings();
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        //注意这里
        settings.setDomStorageEnabled(true);
        settings.setDefaultTextEncodingName("UTF-8");
        settings.setAllowContentAccess(true); // 是否可访问Content Provider的资源,默认值 true
        settings.setAllowFileAccess(true);    // 是否可访问本地文件,默认值 true
        // 支持缩放
        settings.setSupportZoom(true);
4.在manifest里面记得申请权限
      
      
5.如果要达到跟ios一样,点击h5页面就能弹出选择拍照或者相册,需要自己通过设置intent的相关参数进行处理
        Intent intentPhoto = new Intent(Intent.ACTION_PICK);
        intentPhoto.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
        File fileUri = new File(Environment.getExternalStorageDirectory().getPath() + "/" + SystemClock.currentThreadTimeMillis() + ".jpg");
        imageUri = Uri.fromFile(fileUri);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            imageUri = FileProvider.getUriForFile(this, getPackageName() + ".fileprovider", fileUri);//通过FileProvider创建一个content类型的Uri
        }
        //调用系统相机
        Intent intentCamera = new Intent();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            intentCamera.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); //添加这一句表示对目标应用临时授权该Uri所代表的文件
        }
        intentCamera.setAction(MediaStore.ACTION_IMAGE_CAPTURE);
        //将拍照结果保存至photo_file的Uri中,不保留在相册中
        intentCamera.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
        Intent chooser = new Intent(Intent.ACTION_CHOOSER);
        chooser.putExtra(Intent.EXTRA_TITLE, "Photo Chooser");
        chooser.putExtra(Intent.EXTRA_INTENT, intentPhoto);
        chooser.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Intent[]{intentCamera});
        startActivityForResult(chooser, PHOTO_REQUEST);

全部关键代码如下:


import com.tbruyelle.rxpermissions2.RxPermissions;

import java.io.File;

import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.FileProvider;
import io.reactivex.functions.Consumer;

public class WebActivity extends AppCompatActivity {
    private final static String TAG = "test";
    private WebView webView;
    private ValueCallback mUploadMessage;
    private ValueCallback mUploadCallbackAboveL;
    private final static int PHOTO_REQUEST = 100;
    private final static int VIDEO_REQUEST = 110;
    private final static String url = "http://wxtest.uaryd.com/ttf/v1/ocr/openOcrCcint?token=53aa357cabbb40a98a1bec9cef5added";
    private LinearLayout parentLayout;
    private Uri imageUri;
    private boolean isVideo = false;
      private String acceptType;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        initView();
        initData();
    }
    protected void initView() {

        parentLayout = (LinearLayout) this
                .findViewById(R.id.parentLayout);

        webView = new WebView(this);
        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        webView.setLayoutParams(lp);
        parentLayout.addView(webView);
        webView.setVerticalScrollBarEnabled(false);
        webView.setHorizontalScrollBarEnabled(false);

        WebSettings settings = webView.getSettings();
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        //注意这里
        settings.setDomStorageEnabled(true);
        settings.setDefaultTextEncodingName("UTF-8");
        settings.setAllowContentAccess(true); // 是否可访问Content Provider的资源,默认值 true
        settings.setAllowFileAccess(true);    // 是否可访问本地文件,默认值 true
      settings.setAllowFileAccessFromFileURLs(false);     // 是否允许通过file url加载的Javascript读取本地文件,默认值 false
      settings.setAllowUniversalAccessFromFileURLs(false); // 是否允许通过file url加载的Javascript读取全部资源(包括文件,http,https),默认值 false
        //开启JavaScript支持
        settings.setJavaScriptEnabled(true);
        // 支持缩放
        settings.setSupportZoom(true);
        //注意这里  辅助WebView设置处理关于页面跳转,页面请求等操作
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //如果有视频或者别的url 可以在此处进行判断处理
                if (!TextUtils.isEmpty(url)) {
                    isVideo = url.contains("vedio");
                }
                view.loadUrl(url);
                return true;
            }
        });
        //注意这里 辅助WebView处理图片上传操作
        webView.setWebChromeClient(new MyChromeWebClient());
    }
    protected void initData() {

        webView.loadUrl(url);

    }

    @Override
    protected void onResume() {


        super.onResume();
    }

    @Override
    protected void onPause() {

        super.onPause();
    }


    @Override
    protected void onDestroy() {
        if (parentLayout!= null && webView != null){
            parentLayout.removeView(webView);
            webView.stopLoading();
            webView.getSettings().setJavaScriptEnabled(false);
            webView.clearHistory();
            webView.clearView();
            webView.removeAllViews();
            try {
                webView.destroy();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        super.onDestroy();
    }

    /**
     * 注意申请读取相机和读取内存的权限
     */
    private void startGetPhoto() {

        new RxPermissions(this).request(Manifest.permission.READ_EXTERNAL_STORAGE)
                .subscribe(new Consumer() {
                    @Override
                    public void accept(Boolean aBoolean) {
                        if (aBoolean) {
                            new RxPermissions(WebActivity.this).request(Manifest.permission.CAMERA)
                                    .subscribe(new Consumer() {
                                        @Override
                                        public void accept(Boolean aBoolean) {
                                            if (aBoolean) {
                                                //启动拍照或者选择相册图片文件
                                              showPhotoChooser();
                                            } else {
                                                Toast.makeText(WebActivity.this, "摄像机权限被拒绝,请在设置里面开启相应权限,若无相应权限部分功能将无法使用", Toast.LENGTH_SHORT).show();
                                                Intent intent = new Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                                                Uri uri = Uri.fromParts("package", getPackageName(), null);
                                                intent.setData(uri);
                                                startActivityForResult(intent, 100);
                                            }
                                        }
                                    });
                        } else {
                            Toast.makeText(WebActivity.this, "读取权限被拒绝,请在设置里面开启相应权限,若无相应权限部分功能将无法使用", Toast.LENGTH_SHORT).show();
                            Intent intent = new Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                            Uri uri = Uri.fromParts("package", getPackageName(), null);
                            intent.setData(uri);
                            startActivityForResult(intent, 100);
                        }
                    }
                });
    }

    //自定义 WebChromeClient 辅助WebView处理图片上传操作【 文件上传标签】
    public class MyChromeWebClient extends WebChromeClient {
        // For Android 3.0-
        public void openFileChooser(ValueCallback uploadMsg) {
            mUploadMessage = uploadMsg;
            if (isVideo){
                recordVideo();
            }else {
                startGetPhoto();
            }
        }

        // For Android 3.0+
        public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
            mUploadMessage = uploadMsg;
            acceptType = acceptType;
            if (isVideo){
                recordVideo();
            }else {
                startGetPhoto();
            }
        }

        //For Android 4.1
        public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) {
            mUploadMessage = uploadMsg;
            acceptType = acceptType;
            if (isVideo){
                recordVideo();
            }else {
                startGetPhoto();
            }
        }

        // For Android 5.0+
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
            mUploadCallbackAboveL = filePathCallback;
            acceptType = fileChooserParams.getAcceptTypes()[0];
            if (isVideo){
                recordVideo();
            }else {
                startGetPhoto();
            }
            return true;
        }
    }
    /**
     * 打开选择文件/相机
     */
    private void showPhotoChooser() {

        Intent intentPhoto = new Intent(Intent.ACTION_PICK);
        intentPhoto.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
//        Intent intentPhoto = new Intent(Intent.ACTION_GET_CONTENT);
//        intentPhoto.addCategory(Intent.CATEGORY_OPENABLE);
//        intentPhoto.setType("*/*");
        File fileUri = new File(Environment.getExternalStorageDirectory().getPath() + "/" + SystemClock.currentThreadTimeMillis() + ".jpg");
        imageUri = Uri.fromFile(fileUri);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            imageUri = FileProvider.getUriForFile(this, getPackageName() + ".fileprovider", fileUri);//通过FileProvider创建一个content类型的Uri
        }
        //调用系统相机
        Intent intentCamera = new Intent();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            intentCamera.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); //添加这一句表示对目标应用临时授权该Uri所代表的文件
        }
        intentCamera.setAction(MediaStore.ACTION_IMAGE_CAPTURE);
        //将拍照结果保存至photo_file的Uri中,不保留在相册中
        intentCamera.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
        Intent chooser = new Intent(Intent.ACTION_CHOOSER);
        chooser.putExtra(Intent.EXTRA_TITLE, "Photo Chooser");
        chooser.putExtra(Intent.EXTRA_INTENT, intentPhoto);
        chooser.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Intent[]{intentCamera});
        startActivityForResult(chooser, PHOTO_REQUEST);
    }
    /**
     * 录像
     */
    private void recordVideo() {
        Intent intent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
        intent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, 1);
        //限制时长
        intent.putExtra(MediaStore.EXTRA_DURATION_LIMIT, 10);
        //开启摄像机
        startActivityForResult(intent, VIDEO_REQUEST);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //如果按下的是回退键且历史记录里确实还有页面
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }


    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == PHOTO_REQUEST) {

            if (null == mUploadMessage && null == mUploadCallbackAboveL) {
                return;
            }
            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (mUploadCallbackAboveL != null) {
                onActivityResultAboveL(requestCode, resultCode, data);
            } else if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(result);
                mUploadMessage = null;
            }
        }
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
        if (requestCode != PHOTO_REQUEST || mUploadCallbackAboveL == null) {
            return;
        }
        Uri[] results = null;
        if (resultCode == Activity.RESULT_OK) {
            if (data == null) {
                results = new Uri[]{imageUri};
            } else {
                String dataString = data.getDataString();
                ClipData clipData = data.getClipData();
                if (clipData != null) {
                    results = new Uri[clipData.getItemCount()];
                    for (int i = 0; i < clipData.getItemCount(); i++) {
                        ClipData.Item item = clipData.getItemAt(i);
                        results[i] = item.getUri();
                    }
                }
                if (dataString != null)
                    results = new Uri[]{Uri.parse(dataString)};
            }
        }else if (requestCode == VIDEO_REQUEST) {
            if (null == mUploadMessage && null == mUploadCallbackAboveL) return;

            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (mUploadCallbackAboveL != null) {
                if (resultCode == RESULT_OK) {
                    mUploadCallbackAboveL.onReceiveValue(new Uri[]{result});
                    mUploadCallbackAboveL = null;
                } else {
                    mUploadCallbackAboveL.onReceiveValue(new Uri[]{});
                    mUploadCallbackAboveL = null;
                }

            } else if (mUploadMessage != null) {
                if (resultCode == RESULT_OK) {
                    mUploadMessage.onReceiveValue(result);
                    mUploadMessage = null;
                } else {
                    mUploadMessage.onReceiveValue(Uri.EMPTY);
                    mUploadMessage = null;
                }

            }
        }
        mUploadCallbackAboveL.onReceiveValue(results);
        mUploadCallbackAboveL = null;
    }

}

Manifest文件




    
    
    
    

    
        
            
                

                
            
        
        
        
        
            
        
    


Gradle 引入rxjava和 rxpermissions方便权限判断

    //rxjava
    implementation 'io.reactivex.rxjava2:rxjava:2.1.14'
    implementation 'com.tbruyelle.rxpermissions2:rxpermissions:0.9.4@aar'

你可能感兴趣的:(android原生webview兼容h5的摄像和选择相片问题)