JS调用安卓手机摄像头扫描二维码
程序员文章站
2022-06-03 11:56:57
项目要求：
使用h5模仿微信扫一扫付款功能
经过一系列的查找最后发现可以使用 js调用手机摄像头然后用画布把当前摄像头的数据转成base64的png图片，经过qrcod...
项目要求：
使用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。