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代码通俗易懂(自写)
Jun 19 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
javascript冒泡排序小结
Apr 10 Javascript
深入理解js数组的sort排序
May 28 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
JS作用域链详解
Jun 26 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
2006/12/14 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
师范生自荐信
2013/10/27 职场文书
化工机械应届生求职信
2013/11/04 职场文书
学生会主席竞聘书
2014/03/31 职场文书
优秀护士演讲稿
2014/04/30 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年项目工作总结
2014/11/24 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
医学会议开幕词
2016/03/03 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫