スーパーマーケットの管理システムのB / Sモードを行う際に、ユーザーがセルフチェックアウトサービスを実現したいです。これは間違いなく、データをスキャンする2次元コードを達成するためのページの多くを見つけるために、スキャンコード機能の使用、インターネットが必要になりますが、非常に完全に達成することができていません。最後に、私が見つかりました。ブログは、コードおよび重要な指導思想の一部を与えるが、多くの理由のブロガーがソースコードを公開することはできませんので、私は彼が与えるアイデアに基づいて、スキャンコードの全体のプロセスを実現しました。
大きく3つのアイデアに分け：
1、カメラがでストリーミングビデオでリアルタイム再生を得るために、システムのビデオカメラを呼び出します。
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
* */
$(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、でキャンバスを使用してビデオキャプチャ映像。
/*
* 将视频内容进行截图然后依次为参数调用解析二维码的码函数
* */
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は、プラグインの解決は、2次元コードを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>
