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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python opencv之SIFT算法示例
2018/02/24 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
Java基础面试题
2012/11/02 面试题
计算机应用专业推荐信
2013/11/13 职场文书
模具毕业生推荐信
2014/02/15 职场文书
电气自动化求职信
2014/06/24 职场文书
工作证明格式及范本
2014/09/12 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Python学习之包与模块详解
2022/03/19 Python