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'