Puedes hacer lo siguiente:
- Crear un input que almacene el valor que devuelve al leer el QR. Ejemplo:
<input type="text" id="resultado" value="">
- Al ejecutarse la función
onScanSuccess
, obtienes el valor que trae la variabledecodedText
y se lo asignas al value del input que previamente habías creado.
Esta sería más o menos la idea del código:
<div id="qr-reader" class="mb-5"></div>
<div id="qr-reader-results"></div>
<input type="text" id="resultado" value="">
<script src=" https://unpkg.com/html5-qrcode" tipo=" texto/javascript"></script>
<script>
function comparar()
{
var resultado = $('#resultado').val();
$.ajax({
url:"nombre_de_tu_archivo.php",
method:'POST',
data:{resultado:resultado}, //Variable que debes recibir en PHP como $_POST['resultado']
success:function(resp)
{
if(resp == 'igual') //En este caso 'igual' es el echo que retorna el PHP, si la consulta se ejecuta bien y coinciden, imprimes el echo 'igual'
{
alert('Son iguales!');
$("#resultado").val('');
}
else
{
alert('Son diferentes!');
$("#resultado").val('');
}
}
})
}
$(document).ready(function() {
var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0;
function onScanSuccess(decodedText, decodedResult) {
if (decodedText !== lastResult) {
++countResults;
console.log(`Resultado del escaner: ${decodedText}`); //imprimes en consola para asegurarte que no está vacío
$('#resultado').val(decodedText); //Asignas la respuesta al input que habías creado
comparar(); //llamas la función donde está tu ajax
}
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", {
fps: 10,
qrbox: 250
});
html5QrcodeScanner.render(onScanSuccess);
});
</script>