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的闭包
Jan 17 Javascript
javascript string字符串优化问题
Jul 31 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
Vue v-text指令简单使用方法示例
Sep 19 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
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
VBScript版代码高亮
2006/06/26 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
react的hooks的用法详解
2020/10/12 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
活动主持人开场白
2015/05/28 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle