JS调用安卓手机摄像头扫描二维码并用JS解析二维码

项目要求：

使用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.codeconsole.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>

JS调用安卓手机摄像头扫描二维码并用JS解析二维码相关推荐

win10调用安卓手机摄像头
可用于台式机和笔记本没有摄像头的情况或者摄像头坏掉的情况本人是转载up:晨钟酱Official 本人亲测教程教程:旧手机不要扔!一分钟教你做电脑4K摄像头_哔哩哔哩_bilibili 软件下载: ...
ffmpeg综合应用示例（三）——安卓手机摄像头编码
本文的示例将实现:读取安卓手机摄像头数据并使用H.264编码格式实时编码保存为flv文件.示例包含了 1.编译适用于安卓平台的ffmpeg库 2.在java中通过JNI使用ffmpeg 3.读取安卓摄 ...
React Native实现js调用安卓原生代码
1 问题实现js调用安卓原始代码,直接上代码,简单粗暴 2 代码实现 1) 实现一个继承ReactContextBaseJavaModule的类,MyToastModule.java文件如下 pub ...
android扫描文件,安卓手机怎么扫描文件_手机扫描文件的图文教程－系统城
在平时工作或学习时,越来越多的时候需要使用到扫描文件,那大家知道安卓手机怎么扫描文件吗?近日有用户就遇到了这一问题,但不知道怎么操作很是苦恼,所以针对这一情况,今天本文为大家整理分享的就是关于手机扫描 ...
能在Windows CE上运行的的二维码识别系统，使用手机摄像头扫描二维码
欧美和日本,二维码的使用比较广泛,最近看到一则新闻,我们国家也在航空服务中使用二维码了.二维码具有信息容量大.纠错能力强.可靠性高.成本低.防伪性好.持久耐用等一维条码所不具备的优良特点.二维码的种类 ...
js扫描（上传）图片解析二维码
getUserMedia.访问摄像头(扫描以及上传图片)解析二维码 1.准备工作 2.通过getUserMedia方法调用摄像头进行扫描解析 3.上传图片解析二维码话不多说先上效果图: 1.准备工作 ...
电脑使用android手机摄像头,电脑怎么使用安卓手机摄像头电脑使用手机摄像头的方法-电脑教程...
现在安卓手机基本上都配备了1300w像素,那么这个高的像素是不是只有在手机上拍照的功能呢?答案是否定的,这里教大家物尽其用,来弥补笔记本和usb摄像头的缺点.也就是在电脑上使用安卓手机的摄像头.从而在 ...
js防止安卓手机软键盘弹出挤压页面导致变形的方法
h5防止安卓手机软键盘弹出挤压页面导致变形的方法输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了 ...
Android超方便集成 Zxing实现扫一扫，闪光灯，生成二维码图片，解析二维码（条码）等功能
之前我写过一篇博客是关于如何将zxing集成到Android Studio中,以及简单的实现扫一扫功能. 详情请看:Android Studio集成Zxing扫一扫但是,上面那篇博客只有有一个扫一扫 ...

JS调用安卓手机摄像头扫描二维码并用JS解析二维码

JS调用安卓手机摄像头扫描二维码并用JS解析二维码相关推荐

最新文章

热门文章