barcode scanner

[Kahm]

salve a tutti, sono alla ricerca di uno scanner barcode da far funzionare via web, specialmente da cellulare
ho trovato qulcosa qui : https://github.com/Glideh/jquery-code-scanner
ma proprio non ne vuole sapere di funzionare, ho persino provato a fare una prova nel mio spazio web
http://www.suale.it/barcode/barcode2/index.html
niente da fare

cosa suggerite? eppure non da neanche errore
grazie

[linoma]

...una volta lavoravano in emulazione tastiera. Funziona nella sua suite?

[U235]

salve a tutti, sono alla ricerca di uno scanner barcode da far funzionare via web, specialmente da cellulare
ho trovato qulcosa qui : https://github.com/Glideh/jquery-code-scanner
ma proprio non ne vuole sapere di funzionare, ho persino provato a fare una prova nel mio spazio web
http://www.suale.it/barcode/barcode2/index.html
niente da fare

cosa suggerite? eppure non da neanche errore
grazie

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.

[alka]

ho trovato qulcosa qui : https://github.com/Glideh/jquery-code-scanner
ma proprio non ne vuole sapere di funzionare

Se analizzi il codice sorgene del plugin che stai utilizzando, ti accorgerai che banalmente intercetta i tasti sul controllo di input designato, generando a propria volta un evento quando viene raggiunto nel tempo previsto (tarabile) il numero di caratteri minimo configurato, con diversi default preimpostati.

Questo vuol dire che la libreria non fa nulla di particolare, ovvero il codice deve essere letto in emulazione di tastiera, come se i tasti venissero digitati velocemente, e quindi il focus deve trovarsi sul controllo di input al momento della scansione; eventualmente puoi aggiungere l'attributo autofocus sul controllo in modo che venga evidenziato al caricamento della pagina.

Ciao!

[U235]

Se analizzi il codice sorgene del plugin che stai utilizzando, ti accorgerai che banalmente intercetta i tasti sul controllo di input designato, generando a propria volta un evento quando viene raggiunto nel tempo previsto (tarabile) il numero di caratteri minimo configurato, con diversi default preimpostati.

Questo vuol dire che la libreria non fa nulla di particolare, ovvero il codice deve essere letto in emulazione di tastiera, come se i tasti venissero digitati velocemente, e quindi il focus deve trovarsi sul controllo di input al momento della scansione; eventualmente puoi aggiungere l'attributo autofocus sul controllo in modo che venga evidenziato al caricamento della pagina.

Ciao!

Giusto, hai ragione, è sull'elemento il controllo.

$('#code-scan').codeScanner()

[Kahm]

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]

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]

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):

<!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:

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; }
    }
}

[U235]

.

[Kahm]

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