Android webview调用原生摄像头并扫描二维码功能

现在手上有个需求，就是webview加载的js端想调用原生的摄像头进行扫码功能，查找了挺多资料

方法是1、通过拦截webview页面ulr的方法进行监听页面操作
2、监听到我们想要的操作后，原生端进行打开摄像头并进行扫码
3、把扫描结果通过原生调用js端的方法把结果传递给js端

第一步就是原生端进行拦截操作，

package com.text_demo.activity;

import android.Manifest;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.os.Build;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
import android.support.annotation.NonNull;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
public class MainActivity extends AppCompatActivity {
    private final static int SCANNIN_GREQUEST_CODE = 1;
    private WebView mWebView;
    private Button btnPhoto;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //检查权限
        checkPermission();
        mWebView= (WebView) findViewById(R.id.web);
        // 设置WebView属性，能够执行Javascript脚本
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 设置Web视图
       mWebView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.i("拦截", "拦截到的url：" + url);
                url = URLEncodeing.toURLDecoder(url);
                //url如果包含doScan参数值，就是h5和我们定义的传值协议
                if(url != null && url.contains("doScan")){
                    Intent intent = new Intent();
                    intent.setClass(RFCardActivity.this, CaptureActivity.class);
                    intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                    startActivityForResult(intent, SCANNIN_GREQUEST_CODE);

                    return true;

                } else {
                    view.loadUrl(url);
                }
                return true;
            }

        });
     
    }

    // 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && wvContent.canGoBack()) {
            finish();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        switch (requestCode) {
            case SCANNIN_GREQUEST_CODE:
                if(resultCode == RESULT_OK){
                    //显示扫描到的内容
                  String  result = "扫描结果："+data.getStringExtra("codedContent").trim();
                    //更新webView内容
                    mWebView.loadUrl("javascript:funFromjs('" + result + "')");
                }
                break;
        }
    }

    private void checkPermission() {
        if (Build.VERSION.SDK_INT >= 23) {
            int checkCallPhonePermission = ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA);
            if(checkCallPhonePermission != PackageManager.PERMISSION_GRANTED){
                ActivityCompat.requestPermissions(MainActivity.this,new String[]{Manifest.permission.CAMERA,Manifest.permission.VIBRATE},333);
                return;
            }else{

            }
        } else {

        }
    }

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

第二步就是编写调用摄像头和扫描的步骤，这个相对简单，就直接找了篇大佬的贴上来，先去git上下载demo，然后按着步骤来就好了

步骤详情：https://www.cnblogs.com/xch-yang/p/9418493.html

第三步就是让js端的同事写个接口让原生端调用并且传数据给js了

js端的接口

 function funFromjs(result){  
        document.getElementById("result").innerText= result;
    }  

js端扫码按钮点击事件。。。doScan是交互中的标签名，原生端就是判断有没有这个参数来确定是否进行摄像头调用

<div id="div" onclick="getScan()"style="width:100px; height:100px; background-color:#099;"></div>
<script type="text/javascript">
function chongdingxiang(){
   //模拟重定向
  window.location.href="doScan";
}
</script>

参考文章：https://www.cnblogs.com/xch-yang/p/9418493.html
https://www.jianshu.com/p/3cb256de46d3