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 16 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
vue router 动态路由清除方式
May 25 Vue.js
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实现中文转数字
2016/02/18 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python异常处理操作实例详解
2018/05/10 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Pycharm中如何关掉python console
2020/10/27 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
小学教师读书活动总结
2014/07/08 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
学前班语言教学计划
2015/01/20 职场文书
安全生产奖惩制度
2015/08/06 职场文书
导游词之河北邯郸
2019/09/12 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python