In doing supermarket management system B / S mode, users want to achieve self-checkout service. This will undoubtedly require the use of scan code feature, the Internet to find a lot of pages to achieve the two-dimensional code scanning data, but have not been able to achieve very complete. Finally I found a blog gives the part of the code and the important guiding ideology, but because of many reasons bloggers can not publish the source code, so I realized the whole process of scan code based on ideas he gives.
Roughly divided into three ideas:
1, the camera will call the system's video camera to obtain real-time playback in video streaming in.
html text
<!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>
The video to the video in exile
/*
* 将摄像头的拍摄内容实时播放在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, the video capture video using canvas in.
/*
* 将视频内容进行截图然后依次为参数调用解析二维码的码函数
* */
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, using plug-ins resolve reqrcode.js two-dimensional code, if successfully resolved the analytical results returned; parsing fails and then shot in the resolution until successfully resolved.
/*
* 解析二维码，成功则传回后台，失败则再次截图进行解析
* */
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);
}
});
}
}
}
The complete code
<!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>
Download: the complete code plus related plug-ins, the next-to use
