项目要求：
使用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解析二维码》对你有帮助，请点赞、收藏，并留下你的观点哦！
