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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
javascript实现电商放大镜效果
Nov 23 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
星际RPG字典
2020/03/04 星际争霸
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
优秀团支部事迹材料
2014/02/08 职场文书
超市国庆节促销方案
2014/02/20 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
校园绿化美化方案
2014/06/08 职场文书
公司奖励通知
2015/04/21 职场文书
2015年度企业工作总结
2015/05/21 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Nginx动静分离配置实现与说明
2022/04/07 Servers