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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
最短的IE判断代码
Mar 13 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
JavaScript实现五子棋小游戏
Oct 26 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学习之PHP变量
2006/10/09 PHP
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
初识Node.js
2015/03/20 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
详解Python中的正则表达式的用法
2015/04/09 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
建筑工程实习自我鉴定
2013/09/19 职场文书
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2014年城管工作总结
2014/11/20 职场文书
2015年科普工作总结
2015/07/23 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android