WebView调用Android手机拍照功能

立即下载用AI写一个

发布时间：2020-06-02

4人 | 浏览：2551次 | 收藏 |

技术：android+jdk1.8

概述

html 调用相机在 Android上的封装处理。详细介绍调用原理，并给出具体使用范例。

详细

### 前言
在`Android`开发过程中，我们经常会涉及到调用手机拍照功能的问题。但是当`Android`中涉及到与`WebView`交互的时候，我们也可以通过`WebView`来处理`Html`调用手机拍照功能。而通过`WebView`来调用手机拍照功能主要涉及到类`WebChromeClient`，这里我继承`WebChromeClient`封装了一个类`JsWebChromeClient`，用于处理`html`调用手机拍照的功能，那么下面就来讲讲`JsWebChromeClient`的使用吧。
今天涉及的内容有：
1. `html`调用`Android`手机相机拍照功能原理
2.  `html`调用相机简单讲解
3.  封装`JsWebChromeClient`主要方法介绍
4.  `JsWebChromeClient`在`MainActivity`中的使用
5.   项目结构图和效果图

先来波效果图
![](/contentImages/image/20200602/RIefmnWBbYIo6Vas0EW.gif)

#### 一. html调用Android手机相机拍照功能原理
`html`调用`Android`手机相机拍照功能,其原理是在`html`中布局触发`拍照`按钮，然后在`android`的`webview`中设置的`WebChromeClient`来触发调用相机的流程，然后将拍照的结果又通过`onActivityResult(int requestCode, int resultCode, @Nullable Intent data)`设置传值,最后将此值设置到`WebChromeClient`中供`html`代码调用，以达到将拍照的结果传到`html`中的效果。这里需要注意的是，`html`并不能直接完成拍照及接收拍照返回值的整个流程，它通过`webview`的`WebChromeClient`只能做一个触发的作用，具体的`权限申请`和`拍照流程`还是需要`原生Android`来完成。说到底,`html`所谓的"调用拍照"，不过是借用`webview`来触发拍照流程和接收拍照返回值，具体的拍照实现还是需要`原生Android`实现。
#### 二. html调用相机简单讲解
`html`要调用相机，则在`html`中也要做一个简单的触发操作，即是在`html`的布局中加入特定“控件”，下面简单贴下`test.html`代码：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</script>
</html>
```
其中`<p><input type="file" accept="image/*"  capture="camera"/></p>`便是发起`原生Android`中`webview`设置的`WebChromeClient`的触发。
#### 三.封装JsWebChromeClient主要方法介绍
`html`调用`android相机`的具体实现其实是在`WebChromeClient`中处理的。这里我继承`WebChromeClient`封装了一个类`JsWebChromeClient`，主要用于处理`html`调用`相机`的触发问题。下面对`JsWebChromeClient`中主要方法做一个简单的介绍：
```
    /**设置相机触发的监听,一般在这里面做拍照,存储等权限申请**/
    public void setOnCameraPermissionListener(OnCameraPermissionListener listener);

/**默认拍照(作参考)**/
    public File defaultTake(AppCompatActivity activity)

/**相册(选择照片)**/
    public void defaultChoosePhoto(AppCompatActivity activity)

/**取消(取消拍照或选择照片的时候调用处理,若不做处理会导致第二次点击webview中调用拍照的照片的时候无响应)**/
    public void cancel()

/**拍照，相册返回的处理**/
    public void onActivityResult(int requestCode, int resultCode, Intent data,File tempImageFile,AppCompatActivity activity)
```
#### 四. JsWebChromeClient 在 MainActivity 中的使用
已经了解了`JsWebChromeClient`的一些基本方法，那么，接下来让我们看看`JsWebChromeClient`在`MainActivity`中的使用：
```
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

private static final int PERMISSION_CODE = 1234;

private TextView mTextView;
    private Button mButton1;
    private WebView mWebView;
    private WebViewHelper mWebViewHelper;
    private JsWebChromeClient mJsWebChromeClient;

private File mTempFile;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

//初始化控件
        initView();
        //初始化数据
        initData();
        //设置监听
        setListener();
        //        //申请权限
        //        requestPermission(MainActivity.PERMISSION_CODE);
    }

private void requestPermission(int requestCode) {
        String permissions[] = {
                Manifest.permission.CAMERA,
                Manifest.permission.INTERNET,
                Manifest.permission.READ_EXTERNAL_STORAGE,
                Manifest.permission.WRITE_EXTERNAL_STORAGE};
        PermissionHelper.getInstance().checkPermissions(permissions, requestCode, MainActivity.this);
    }

@PermissionSuccess(requestCode = MainActivity.PERMISSION_CODE)
    public void requestSuccess() {
        //申请到权限后的处理
        //......

LogUtil.i("=====权限申请成功======");

//拍照(一般使用第三方框架,此处仅作演示)
        mTempFile=mJsWebChromeClient.defaultTake(MainActivity.this);
    }

@PermissionFail(requestCode = MainActivity.PERMISSION_CODE)
    public void requestFail(){
        //未获取到权限的处理
        //......

LogUtil.i("=====权限申请失败======");
    }

@Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String permissions[], @NonNull int[] grantResults) {
        PermissionHelper.getInstance().onRequestPermissionsResult(requestCode, permissions, grantResults);
    }

private void initView() {
        mTextView = findViewById(R.id.tv);
        mButton1 = findViewById(R.id.btn1);
        mWebView = findViewById(R.id.webView);
    }

private void initData() {
        mWebViewHelper=new WebViewHelper();
        //webView基本设置
        mWebViewHelper.setWebViewConfig(mWebView,MainActivity.this);
        //设置webview背景色
        mWebView.setBackgroundColor(Color.BLUE);

mJsWebChromeClient=new JsWebChromeClient();
        mJsWebChromeClient.setOnCameraPermissionListener(new JsWebChromeClient.OnCameraPermissionListener() {
            @Override
            public void permission() {
                LogUtil.i("=====响应html点击事件=======");
                //申请权限
                requestPermission(MainActivity.PERMISSION_CODE);
            }
        });
        mWebView.setWebChromeClient(mJsWebChromeClient);
        //webView加载本地html
        mWebViewHelper.loadAssetsFile(mWebView,"test.html");
    }

private void setListener(){
        mButton1.setOnClickListener(this);
    }

@Override
    public void onClick(View v) {
       switch (v.getId()) {
           case R.id.btn1://测试
               LogUtil.i("=====测试====");
               test();
               break;
           default:
               break;
       }
    }

private void test() {

}

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

//拍照,相册返回的处理
        mJsWebChromeClient.onActivityResult(requestCode,resultCode,data,mTempFile,MainActivity.this);
    }

}
```
需要注意的是,在`mJsWebChromeClient.setOnCameraPermissionListener`的`public void permission()`中先做`拍照权限申请`,r然后在申请成功的处理中做拍照动作，接着在`Activity`的`onActivityResult(int requestCode, int resultCode, @Nullable Intent data) `中调用` mJsWebChromeClient.onActivityResult(requestCode,resultCode,data,mTempFile,MainActivity.this);`用以处理拍照回来的结果。`WebChromeClient`将拍照返回的结果传给`html`中的处理，我已经在`JsWebChromeClient`中做封装处理了，大家无需考虑。
**最后需要注意的是：**我在`MainActivty`中调用的拍照不过是个样例，大家可以替换成自己的拍照框架，但是返回`code`按我给定的`code`设置即可。
文中的`WebViewHelper`不过是封装了些`webView`的基本使用设置，大家按`webView`的基本使用设置即可。
#### 五.项目结构图和效果图
效果图如下
![](/contentImages/image/20200602/RIefmnWBbYIo6Vas0EW.gif)

项目结构图
![](/contentImages/image/20200602/FOk4ZQ9RveHDzUY33pY.png)

ok，今天的内容就到这里了，谢谢大家。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

WebView调用Android手机拍照功能

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子