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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 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实现斐波那契数列的简单写法
2014/07/19 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
validform表单验证的实现方法
2019/03/08 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python实现百度语音识别api
2018/04/10 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
详解Flask前后端分离项目案例
2020/07/24 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
信息部岗位职责
2013/11/12 职场文书
期末自我鉴定
2014/02/02 职场文书
大学生活动策划方案
2014/02/10 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
法人授权委托书
2014/09/16 职场文书
2014年秘书工作总结
2014/11/25 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js