Nueva Clase QRScanner !!!

[administrador]

Hola a todos,

Se agrego una nueva clase, QRScanner para leer codigos QR desde el navegador en Android y en Windows.

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, la libreria trabaja correctamente para sitios seguros.

Código: Seleccionar todo

<?php
include( 'config.php' );
include( TWEB_PATH . 'core.php' );
include( TWEB_PATH . 'core.modal.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", 10, 10, "Front", "cameraFront()", null, null, 
               IMAGE_PATH . "qr-code-24.png", "btn-qr" );
  
  new TButton( $oWnd, "btn", 10, 110, "Back", "cameraBack()", null, null, 
               IMAGE_PATH . "qr-code-24.png", "btn-qr" );             
  
  new TSay($oWnd, null, 80, 10, "Resultado QR", 120, 30, null, "osay");
  new TSay($oWnd, "osay", 110, 10, "", 120, 30, null, "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 del Test del ejemplo : TEST