Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 8 of 8 total
Thread Integration with QuaggaJS or other tools reading a barcode
Sun, Dec 11 2016 4:37 PMPermanent Link

Bill

Hi all,
I'm just searching a quick way to show to a potential customer that I can do (using EWB) an app that permit using a smartphone to get infos on products reading their barcode.
I found QuaggaJS that promises to find a barcode from live cam.
Is there any experience on doing that?
Thanks in advance
Sun, Dec 11 2016 8:29 PMPermanent Link

erickengelke

Avatar

Bill wrote:

>I'm just searching a quick way to show to a potential customer that I can do (using EWB) an app that permit using a smartphone to get infos on products reading their barcode.
I found QuaggaJS that promises to find a barcode from live cam.
Is there any experience on doing that?
Thanks in advance

I show how to use Camera and a few other PhoneGap features in my book.  Extending it to use QuaggaJS should be minor once you see how to do it.

E  
Mon, Dec 12 2016 3:19 AMPermanent Link

Chris Holland

SEC Solutions Ltd.

Avatar

Team Elevate Team Elevate

I have used Barcode scannign in my application that I build with
Cordova/Phonegap.

I have attached the two files that you need to show how easy it is.

Chris Holland
[Team Elevate]

On 12/12/2016 01:29, erickengelke wrote:
> Bill wrote:
>
>> I'm just searching a quick way to show to a potential customer that I can do (using EWB) an app that permit using a smartphone to get infos on products reading their barcode.
> I found QuaggaJS that promises to find a barcode from live cam.
> Is there any experience on doing that?
> Thanks in advance
>
> I show how to use Camera and a few other PhoneGap features in my book.  Extending it to use QuaggaJS should be minor once you see how to do it.
>
> E
>



Attachments: BarcodeInterface.wbs Barcode.js
Mon, Dec 12 2016 3:54 PMPermanent Link

Emin

I have customized Chris Holland's previously shared code as below, and it work fine:

================ DvlBarcodeScanner================
unit DvlBarcodeScanner;

interface

uses WebCore

{$IFNDEF DESIGN}
, WebDOM, DvlCordovaInterface;
{$ELSE}
;
{$ENDIF}

type

  TDvlBarcodeScanner = class(TComponent)
     private
        FBarcode: string;
        FFormat: string;
        FPrompt: string;
        FOnScannerSuccess: TNotifyEvent;
        {$IFNDEF DESIGN}
        FConfig: TBarcodeScannerConfig;
        procedure ScannerSuccessEvent(result: TBarcodeScannerResult);
        procedure ScannerErrorEvent;
        {$ENDIF}
     protected
     public              
        {$IFNDEF DESIGN}
        property Config: TBarcodeScannerConfig read FConfig;
        {$ENDIF}
        property Barcode: string read FBarcode;
        property Format: string read FFormat;
        constructor Create(AOwner: TComponent); override;
        destructor Destroy; override;             
        {$IFNDEF DESIGN}
        procedure Scan;
        {$ENDIF}
     published
        property Prompt: string read FPrompt write FPrompt;
        property OnScannerSuccess: TNotifyEvent read FOnScannerSuccess write FOnScannerSuccess;
     end;

implementation

{$IFNDEF DESIGN}
procedure TDvlBarcodeScanner.ScannerSuccessEvent(result: TBarcodeScannerResult);
begin
  if not result.cancelled then
  begin
     FBarcode := result.text;
     FFormat  := result.format;
     if Assigned(FOnScannerSuccess) then
        FOnScannerSuccess(Self);
  end;
end;

procedure TDvlBarcodeScanner.ScannerErrorEvent;
begin
end;

procedure TDvlBarcodeScanner.Scan;
begin
  FBarcode := '';
  FFormat := '';
  FConfig.prompt := FPrompt;
  cordovaScanBarcode(ScannerSuccessEvent, ScannerErrorEvent, FConfig);
end;
{$ENDIF}

constructor TDvlBarcodeScanner.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  {$IFNDEF DESIGN}
  FConfig := TBarcodeScannerConfig.Create;
  FConfig.preferFrontCamera := False;
  FConfig.showFlipCameraButton := True;
  FConfig.orientation := 'landscape';
  {$ENDIF}
end;
  
destructor TDvlBarcodeScanner.Destroy;
begin                  
  {$IFNDEF DESIGN}
  FConfig := nil;
  {$ENDIF}
  inherited Destroy;
end;

end.

================ DvlCordovaInterface ================
unit DvlCordovaInterface;

interface

uses WebCore

{$IFNDEF DESIGN}
, WebDOM;
{$ELSE}
;
{$ENDIF}

type
  TPhoneGapLifecycleEventListener = procedure of object;

  external TBarcodeScannerConfig emit Object = class
  public
     property preferFrontCamera: Boolean read write;
     property showFlipCameraButton: Boolean read write;
     property prompt: string read write;
     property formats: string read write;
     property orientation: string read write;
  end;                                       

  external TBarcodeScannerResult emit Object = class
  public
     property text: string read write;
     property format: string read write;
     property cancelled: Boolean read write;
  end;

  TBarcodeScannerSuccessEvent = procedure(result: TBarcodeScannerResult) of object;
  TBarcodeScannerErrorEvent = procedure of object;

  external procedure addPhoneGapLifecycleEventListener(eventName: string; eventListener: TPhoneGapLifecycleEventListener);
  external procedure cordovaScanBarcode(successHandler: TBarcodeScannerSuccessEvent; errorHandler: TBarcodeScannerErrorEvent; config: TBarcodeScannerConfig);

implementation

end.

===================== cordova_interface.js =====================
function addPhoneGapLifecycleEventListener(eventName, eventListener)
{
   document.addEventListener(eventName, eventListener, false);
}

function cordovaScanBarcode(successHandler, errorHandler, config)
{   
   cordova.plugins.barcodeScanner.scan(successHandler, errorHandler, config);
}
Fri, Sep 21 2018 2:41 PMPermanent Link

erickengelke

Avatar

Chris Holland wrote:
>I have used Barcode scannign in my application that I build with
>Cordova/Phonegap.

I thought I'd revisit this.

Is there any new browser features we could cleverly use to make this work without having to use cordova and install an app?  

Like WebRTC is probably overkill.  Is there another photographing option, I thought I squirreled one into my brain
a few months ago, now I'm trying to remember it.

Erick
Fri, Sep 21 2018 2:44 PMPermanent Link

erickengelke

Avatar

erickengelke wrote:

Chris Holland wrote:
>>I have used Barcode scannign in my application that I build with
>>Cordova/Phonegap.

>I thought I'd revisit this.

>Is there any new browser features we could cleverly use to make this work without having to use cordova and >install an app?  

Like WebRTC is probably overkill.  Is there another photographing option, I thought I squirreled one into my brain
a few months ago, now I'm trying to remember it.

I think it is WebRTC after all.
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos


Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Fri, Sep 21 2018 2:46 PMPermanent Link

erickengelke

Avatar

erickengelke wrote:

>Like WebRTC is probably overkill.  Is there another photographing option, I thought I squirreled one into my brain
>a few months ago, now I'm trying to remember it.

> think it is WebRTC after all.
>https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

Sample barcode reader using WebRTC found.
https://gist.github.com/yhatt/ae97383213725101086c26d0383aa5d0

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
EWB Programming Books and Component Library
http://www.erickengelke.com
Sat, Sep 22 2018 10:37 AMPermanent Link

erickengelke

Avatar

erickengelke wrote:

> Sample barcode reader using WebRTC found.
> https://gist.github.com/yhatt/ae97383213725101086c26d0383aa5d0

I've experimented with several bar code reader packages. Many don't do well if you are at any angle. Quagga.JS was the best I found, it works at any angle but it's still not great as it generates a lot of false values.  

The problem has to do with cameras not really being designed for barcodes, it's more of a laser thing.  I tried reading off cylindrical and other shapes, and the camera was very poor in moderate light conditions.

Instead, I'd encourage people to use QR codes, which are very reliable at everyday indoor lighting, and with moderate sizes of roughly 2.5 cm x 2.5 cm, or 1"x1" or larger.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Image