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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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
PHP实现读取一个1G的文件大小
2013/08/24 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
python 剪切移动文件的实现代码
2018/08/02 Python
详解Python 解压缩文件
2019/04/09 Python
Django Form常用功能及代码示例
2020/10/13 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
酒店应聘自荐信
2013/11/09 职场文书
党员思想汇报范文
2013/12/30 职场文书
转预备党员政审材料
2014/02/06 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
结婚堵门保证书
2015/05/08 职场文书
入党积极分子考察意见
2015/06/02 职场文书
党支部对转正的意见
2015/06/02 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python