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

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  

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
>

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

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

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

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

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