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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
js每次Title显示不同的名言
Sep 25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
vue实现列表拖拽排序的功能
Nov 02 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编程语言开发动态WAP页面
2006/10/09 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
Javascript 解疑
2009/11/11 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
使用python为mysql实现restful接口
2018/01/05 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
python实现公司年会抽奖程序
2019/01/22 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
全国文明单位申报材料
2014/05/31 职场文书
授权委托书范文
2014/07/31 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2016年寒假家长评语
2015/10/10 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL