barcode scanner

**Kahm** · 12-03-2021, 08:45

Originariamente inviata da U235

Ciao Kahm,
cosa ti aspetti che faccia? hai fatto una prova per vedere se quando stai nella pagina (col focus fuori dall'input in cui va messo il barcode) a sparare un barcode in emulazione tastiera? questo dovrebbe far comparire nel box input il barcode. Almeno mi pare di capire che dovrebbe funzionare così. Oltre questo controlla che in un arco temporale di x (impostato da te) siano "digitati" x caratteri che siano di tipo x (numerici).
Però ovviamente se digiti direttamente col focus nell'input quello scrive comunque, non c'è nulla che cancelli mi pare.
Poi questo leggendo alla bene meglio il codice, magari mi sfugge qualcosa.

mi aspetto che se usato da cellulare, mi appaia la fotocamera e mi faccia scannerizzare qualcosa
esiste un prodotto del genere in HTML?

**alka** · 12-03-2021, 09:55

Originariamente inviata da Kahm

mi aspetto che se usato da cellulare, mi appaia la fotocamera e mi faccia scannerizzare qualcosa
esiste un prodotto del genere in HTML?

Potevi dirlo subito che lo scenario era quello di un utilizzo da dispositivo mobile.

Non esiste nulla del genere in HTML standard: se acquisisci una fotografia, qualcuno o qualcosa dovrà poi analizzarla per determinare qual è il codice raffigurato all'interno; se invece si presuppone di utilizzare una applicazione di terze parti esterna, questa dovrà essere prima installata, e poi lanciata dall'applicazione client (usando ad esempio un "Intent" in Android) e si dovrà andare a raccogliere il dato di risposta (che è il codice), ma per questo occorre una app con gli opportuni diritti.

In assenza di questi strumenti, l'alternativa è quella di fare l'upload della foto acquisita dalla pagina e spostare il riconoscimento del codice lato server, che potrebbe funzionare ma richiede più passaggi.

In due parole, meglio fare l'upload con una applicazione non-Web, quindi nativa e realizzata con un compilatore (per Android e/o iOS) oppure Web ma basata su framework tipo Electron che producono poi un'applicazione (quindi in JavaScript ti forniscono funzionalità aggiuntive).

In passato ho fatto una semplice app "Barcode Reader" in Delphi in 10 minuti che tramite la funzionalità di "AppTethering" (quasi zero codice) passava l'informazione a un'applicazione desktop su Windows, in poche parole rendendo il cellulare un lettore di codici come se fosse un'estensione dell'applicazione desktop.

Ciao!

**U235** · 12-03-2021, 13:45

Originariamente inviata da Kahm

mi aspetto che se usato da cellulare, mi appaia la fotocamera e mi faccia scannerizzare qualcosa
esiste un prodotto del genere in HTML?

Esistono prodotti che ti consentono di prendere in input una immagine e ti restituiscono i/il codice a barre eventualmente trovato, il problema spesso è la qualità. In ogni caso fartelo da te non è impossibile ma nemmeno semplicissimo.

Lato client ovviamente non è necessario installare nulla se vuoi usare il browser, basta usare la webcam con html5, ma l'elaborazione dell'immagine dovrai farla lato server.
Per cui una cosa del genere per quello che riguarda lato client:

(codice preso dal web e rielaborato per questa occasione):

codice:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="camera">
        <video id="video">Video stream not available.</video>
        <button id="startbutton">Take photo</button>
    </div>
    <canvas id="canvas">
    </canvas>
    <div class="output">
        <img id="photo" alt="The screen capture will appear in this box.">
    </div>
    <input id="output" />
    <script>
        var width = 320;    // We will scale the photo width to this
        var height = 0;     // This will be computed based on the input stream


        var streaming = false;


        var video = null;
        var canvas = null;
        var photo = null;
        var startbutton = null;
        startup();
        function startup() {
            video = document.getElementById('video');
            canvas = document.getElementById('canvas');
            photo = document.getElementById('photo');
            startbutton = document.getElementById('startbutton');
            navigator.mediaDevices.getUserMedia({ video: true, audio: false })
                .then(function (stream) {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function (err) {
                    console.log("An error occurred: " + err);
                });
            video.addEventListener('canplay', function (ev) {
                if (!streaming) {
                    height = video.videoHeight / (video.videoWidth / width);


                    video.setAttribute('width', width);
                    video.setAttribute('height', height);
                    canvas.setAttribute('width', width);
                    canvas.setAttribute('height', height);
                    streaming = true;
                }
            }, false);
            startbutton.addEventListener('click', function (ev) {
                takepicture();
                ev.preventDefault();
            }, false);
            clearphoto();
        }
        function clearphoto() {
            var context = canvas.getContext('2d');
            context.fillStyle = "#AAA";
            context.fillRect(0, 0, canvas.width, canvas.height);
            var data = canvas.toDataURL('image/png');
            photo.setAttribute('src', data);
        }
        function takepicture() {
            var context = canvas.getContext('2d');
            if (width && height) {
                canvas.width = width;
                canvas.height = height;
                context.drawImage(video, 0, 0, width, height);


                var data = canvas.toDataURL('image/png');
                photo.setAttribute('src', data);
                fetch("/api/barcode", {
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    method: "POST",
                    body: JSON.stringify({ value: data })
                }).then(res => {
                    document.getElementById("output").value = res;
                });
            } else {
                clearphoto();
            }
        }
    </script>
</body>
</html>

Webapi in cui dovrai integrare il lettore:

codice:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;


namespace BarcodeWebAPI.Controllers
{
    public class BarcodeController : ApiController
    {
        [HttpPost]
        public Parameter Post([FromBody] Parameter img)
        {
            Image image = LoadBase64(img.value);
            //codice per la scansione in cui usare l'immagine in arrivo, di solito una cosa del genere:
            var result = BarcodeScanner.Scan(image);
            //
            
            return new Parameter() { value = result };
        }
        public static Image LoadBase64(string base64)
        {
            var data = base64.Split(',').Last();
            byte[] bytes = Convert.FromBase64String(data);
            Image image;
            using (MemoryStream ms = new MemoryStream(bytes))
            {
                image = Image.FromStream(ms);
            }
            return image;
        }
    }


    public class Parameter
    {
        public string value { get; set; }
    }
}

**Kahm** · 12-03-2021, 14:11

Originariamente inviata da U235

Esistono prodotti che ti consentono di prendere in input una immagine e ti restituiscono i/il codice a barre eventualmente trovato, il problema spesso è la qualità. In ogni caso fartelo da te non è impossibile ma nemmeno semplicissimo.

Lato client ovviamente non è necessario installare nulla se vuoi usare il browser, basta usare la webcam con html5, ma l'elaborazione dell'immagine dovrai farla lato server.
Per cui una cosa del genere per quello che riguarda lato client:

grazie per l'aiuto
purtoppo devono girare per delle stanze senza connessione internet
esiste un file .jar (di java) da utilizzare in android con HTML5?

grazie

**alka** · 12-03-2021, 14:34

Originariamente inviata da Kahm

esiste un file .jar (di java) da utilizzare in android con HTML5?

Purtroppo HTML5 in questo caso c'entra poco: il problema è che i browser mobile (recenti) non supportano la tecnologia necessaria a far eseguire applet Java, così come applicazioni Silverlight, da qualche tempo Flash e tutte le tecnologie assimilabili, che sono cadute in disuso addirittura anche sul desktop.

Come anticipato in una risposta precedente, occorre creare un app.

**U235** · 12-03-2021, 16:30

Originariamente inviata da Kahm

grazie per l'aiuto
purtoppo devono girare per delle stanze senza connessione internet
esiste un file .jar (di java) da utilizzare in android con HTML5?

grazie

Perché con html5 se lo fai nativo? a quel punto non ti serve passare per un browser per ottenere le immagini.
A meno che non usi roba tipo Cordova, ma li credo ci siano delle api che ti permettono comunque un minimo di controllo in più tramite l'app nativa che fa girare il tuo html.

**Kahm** · 12-03-2021, 16:43

Originariamente inviata da U235

Perché con html5 se lo fai nativo?

non penso che nativamente html5 per android sia predisposto a leggere barcode
se SI, non so come chiamarle la funzione

**alka** · 12-03-2021, 17:44

Originariamente inviata da Kahm

non penso che nativamente html5 per android sia predisposto a leggere barcode

Infatti, non lo è.

Originariamente inviata da Kahm

se SI, non so come chiamarle la funzione

Non c'è questa funzione: o ti appoggi a qualcosa lato server che ti elabora l'immagine come informazione, oppure invece di un sito crei un app.

L'app può essere sempre scritta in HTML5, ma usando (come ti ha suggerito già U235) dei framework che estendono le funzionalità a disposizione lato JavaScript in quanto la tua pagina Web verrà ospitata all'interno di un browser custom con feature addizionali rispetto a quelle di un comune browser (e potrai accedere alle risorse hardware del dispositivo direttamente); in alternativa, usi un linguaggio (come Delphi, Flutter, Xamarin, ecc.) per scrivere un'app vera e propria.

Altre strade non ci sono.

**U235** · 12-03-2021, 19:33

Originariamente inviata da Kahm

non penso che nativamente html5 per android sia predisposto a leggere barcode
se SI, non so come chiamarle la funzione

Francamente non saprei, ma non mi sembra che html5 abbia una API per il barcode, e anche ammettendo che esita non saprei se i browser che sono supportati in android supportino questa eventuale API. per cui non saprei neppure come richiamare l'API.

So che esiste il supporto per la fotocamera, ma poi l'immagine va elaborata da qualcosa, e nel tuo caso non può essere il server perché lavori offline. Diversamente puoi immagazzinare i dati e scaricarli quando online, ma a meno che non trovi il modo di elaborare l'immagine in locale (sul device), questa soluzione non è praticabile, se no rischi di fare avanti e indietro a riprendere quelle che non riesce ad elaborare il server.
Non se se esiste un lettore barcode che lavora sul client in javascript, so che esiste qualcosa sulla computer vision, ma non l'ho mai utilizzata e credo sia spropositata in questo caso. Quindi escluderei la soluzione html+framework più che altro per non avere server d'appoggio e perché so che conosci NET e penso che alla fine potrebbe anche essere un buon investimento conoscere Xamarin. Tanto anche usando "eventuali" API del framework dovrai imparare qualcosa, magari potrebbe essere vantaggioso spendere qualcosa in più sul nativo. Alla fine potresti fare anche entrambi se ti spaventa Xamarin, ovvero fai tutto in html5 e la sola parte per la lettura con Xamarin, poi una volta preso i codici (vedi subito se non è stato trovato il barcode ad esempio) li scarichi quando sei online. E come diceva prima Alka aumenti sempre più i passaggi...

Avrai capito, ti consiglio Xamarin o comunque un app nativa.

Discussione: barcode scanner

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio