H5调用安卓摄像头扫码并把扫码结果返回

2024-03-24 13:31| 来源: 网络整理| 查看: 265

最近公司又双叒叕有需求了,之前接入的H5界面需要和原生交互,说白了就是H5调用android原生扫码界面,并把扫码结果传过去,现在功能写完了简单的总结一下,有类似功能的童鞋可以参考一下,老规矩,先看效果图 :

1.通过 JavascriptInterface 方式扫码:

2.通url拦截方式扫码:

本人也是安卓新手,技术水平和文采能力有限,如果觉得有什么不妥的地方多多交流,

码字不易,转载说明出处:https://blog.csdn.net/pysunwen/article/details/81182582

代码部分:

首先就是项目里面需要集成Zxing扫码类库,可以在Github上集成官方的,也可以集成一些第三方的,第三方的比较简单,基本添加一行依赖,再初始化一下就可以了,很简单的,我这里是直接从项目里拷贝的类库,然后import Module 就可以了,这里不详细介绍

MainActivity

public class MainActivity extends AppCompatActivity { private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.webview); WebSettings settings = webView.getSettings(); //webView支持JS settings.setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/test.html"); webView.addJavascriptInterface(this,"android");//"android" 和h5要一致 setWebViewClient(); } /** * WebViewClient */ private void setWebViewClient() { webView.setWebViewClient(new WebViewClient(){ public boolean shouldOverrideUrlLoading(WebView view, String url) { //通过url拦截进行跳转 if (url != null && url.contains("doscan")){ Intent intent = new Intent(MainActivity.this,MyScanActivity.class); startActivityForResult(intent, 666); return true; } else { return false; } } }); } /** * 注解方法注意:doScan()一定要和h5里面的 android.doScan();方法一致 */ @JavascriptInterface public void doScan(){ Intent intent = new Intent(this,MyScanActivity.class); startActivityForResult(intent,666); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode ==666 && null !=data){ String result = data.getStringExtra("result").trim(); //setScanResult(result) 方法就是调用H5里面的有参方法,注意方法名要一致 webView.loadUrl("javascript:setScanResult('" + result + "')"); } } }

这个主界面一打开就加载本地的test.html 文件,放在assers 目录下,H5里面就两个button ,和一个展示扫码结果的div标签,h5不懂也没关系,主要和前段约定好一些方法名和参数名就可以了

@JavascriptInterface

这种方法在4.2之前是有漏洞的,4.2之后为了补掉漏洞提供了@JavascriptInterface对象注解的方式建立Javascript对象和android原生对象的绑定,提供给JavaScript调用的方法必须带有@JavascriptInterface。

这个方法就是暴露给JavaScript调用的,方法里面可以做一些操作:比如界面跳转,打开相机,拨打电话等等操作,比较注意的是一定记得家注解:@JavascriptInterface 然后注意的是WebView 调用webView.addJavascriptInterface(this,"android");方法如下:

webView.addJavascriptInterface(this,"android"); //java方法 @JavascriptInterface public void doScan(){ Intent intent = new Intent(this,MyScanActivity.class); startActivityForResult(intent,666); } //js方法 document.getElementById("butten1").onclick = function(){ android.doScan(); }; url拦截

这个方法也比较简单,就是js点击触发一个事件,按钮指向一个地址,android在webView的setWebViewClient 里面重写

shouldOverrideUrlLoading 这个方法,事先和前端约定好关键字,如果地址里面包含"xxx" 就做一些本地的操作如下: public boolean shouldOverrideUrlLoading(WebView view, String url) { //通过url拦截进行跳转 if (url != null && url.contains("doscan")){ Intent intent = new Intent(MainActivity.this,MyScanActivity.class); startActivityForResult(intent, 666); return true; } else { return false; } }

activity_main.xml 里面仅仅一个webview没啥好说的

test.html 就两个button 和一个div标签用于展示结果

通过注解方式调用安卓扫码 document.getElementById("butten1").onclick = function(){ android.doScan(); }; var text = document.getElementById("text"); function setScanResult(result){ text.innerHTML = "扫码结果:"+result; };

这里是我直接用的项目里面的库,当然你也可以直接用github封装好的库,比我自定义更方便,我这里直接用项目里现成的,就不用地方的了,下面是自定的扫码界面:

MyScanActivity

public class MyScanActivity extends CaptureActivity implements View.OnClickListener { private ImageView ivOpenlight; private LinearLayout ll_openlight; private TextView tvOpenlight; private boolean isLightOpen = true; private ImageView ivBack; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_scan); initEvent(); } private void initEvent() { ivBack = findViewById(R.id.iv_back); ivOpenlight = findViewById(R.id.iv_openlight); ll_openlight = findViewById(R.id.ll_openlight); tvOpenlight = findViewById(R.id.tv_openlight); ll_openlight.setOnClickListener(this); ivBack.setOnClickListener(this); } @Override public int layoutID() { return R.layout.activity_my_scan; } @Override public int surfaceViewID() { return R.id.preview_view; } @Override public int viewFindViewID() { return R.id.viewfinder_view; } @Override public void handleQrContent(String qrContent) { String qrContent1 = qrContent; ivOpenlight.setImageResource(R.mipmap.iv_light_closed); tvOpenlight.setText("打开闪光灯"); isLightOpen = false; super.onPause(); super.onDestroy(); super.onResume(); //扫码完成直接关闭当前Act,并把结果带过去 Intent intent = new Intent(); intent.putExtra("result", qrContent); setResult(666, intent); finish(); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.ll_openlight: if (isLightOpen) { if (cameraManager != null) { ivOpenlight.setImageResource(R.mipmap.iv_light_closed); tvOpenlight.setText("打开闪光灯"); cameraManager.offLight(); isLightOpen = false; } } else { if (cameraManager != null) { ivOpenlight.setImageResource(R.mipmap.iv_light_open); tvOpenlight.setText("关闭闪光灯"); cameraManager.openLight(); isLightOpen = true; } } break; case R.id.iv_back: finish(); break; } } }

activity_myscan.xml

最后扫码结束后在onActivityResult方法里面调用webView.loadUrl("javascript:setScanResult('" + result + "')"); 把结果传回去了

【本文地址】

公司简介

联系我们