在做一个B/S模式的超市管理系统时,想要实现用户的自助结账服务。这无疑需要使用扫码功能,在网上找了很多网页实现二维码扫描资料,但都没有能够很完整的实现。最后找到了一个博客给出了部分代码和重要的指导思想,但由于众多原因博主不能公布源代码,所以我就根据他给出的思想实现了扫码的整个过程。
大致思想分为三块:
1、调用系统摄像头将摄像头获取的视频流实时播放在video中。
html文本
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>scanQRcode</title>
<script type="text/javascript" th:src="@{/asserts/js/jquery-2.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/reqrcode.js}"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" hidden></canvas>
<video id="myVideo" height="100%" width="50%"></video>
</body>
</html>
将视频流放到video中
/*
* 将摄像头的拍摄内容实时播放在video
* */
$(document).ready(function () {
navigator.mediaDevices.getUserMedia({
video: true
}).then(function (stream) {
var v = document.getElementById("myVideo");
//将视频流实时播放在video
v.srcObject = stream;
v.onloadedmetadata = function () {
v.play();
}
screenShot();
});
});
2、使用canvas将video中的视频截图。
/*
* 将视频内容进行截图然后依次为参数调用解析二维码的码函数
* */
function screenShot() {
var myCanvas = document.getElementById('myCanvas'),
video = document.getElementById('myVideo'),
canvas = document.getElementById('myCanvas').getContext('2d');
canvas.drawImage(video, 0, 0, 200, 200);
var url = myCanvas.toDataURL("image/png");
decode(url);
}
3、使用reqrcode.js插件解析二维码,如果成功解析则返回解析结果;解析失败则再截图在解析,直到解析成功。
/*
* 解析二维码,成功则传回后台,失败则再次截图进行解析
* */
function decode(url) {
qrcode.decode(url);
qrcode.callback = function (imgMsg) {
if (imgMsg == 'error decoding QR Code') {
screenShot();
} else {
$.ajax({
url: "/sms/buy/good",
type:"post",
data: JSON.stringify({id:imgMsg}),
contentType: "application/json;charset=UTF-8",
success: function (good) {
alert(good.name+"\n"+good.outPrice);
},
error: function(a,b){
alert(a+","+b);
}
});
}
}
}
完整代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>scanQRcode</title>
<script type="text/javascript" th:src="@{/asserts/js/jquery-2.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/reqrcode.js}"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script type="text/javascript">
/*
* 解析二维码,成功则传回后台,失败则再次截图进行解析
* */
function decode(url) {
qrcode.decode(url);
qrcode.callback = function (imgMsg) {
if (imgMsg == 'error decoding QR Code') {
screenShot();
} else {
$.ajax({
url: "/sms/buy/good",
type:"post",
data: JSON.stringify({id:imgMsg}),
contentType: "application/json;charset=UTF-8",
success: function (good) {
alert(good.name+"\n"+good.outPrice);
},
error: function(a,b){
alert(a+","+b);
}
});
}
}
}
/*
* 将视频内容进行截图然后依次为参数调用解析二维码的码函数
* */
function screenShot() {
var myCanvas = document.getElementById('myCanvas'),
video = document.getElementById('myVideo'),
canvas = document.getElementById('myCanvas').getContext('2d');
canvas.drawImage(video, 0, 0, 200, 200);
var url = myCanvas.toDataURL("image/png");
decode(url);
}
/*
* 将摄像头的拍摄内容实时播放在video
* */
$(document).ready(function () {
navigator.mediaDevices.getUserMedia({
video: true
}).then(function (stream) {
var v = document.getElementById("myVideo");
//将视频流实时播放在video
v.srcObject = stream;
v.onloadedmetadata = function () {
v.play();
}
screenShot();
});
});
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" hidden></canvas>
<video id="myVideo" height="100%" width="50%"></video>
</body>
</html>
下载地址:完整代码加相关插件,即下即用