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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
详解vue-cli中使用rem,vue自适应
May 06 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
迎接领导欢迎词
2014/01/11 职场文书
打架检讨书400字
2014/01/17 职场文书
人力资源主管职责范本
2014/03/05 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
应届生自荐书
2014/06/23 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
安全目标责任书
2014/07/22 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
退税申请报告怎么写
2015/05/18 职场文书
首次购房证明
2015/06/19 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby