De este modo la gestión de supermercados S sistema de B /, los usuarios quieren lograr un servicio de auto-pago. Esto sin duda requerirá el uso de la función de código de exploración, el Internet para encontrar un montón de páginas para conseguir los datos bidimensionales de lectura de códigos, pero no han sido capaces de lograr muy completo. Finalmente encontré un blog de da la parte del código y el pensamiento guía importante, pero debido a muchas razones bloggers no pueden publicar el código fuente, por lo que se dio cuenta de todo el proceso de escaneo de código basado en las ideas que él da.
Más o menos dividido en tres ideas:
1, la cámara llamará la cámara de vídeo del sistema para obtener una reproducción en tiempo real en la transmisión de vídeo en.
texto 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>
El vídeo con el vídeo en el exilio
/*
* 将摄像头的拍摄内容实时播放在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, el video de captura de vídeo usando la lona en.
/*
* 将视频内容进行截图然后依次为参数调用解析二维码的码函数
* */
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, utilizando plug-ins determinación reqrcode.js código de dos dimensiones, si resuelto con éxito los resultados analíticos devueltos; análisis falla y luego se disparó en la resolución hasta resuelto con éxito.
/*
* 解析二维码，成功则传回后台，失败则再次截图进行解析
* */
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);
}
});
}
}
}
El código completo
<!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>
Descarga: el código completo más relacionados plug-ins, el siguiente de usar
