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

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

  1. <!doctype html>
  2. <html>
  3.    <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.     <link href="css/mui.min.css" rel="stylesheet" />
  8.     <script src="js/mui.min.js"></script>
  9.     <style type="text/css">
  10.         #bcid{
  11.             width: 100%;
  12.             height: 100%;
  13.             position: absolute;
  14.             background: #000000;
  15.         }
  16.         html, body ,div{
  17.             height:100%;
  18.             width: 100%;
  19.         }
  20.         .fbt{
  21.             color: #0E76E1;
  22.             width: 50%;
  23.             background-color: #ffffff;
  24.             float: left;
  25.             line-height: 44px;
  26.             text-align: center;
  27.         }
  28.     </style>
  29.    </head>
  30.   <body>
  31.     <header class="mui-bar mui-bar-nav" style="">
  32.       <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  33.       <h1 class="mui-title" style="color: #0E76E1;">H5webapp二维码扫描</h1>
  34.       <span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
  35.     </header>  
  37.     <div id="bcid">
  38.          <!--盛放扫描控件的div-->
  39.     </div>  
  41.     <div class="mui-bar mui-bar-footer" style="padding: 0px;">
  42.         <div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
  43.         <div class="fbt mui-action-back">取　 消</div>
  44.     </div>  
  46.     <script type="text/javascript">  
  48.     var height = window.innerHeight + 'px';//获取页面实际高度
  49.     var width = window.innerWidth + 'px';
  50.     document.getElementById("bcid").style.height= height;
  51.     document.getElementById("bcid").style.width= width;  
  53.            scan = null;//扫描对象
  54.         mui.plusReady(function () {  //通过mui初始化扫描
  55.               mui.init();
  56.           startRecognize();
  57.            });  
  59.         function startRecognize(){  //开启扫描
  60.            try{
  61.               var filter;
  62.              //自定义的扫描控件样式
  63.              var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}
  64.             //扫描控件构造
  65.             scan = new plus.barcode.Barcode('bcid',filter,styles);
  66.             scan.onmarked = onmarked;
  67.             scan.onerror = onerror;  //扫描错误
  68.             scan.start();
  69.             //打开关闭闪光灯处理
  70.             var flag = false;
  71.             document.getElementById("turnTheLight").addEventListener('tap',function(){
  72.                if(flag == false){
  73.                   scan.setFlash(true);
  74.                   flag = true;
  75.                }else{
  76.                  scan.setFlash(false);
  77.                  flag = false;
  78.                }
  79.             });
  80.           }catch(e){
  81.             alert("出现错误啦:\n"+e);
  82.              }
  83.           };
  84.             function onerror(e){  //错误弹框
  85.                     alert(e);
  86.             };
  87.             function onmarked( type, result ) {  //这个是扫描二维码的回调函数，type是扫描二维码回调的类型
  88.                     var text = '';
  89.                     switch(type){ //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
  90.                         case plus.barcode.QR:
  91.                         text = 'QR: ';
  92.                         break;
  93.                         case plus.barcode.EAN13:
  94.                         text = 'EAN13: ';
  95.                         break;
  96.                         case plus.barcode.EAN8:
  97.                         text = 'EAN8: ';
  98.                         break;
  99.                     }
  100.                     alert( text + " : "+ result );  
  102.             };    
  104.         // 从相册中选择二维码图片
  105.         function scanPicture() {  //可以直接识别二维码图片
  106.             plus.gallery.pick(function(path){
  107.                 plus.barcode.scan(path,onmarked,function(error){
  108.                     plus.nativeUI.alert( "无法识别此图片" );
  109.                 });
  110.             },function(err){
  111.                 plus.nativeUI.alert("Failed: "+err.message);
  112.             });
  113.         }         
  115.         </script>
  116.     </body>
  117. </html>

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

 
image.png
 
image.png
 
image.png

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

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

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

H5调用本地摄像头

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title></title>
  7.     <script src="js/mui.min.js"></script>
  8.     <link href="css/mui.min.css" rel="stylesheet"/>
  9.     <script type="text/javascript" charset="utf-8">
  10.         document.addEventListener( "plusready", function(){
  11.             mui.init();
  12.         });
  13.         function getCamera(){
  14.             var cam = plus.camera.getCamera();
  15.             //字符串数组,摄像头支持的拍照分辨率
  16.             var Resolutions = cam.supportedImageResolutions[0];
  17.             //字符串数组,摄像头支持的拍照文件格式
  18.             var Formats = cam.supportedImageFormats[0];
  19.             //调用拍照方法
  20.             //capturedFile,拍照完成后，照片的存放地址
  21.             cam.captureImage(function(capturedfile){
  22.                 //拍照成功
  23.                 alert(capturedfile);//打印一下
  24.             },function(){
  25.                 //拍照失败
  26.             },{
  27.                 //拍照参数
  28.                 format : Formats,
  29.                 index : 1//1表示主摄像头，2表示辅摄像头
  30.             });
  32.             var Resolutions = cam.supportedImageResolutions[0];
  33.             //字符串数组，摄像头支持的拍照文件格式
  34.             var Formats = cam.supportedImageFormats[0];
  35.             //调用拍照方法
  36.             //capturedFile,拍照完成后，照片的存放地址
  37.             cam.captureImage(function(capturedFile){
  38.                 //拍照成功
  39.                 alert(capturedFile);//打印一下
  40.                 //调用系统方法,根据照片地址获取照片
  41.                 plus.io.resolvLocalFileSystemURL(capturedFile,
  42.                     //成功的回调函数
  43.                     //entry文件的相关信息
  44.                     function(entry){
  45.                         var img = document.createElement("img");
  46.                         img.src = entry.toLocalURL();
  47.                         document.documentElement.appendChild(img);
  48.                     },function(){
  49.                         //失败的回调函数
  50.                     });
  51.             });
  52.         }
  53.     </script>
  54. </head>
  55. <body>
  56.     <button onclick="getCamera()">照相</button>
  57. </body>
  58. </html>

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

 
image.png

 
image.png
 
原文链接:
http://www.jianshu.com/p/c952b3a5e1d2
 

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

 
孙坚.gif

H5混合开发二维码扫描以及调用本地摄像头的更多相关文章

  1. iOS开发-二维码扫描和应用跳转

    iOS开发-二维码扫描和应用跳转   序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...

  2. ipad开发:二维码扫描，摄像头旋转角度问题解决办法

    之前一直是在手机上开发,用系统原生二维码扫描功能,一点问题都没有,但是在ipad上,用户是横屏操作的,虽然界面旋转了,是横屏的,但是摄像头里显示的依然是竖屏效果,也就是说从摄像头里看到的和人眼看到的内 ...

  3. WindowsPhone8.1 开发-- 二维码扫描

    随着 WinRT 8.1 API 的发布,Windows 8.1 和 Windows Phone 8.1 (基于 WinRT) 应用程序的开发模型经历了戏剧性的收敛性.与一些特定于平台的考虑,我们现在 ...

  4. Android开发--二维码开发应用（转载！）

    android项目开发 二维码扫描   基于android平台的二维码扫描项目,可以查看结果并且链接网址 工具/原料 zxing eclipse 方法/步骤   首先需要用到google提供的zxin ...

  5. Qt之二维码扫描

    简述 二维码(QR Code)是用某种特定的几何图形按一定规律在平面(二维方向)分布的黑白相间的图形记录数据符号信息的.是所有信息数据的一把钥匙.应用十分广泛,如:产品防伪/溯源.广告推送.网站链接. ...

  6. ZBar 是款桌面电脑用条形码/二维码扫描工具

    ZBar 是款桌面电脑用条形码/二维码扫描工具 windows平台python 2.7环境编译安装zbar   最近一个项目需要识别二维码,找来找去找到了zbar和zxing,中间越过无数坑,总算基本 ...

  7. angularjs+ionic+'h5+'实现二维码扫描功能

    今天给大家分享一下基于angularjs与ionic框架实现手机二维码扫描的功能.没有用到cordova等任何插件,h5+实现的. 开发工具:hbuilder 首先,需要在hbuilder项目下面的配 ...

  8. IOS开发小功能2：二维码扫描界面的设计（横线上下移动）

    效果图如上,实现的是一个二维码扫描界面. 下面我贴出线条上下移动的代码,至于二维码的代码是用的第三方库. 首先是整体的结构: 注意下面的库文件一个都不能少,否则会报错. TLTiltHighlight ...

  9. iOS开发之二维码扫描

    二维码扫描 01-导入系统库 02 新建继承自UIView的 LHQPreView 2.1导入系统库头文件 #import <AVFoundation/AVFoundation.h> 2. ...

随机推荐

  1. 一个比较实用的商业级图表Echarts

      了解了解                    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼 ...

  2. Leetcode题解（一）

    1.Two Sum 题目 此题第一解题思路,就是最常见的方法,两个指针嵌套遍历数组,依次判断当前指针所指向的值是否满足条件.代码如下; class Solution { public: vector& ...

  3. poj 3484 Showstopper

    Showstopper Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2236   Accepted: 662 Descri ...

  4. Linux必知必会的目录与启动过程

    第1章 /etc/目录 1.1 /etc/sysconfig/network-scripts/ifcfg-eth0 linux第一块网卡的配置文件 [root@znix ~]# cat /etc/sy ...

  5. linux 安装 Elasticsearch5.6.x 详细步骤以及问题解决方案

    在网上有很多那种ES步骤和问题的解决 方案的,不过没有一个详细的整合,和问题的梳理:我就想着闲暇之余,来记录一下自己安装的过程以及碰到的问题和心得:有什么不对的和问题希望及时拍砖. 第一步:环境 li ...

  6. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  7. JavaWeb笔记一、Servlet 详解

    一.创建一个 Servlet 简单实现类 1.创建一个 HelloServlet 类(测试 Servlet 接口方法) 1 //创建一个 HelloServlet 类并实现 Servlet 接口 2 ...

  8. sql连接语句

    简述 简单回顾并总结下不同的表连接语句有什么异同之处以及一些概念. 建库语句如下 DROP DATABASE IF EXISTS `demo`; CREATE DATABASE `demo`; USE ...

  9. openstack学习心得：keystone 架构、概念、访问流程

    1.keystone 介绍及其组成 OpenStack Identity 服务提供了一个单一的功能集合,包括管理认证,授权和服务目录. Identity 服务通常作为和用户第一个交互的服务.一旦认证成 ...

  10. 一、VueJs 填坑日记之基础概念知识解释

    概述在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs.对于初学者(尤其是干后端的初学者)来说,刚 ...