2012-11-12 15 views
18

Ho cercato per tutta la mattina di integrare un'applicazione per Android Barcode Scanner in una pagina Web, ma non ho trovato esattamente quello che dovevo sapere. Voglio avere una pagina web che l'utente può compilare campi di testo utilizzando uno scanner di codici a barre Android. Quindi l'utente si troverebbe su una pagina Web e farebbe clic nel campo di testo o fare clic su un pulsante accanto al campo di testo che avvia lo scanner di codici a barre Android. Avrebbero quindi eseguito la scansione del codice a barre e il campo di testo sarebbe stato compilato.Integrazione con scanner di codici a barre Android con pagina web

Ho trovato soluzioni su come fare questo e poi andare a una pagina diversa, ma è importante che l'utente rimanga sulla stessa pagina. Ho visto il progetto di zxing e ho pensato che potrebbe essere in grado di essere utilizzato, ma non sono sicuro che permetta alla pagina di rimanere uguale.

Sono sicuro che questo è possibile e mi chiedo se qualcuno potrebbe darmi una panoramica di alto livello su come lo farebbero. Stavo pensando che potrebbe essere in grado di essere fatto con una richiesta Ajax che viene inviata con un clic del pulsante. La richiesta Ajax sarebbe stata inviata al mio server, il server avrebbe inviato qualcosa al dispositivo Android che avrebbe avviato lo scanner e restituito i dati che a loro volta vengono rimandati nella risposta ajax. C'è un modo per ritagliare il server e basta avere il browser Android per avviare lo scanner di codici a barre? Grazie per il vostro tempo e apprezzo qualsiasi discussione su di esso.

+0

è la vostra pagina web di essere visitati in il dispositivo Browser?O stai creando un'app di barebone che contiene una WebView per mostrarla? – FoamyGuy

+0

Grazie per la risposta. La mia pagina web viene visualizzata nel browser del dispositivo. Ho un sito che è già sviluppato. Posso cambiare l'interfaccia utente e posso aggiungere javascript. Non ho molta familiarità con le viste sul web. Possono essere utilizzati per visualizzare qualsiasi sito e sarebbero necessarie modifiche al sito? –

+0

Ho anche il controllo sul lato server dell'applicazione web e posso aggiungere/modificare anche lì. Voglio anche dire che idealmente l'utente dovrebbe utilizzare il browser del dispositivo. –

risposta

1

Utilizzando un'interfaccia javascript e loadURL (javascript ...) è possibile comunicare con la vostra pagina web da Android

public void loadScript(String script){  
    webview.loadUrl("javascript:(function() { " + script + "})()");    
} 

private class JavaScriptInterface {  
    public void startQRScan() { 
     ... 
    } 
} 

Ci sono molti esempi su google.

+0

Grazie per la risposta. Non sei troppo sicuro di cosa intendi. Non ho molta familiarità con il lato Android. Avrebbe avviato il metodo QRScan dalla pagina web? Quindi la vista di caricamento lo rimanda alla pagina Web? –

+1

Ho cercato su Google un po 'e vedo cosa intendi. Il problema è che speravo di farlo attraverso il browser Android da un sito che è già stato sviluppato e il massimo che posso modificare è l'interfaccia utente e javascript aggiuntivi. Sai se questo può essere fatto senza una visualizzazione Web? –

+0

Mi dispiace, ho pensato che stavi parlando del lato Android. https://github.com/phonegap/phonegap-plugins/tree/master/Android/BarcodeScanner Conosco il supporto per barcode, ma non conosco le specifiche. E per essere completo, sì startQRS può essere richiamabile dalla tua pagina web. Attraverso la finestra "nome javascriptinterface" .startQRScan, ma ciò significherebbe che dovresti codificare in Android. Se vuoi posso pubblicare il codice completo di Android. – ePeace

17

ZXing (strisce pedonali) fornisce la capacità di avviare lo scanner di codici a barre tramite una pagina Web tramite un evento di clic del pulsante, un tag di ancoraggio o altra azione che potrebbe chiamare un URL su un dispositivo mobile.

Quando l'applicazione dello scanner di codici a barre è installata su un dispositivo Android, una chiamata URL:

zxing://scan/?ret=http://foo.com/products/{CODE}/description&SCAN_FORMATS=UPC_A,EAN_13 

, si apre il lettore di codice a barre del dispositivo, l'utente legge il codice e il codice viene restituito tramite il parametro URL di callback fornito nell'URL di zxing.

È possibile visualizzare un esempio (funziona su Android) qui: http://zxing.appspot.com/scan

+2

Google Play app: https://play.google.com/store/apps/details?id=com.google.zxing.client.android Domande frequenti: https://github.com/zxing/zxing/wiki/Scanning -Da-Web-Pages – nepda

+0

Grazie @ michael-jasper .. la tua risposta mi ha aiutato a iniziare con l'integrazione di zxing in una pagina Web di esempio - http://mvark.blogspot.in/2016/03/how-to-scan-barcode -with-android.html – mvark

+0

il callback deve essere codificato in url: zxing: // scan /? ret = http% 3A% 2F% 2Ffoo.com% 2Fproducts% 2F% 7BCODE% 7D% 2Fdescription & SCAN_FORMATS = UPC_A, EAN_13 – nvrandow

1

È possibile utilizzare questa applicazione Android.

https://play.google.com/store/apps/details?id=com.tecit.android.barcodekbd.full&hl=en

Si tratta di un giusto una tastiera normale con un pulsante bel po 'aggiuntiva che si aprirà uno scanner di codici a barre da nessuna parte. La stringa letta dallo scanner di codici a barre viene popolata nel campo di testo dove normalmente la tastiera l'avrebbe inserita.

È molto facile da usare.

+0

hai un'altra applicazione? Perché sto avendo problemi con questa app, specialmente sulla parte di scansione, non mi dà risultati precisi. TIA. – Dale

+0

Hai qualcosa di simile per IOS? –

5

Si può provare questo per Android:

È possibile utilizzare libreria ZXing per la scansione di codici a barre per le pagine web

<!DOCTYPE html> 
    <script type="text/javascript"> 
    //This entire block of script should be in a separate file, and included in each doc in which you want scanner capabilities 
     function zxinglistener(e){ 
      localStorage["zxingbarcode"] = ""; 
      if(e.url.split("\#")[0] == window.location.href){ 
       window.focus(); 
       processBarcode(decodeURIComponent(e.newValue)); 
      } 
      window.removeEventListener("storage", zxinglistener, false); 
     } 
     if(window.location.hash != ""){ 
      localStorage["zxingbarcode"] = window.location.hash.substr(1); 
      self.close(); 
      window.location.href="about:blank";//In case self.close is disabled 
     }else{ 
      window.addEventListener("hashchange", function(e){ 
       window.removeEventListener("storage", zxinglistener, false); 
       var hash = window.location.hash.substr(1); 
       if (hash != "") { 
        window.location.hash = ""; 
        processBarcode(decodeURIComponent(hash)); 
       } 
      }, false); 
     } 
     function getScan(){ 
      var href = window.location.href.split("\#")[0]; 
      window.addEventListener("storage", zxinglistener, false); 
      zxingWindow = window.open("zxing://scan/?ret=" + encodeURIComponent(href + "#{CODE}"),'_self'); 
     } 

    </script> 

    <html> 
     <head> 
      <script type="text/javascript"> 
       function processBarcode(b){ 
        var d = document.createElement("div"); 
        d.innerHTML = b; 
        document.body.appendChild(d); 
       } 
      </script> 
     </head> 
     <body> 
      <button onclick="getScan()">get Scan</button> 
     </body> 
    </html> 

Per riferimento: Read link

Problemi correlati