在做一個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>
下載地址：完整代碼加相關插件，即下即用