H5混合开发二维码扫描以及调用本地摄像头

今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案.以下是我对于H5扫描二维码以及调用本地摄像头的理解以及代码.
科普网址:
H5如何生成安卓组件对象
H5调用安卓本地摄像头api
在线二维码图片生成器

二维码扫描:(使用的是mui的框架,下面是html代码)

  
  
     
      
      
      
      
      
      
     
    
    

H5webapp二维码扫描

下面是包结构:开发工具是hbuilder


H5混合开发二维码扫描以及调用本地摄像头_第1张图片
image.png
H5混合开发二维码扫描以及调用本地摄像头_第2张图片
image.png
H5混合开发二维码扫描以及调用本地摄像头_第3张图片
image.png

mui.plusReady函数主要是初始化作用
startRecognize()是开启扫描二维码的功能
onerror是错误提示

onmarked是重点,是二维码扫描后的回调函数,type是二维码识别类型,result是二维码回调的内容

scanPicture()可以直接识别本地的二维码图片并进行解析

H5调用本地摄像头




    
    
    
    
    
    


    


mui.init();是mui框架初始化
getCamera()方法是先生成camera对象,然后进行拍照,拍照完把图片生成图片路径打印出来

H5混合开发二维码扫描以及调用本地摄像头_第4张图片
image.png
H5混合开发二维码扫描以及调用本地摄像头_第5张图片
image.png

关注我的公众号,都是满满的干货!

H5混合开发二维码扫描以及调用本地摄像头_第6张图片
孙坚.gif

你可能感兴趣的:(H5混合开发二维码扫描以及调用本地摄像头)