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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
PHP常用处理静态操作类
2015/04/03 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
从0开始学Vue
2016/10/27 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
python logging日志模块的详解
2017/10/29 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python实现批处理文件
2020/07/28 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
如何选择使用结构还是类
2014/05/30 面试题
高三毕业生自我鉴定
2013/12/20 职场文书
信息员培训方案
2014/06/12 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
大雁塔英文导游词
2015/02/10 职场文书
超市督导岗位职责
2015/04/10 职场文书
绿里奇迹观后感
2015/06/15 职场文书
安全温馨提示语大全
2015/07/14 职场文书
使用Python开发冰球小游戏
2022/04/30 Python