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 相关文章推荐
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
JavaScript实现商品评价五星好评
Nov 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
一个查看session内容的函数
2006/10/09 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
js验证上传图片的方法
2015/05/12 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
详解vue v-model
2020/08/31 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
在python中画正态分布图像的实例
2019/07/08 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
淘宝活动策划方案
2014/02/06 职场文书
初中军训感想300字
2014/03/05 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
初中学校军训方案
2014/05/09 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
Python Parser的用法
2021/05/12 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS