JS调用安卓手机摄像头扫描二维码


Posted in Javascript onOctober 16, 2018

项目要求:

使用H5模仿微信扫一扫付款功能

经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别。

优点:

兼容大多数浏览器

本地识别不占用服务端资源

代码比较简单只有一个页面

<html lang="ZH-CN">
<head>
 <meta charset="utf-8">
 <title>Web QrCode Test</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
 
<script type="text/javascript" src="jsqrcode/src/grid.js"></script>
<script type="text/javascript" src="jsqrcode/src/version.js"></script>
<script type="text/javascript" src="jsqrcode/src/detector.js"></script>
<script type="text/javascript" src="jsqrcode/src/formatinf.js"></script>
<script type="text/javascript" src="jsqrcode/src/errorlevel.js"></script>
<script type="text/javascript" src="jsqrcode/src/bitmat.js"></script>
<script type="text/javascript" src="jsqrcode/src/datablock.js"></script>
<script type="text/javascript" src="jsqrcode/src/bmparser.js"></script>
<script type="text/javascript" src="jsqrcode/src/datamask.js"></script>
<script type="text/javascript" src="jsqrcode/src/rsdecoder.js"></script>
<script type="text/javascript" src="jsqrcode/src/gf256poly.js"></script>
<script type="text/javascript" src="jsqrcode/src/gf256.js"></script>
<script type="text/javascript" src="jsqrcode/src/decoder.js"></script>
<script type="text/javascript" src="jsqrcode/src/qrcode.js"></script>
<script type="text/javascript" src="jsqrcode/src/findpat.js"></script>
<script type="text/javascript" src="jsqrcode/src/alignpat.js"></script>
<script type="text/javascript" src="jsqrcode/src/databr.js"></script>
</head>
<body>
 <div class="booth">
 <video id="video" width="400" height="400"></video>
 <canvas id='canvas' width='400' height='400'></canvas>
 <img id='img' src=''>
 </div>
 
 <div id="mmm"></div>
 
 <canvas id="qr-canvas" width="640" height="480"></canvas>
<script>
 
 
 //初始化媒体对象
 var c=0;
 var video = document.getElementById('video'),
  canvas = document.getElementById('canvas'),
  img = document.getElementById('img'),
  vendorUrl = window.URL || window.webkitURL;
  
 //媒体对象
 navigator.getMedia = navigator.getUserMedia ||
       navagator.webkitGetUserMedia ||
       navigator.mozGetUserMedia ||
       navigator.msGetUserMedia;
 navigator.getMedia({
  video: true, //使用摄像头对象
  audio: false //不适用音频
 }, function(strem){
  console.log(strem);
  video.src = vendorUrl.createObjectURL(strem);
  video.play();
 }, function(error) {
  //error.code
  console.log(error);
 });
 
 //启动定时器
 setTimeout("actionP(null)","1000");
 
 //定时器
 function actionP(data){
  if(data==null){
  Screenshot()
   
  }else{
  if(data!=null & data!="error decoding QR Code"){//识别出数据
   if(data.indexOf("http")!=-1){
   window.location.href=data;
   }else alert(data);
   
   }else{//没有数据循环十次
    c++;
    if(c<10){
     setTimeout("actionP(null)","1000");
    }
    
   }
  }
  
 }
 
 
 function Screenshot(){//截取图像
 canvas.getContext('2d').drawImage(video, 0, 0, 400, 400);
 var imgData = canvas.toDataURL("image/png");
 load(imgData);
 img.src=imgData;
  
 }
 ////////////////////////////////////////识别二维码////////////////////////////////////////////
 
 function dragenter(e) {
 e.stopPropagation();
 e.preventDefault();
 }
 
 function dragover(e) {
 e.stopPropagation();
 e.preventDefault();
 }
 function drop(e) {
 e.stopPropagation();
 e.preventDefault();
 
 var dt = e.dataTransfer;
 var files = dt.files;
 
 
 }
 
 
 function load(name)
 {
 initCanvas(640,480);
 //识别二维码并回调方法
 qrcode.callback = actionP;
 qrcode.decode(name);
 }
 
 function initCanvas(ww,hh)//创建画板
 {
 gCanvas = document.getElementById("qr-canvas");
 gCanvas.addEventListener("dragenter", dragenter, false); 
 gCanvas.addEventListener("dragover", dragover, false); 
 gCanvas.addEventListener("drop", drop, false);
 var w = ww;
 var h = hh;
 gCanvas.style.width = w + "px";
 gCanvas.style.height = h + "px";
 gCanvas.width = w;
 gCanvas.height = h;
 gCtx = gCanvas.getContext("2d");
 gCtx.clearRect(0, 0, w, h);
 imageData = gCtx.getImageData( 0,0,320,240);
 }
 
 
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
Javascript 面向对象 重载
May 13 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 #Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 #Javascript
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
详解ESLint在Vue中的使用小结
Oct 15 #Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP 编写大型网站问题集
2010/05/07 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
DOM相关内容速查手册
2007/02/07 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
python使用turtle库绘制树
2018/06/25 Python
python 实现多维数组转向量
2019/11/30 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
adidas美国官网:adidas US
2016/09/21 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
入股协议书
2014/04/14 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
2015年重阳节主持词
2015/07/04 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python