Class QRScanner

Ejemplos de Uso y Codigo
administrador
Site Admin
Mensajes: 32
Registrado: Lun Ene 06, 2025 3:40 pm

Class QRScanner

Mensaje por administrador »

Ejemplo de lectura de codigos QR con la camara de celulares / tablets Android, y en Windows con el navegador Firefox.
No funciona en IOS / IPhone

En el caso de Android usando chrome para que la camara funcione con sitios no seguros "http://" debe hacer lo que se indica en el siguiente link :
CONFIGURACION CHROME ANDROID

Si su hosting o VPS tiene licencia SSL entonces no debe hacer nada, la libreria trabaja correctamente para sitios seguros.

Código: Seleccionar todo

<?php
include( 'config.php' );
include( TWEB_PATH . 'core.php' );
include( TWEB_PATH . 'qr.scanner.php' );

$oWeb = new TWeb('TEST QR SCANNER');
$oWeb->lAwesome = true; 
$oWeb->Activate();

  $oWnd = new TWindow( "main", 10, 10, "50%", "50%" );
  
  new TButton( $oWnd, "btn", "Front", 10, 10, 60, 60, "cameraFront()", null, null, 
               IMAGE_PATH . "qr-code-24.png", "btn-qr" );
  
  new TButton( $oWnd, "btn", "Back", 10, 110, 60, 60, "cameraBack()", null, null, 
               IMAGE_PATH . "qr-code-24.png", "btn-qr" );             
  
  new TSay($oWnd, null, "Resultado QR", 80, 10, 120, 30, "osay");
  new TSay($oWnd, "osay", "", 110, 10, "", 120, 30, "osay");
  
  new QRScanner( "TEST QR-SCANN ");
  
  $oWnd->Activate();

$oWeb->End();

?>

<script>

  var qrScan;

  $(function() {
    qrScan = new QRScanner();
  });

  function cameraFront() {
    qrScan.setcamera( CAMERA_FRONT );
    qrScan.function( writeResult );
    // qrScan.sound(false);
    qrScan.open();

    function writeResult() {
      let o = new TControl();
      qrScan.close();
      o.Set("osay", qrScan.getqrcode());
    }
  }

  function cameraBack() {
    qrScan.setcamera( CAMERA_BACK );
    qrScan.function( writeResult );
    // qrScan.sound(false);
    qrScan.open();

    function writeResult() {
      let o = new TControl();
      qrScan.close();
      o.Set("osay", qrScan.getqrcode());
    }
  }
  
</script>

<style>

  .btn-qr {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    width: 85px !important;
    height: 60px !important;
    border-radius: 8px;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }

  .btn-qr:hover {
    color: #373535;
    background-color: #7a97f0;
    border-color: #e7ecf0;
  }

  .osay {
    font-size: 18px;
    text-align: center;
  }

</style>

LINK DE PRUEBA
Saludos Cordiales

Gracias por su donacion
Imagen
https://www.paypal.me/valenciaim5
Responder