Android关于第三方h5在webview调用摄像头及相机的处理

参考资料：
深坑之Webview,解决H5调用android相机拍照和录像
除了没有适配6.0以上的动态申请以及拦截h5的方法不同，其余均参考以上文章

因为app和银行合作，在banner页投放了银行调用摄像进行人脸识别的功能，发现点击拉起摄像的功能无效，但是在内置浏览器却可以，由此怀疑需要对webview进行相关适配处理。后来查阅多方文档，发现上述文档比较详尽，同时总结下我自己的理解：

在h5页面调用原生的相机，自己的产品开发过程平时一般都是和前端沟通好，会在本地进行url的拦截，根据url判断。但是如果前端页面链接不含有特定字段同时都是js调用怎么办呢？所以如果业务需要，是要在webview里进行适配操作，就是复写下面提到的几个方法，说白了就是前端调用完相机，我们要复写下面的方法，并将原生相机的回调，图片的回调通过ValueCallback回调给webview，然后前端才可以通过方法接收到回调的参数进行校验。这样我们要做的事情就很简单了。根据版本不同复写方法，并且传入获取图片以后的回调即可。

这种问题解决办法在于复写openFileChoosers和onShowFileChoosers的方法：
可以先看下介绍
[Android开发深入理解WebChromeClient之onShowFileChooser或openFileChooser使用说明]
(http://teachcourse.cn/2224.html)
在所有发布的SDK版本中，openFileChooser是一个隐藏的方法，使用onShowFileChooser代替，但是最好同时复写WebChromeClient类里的showFileChooser和openFileChooser方法，Android 4.4.X以上的系统回调onShowFileChooser方法，低于或等于Android 4.4.X的系统回调openFileChooser方法，只重写onShowFileChooser或openFileChooser造成在有的系统可以正常回调，在有的系统点击没有反应。
1、前端调用摄像头的代码

前端调用摄像头拍照
<input type="file" accept="image/*" capture="camera">
前端调用摄像头录像
<input type="file" accept="video/*" capture="camera">

一般第三方的h5调用原生的摄像都是这两个方法，我们可以通过拦截accept字段来进行判断（openFileChooser的复写方法里提供了），当然，如果链接里有其他字段，也可以通过onShouldOverrideUrlLoading进行链接的字段拦截。
2、复写方法

 @Overrideprotected void openFileChoosers(ValueCallback<Uri> valueCallback) {LogUtil.e("czz", "运行方法 onShowFileChooser");mUploadMessage = valueCallback;take();}@Overrideprotected void openFileChoosers(ValueCallback<Uri> valueCallback, String acceptType) {LogUtil.e("czz", "运行方法 onShowFileChooser2");mUploadMessage = valueCallback;mAcceptType = acceptType;take();}@Overrideprotected void openFileChoosers(ValueCallback<Uri> valueCallback, String acceptType, String capture) {LogUtil.e("czz", "运行方法 onShowFileChooser3");mUploadMessage = valueCallback;mAcceptType = acceptType;take();}@Overrideprotected void onShowFileChoosers(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {LogUtil.e("czz", "运行方法 onShowFileChooser4");if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {if (fileChooserParams.getAcceptTypes().length > 0) {mAcceptType = fileChooserParams.getAcceptTypes()[0];}}mUploadCallbackAboveL = filePathCallback;take();}

    /*** 拍照*/private void take() {/*打开摄像头拍照通水进行动态权限申请，权限判定是自己封装的方法，仅供参考。*/RxPermissions rxPermissions = new RxPermissions(this);rxPermissions.request(Manifest.permission.CAMERA,Manifest.permission.WRITE_EXTERNAL_STORAGE,Manifest.permission.READ_EXTERNAL_STORAGE).subscribe(aBoolean -> {if (aBoolean) {try {if ("image/*".equals(mAcceptType)) {takePhoto();}/*打开摄像头录像*/if ("video/*".equals(mAcceptType)) {recordVideo();}} catch (Exception e) {ApToast.showLong(mContext, mContext.getString(R.string.run_camera_error));}}});}/*** 摄像*/private void takePhoto() {File fileUri = new File(Environment.getExternalStorageDirectory().getPath() + "/" + SystemClock.currentThreadTimeMillis() + ".jpg");imageUri = Uri.fromFile(fileUri);if (Build.VERSION.SDK_INT >= 24) {imageUri = FileProvider.getUriForFile(this, getPackageName() + ".fileprovider", fileUri);//通过FileProvider创建一个content类型的Uri}takePicture(this, imageUri, 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);}public static void takePicture(Activity activity, Uri imageUri, int requestCode) {//调用系统相机Intent intentCamera = new Intent();if (Build.VERSION.SDK_INT >= 24) {intentCamera.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); //添加这一句表示对目标应用临时授权该Uri所代表的文件}intentCamera.setAction(MediaStore.ACTION_IMAGE_CAPTURE);//将拍照结果保存至photo_file的Uri中，不保留在相册中intentCamera.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);if (activity != null) {activity.startActivityForResult(intentCamera, requestCode);}}

回调处理

@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {super.onActivityResult(requestCode, resultCode, data);LogUtil.e("requestCode = " + requestCode + "\n" + "resultCode = " + resultCode);if (requestCode == PHOTO_REQUEST) {LogUtil.e("PHOTO_REQUEST1");if (null == mUploadMessage && null == mUploadCallbackAboveL) return;Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();if (mUploadCallbackAboveL != null) {LogUtil.e("PHOTO_REQUEST2");onActivityResultAboveL(requestCode, resultCode, data);} else if (mUploadMessage != null) {LogUtil.e("PHOTO_REQUEST3");mUploadMessage.onReceiveValue(result);mUploadMessage = null;}} 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;}}}}//这个回调主要是处理5.0以上的回调上传private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {if (requestCode != PHOTO_REQUEST || mUploadCallbackAboveL == null) {LogUtil.e("onActivityResultAboveL1");return;}Uri[] results = null;if (resultCode == Activity.RESULT_OK) {if (data == null) {LogUtil.e("onActivityResultAboveL2");results = new Uri[]{imageUri};} else {LogUtil.e("onActivityResultAboveL3");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)};}}LogUtil.e("onActivityResultAboveL1" + results.toString());mUploadCallbackAboveL.onReceiveValue(results);mUploadCallbackAboveL = null;}

Android关于第三方h5在webview调用摄像头及相机的处理相关推荐

@zxing/library插件在H5页面上调用摄像头进行扫码识别解决方法，以及对华为手机的兼容
@zxing/library调用摄像头这是第一次写博客,不太熟悉,如果我的方法有些问题,请多指正,谢谢!! 关于@zxing/library 导入@zxing/library npm i @zxin ...
如何在h5页面中调用摄像头来完成拍照之类的操作
一.该案例情况框架:vue: 运行环境:PC; 二.准备在pc端中需要使用https地址才可以访问到摄像头流信息, 所以在生产环境中,我们可以通过vue.config.js来配置localhost ...
微信授权(三)微信调用摄像头和相机
涉及到了微信获取图片在这记录一下: 首页H5 会调用jsdk 会用到下面这些参数 ,大部分由java后端提供. 一: H5 通过接口从后台获取这些数据首先获取access_token,通过acces ...
Android WebView加载h5打开麦克风与摄像头的权限问题
目录快速处理 app向系统申请录音与相机权限 h5向app申请录音和相机权限详细解答 app权限与h5权限录音与麦克风默许的风险最佳实践 Android webview h5 麦克风权限,摄 ...
h5 利用getUserMedia 实现只调用摄像头
h5开发中调用摄像头,通常会根据不同的手机显示不同的状态,往往会可以选择相册中的图片, 常规用法: -input type=file capture 为了让用户必须拍照上传利用 getUserMed ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
Android与H5相互接口调用及Android端接口整理
近几年随着HTML5的功能越来越强大,H5页面的性能虽然稍差,单其灵活性很高,更新页面成本比原生小很多,一个页面可以被android和ios同时使用开发成本也比较低,所以移动端的开发已经不是单单的原生 ...
谷歌不支持调用摄像头麦克风_谷歌大手一挥，第三方相机或已无立锥之地
随着本月初谷歌方面正式发布了Android 11的Beta 3版本,按照官方的计划,Beta3将是Android 11的最后一个测试版,因此也意味着下次推送将会迎来正式版本的亮相.预计Android ...
h5前端调用android拍照功能,H5调用Android拍照和摄像以及选取相册
之前一直认为H5调用Android,H5不需要Android配合能直接实现功能.前段时间,自己做这个功能,才发现不是这么回事. H5编写 html文件里只需要标签即可实现代码,代码如下所示: 拍照 ο ...

Android关于第三方h5在webview调用摄像头及相机的处理

Android关于第三方h5在webview调用摄像头及相机的处理相关推荐

最新文章

热门文章