julienboulay / ngx-barcode-scanner Goto Github PK

When I build my app with BarecodeScannerLivestreamComponent implemented i get the following error:
ERROR TypeError: Cannot read property 'start' of undefined.

This is what I have in my search.component.ts file where I am trying to use BarecodeScannerLivestreamComponent:

  @ViewChild(BarecodeScannerLivestreamComponent)
  barecodeScanner: BarecodeScannerLivestreamComponent;
  barcodeValue;

 ngAfterViewInit() {
    console.log(this.barecodeScanner);
    this.barecodeScanner.start();
  }

  onValueChanges(result) {
    this.barcodeValue = result.codeResult.code;
  }

I also made sure to add BarecodeScannerLivestreamModule in my module.

This error is happening because this.barecodeScanner is undefined. Does anyone know how to overcome this?

@julienboulay could you please open stackblitz demo for this with Barcode & QR code ?

Thanks

I want to change a few options in DEFAULT_CONFIG of quagga, how I can do it?

I tried to scan attached barcode but i am unable to read , Can someone help me on this.

Thanks Advance

sanityCheck(s) {

return s.toUpperCase().match(/^(([0-9]{2})+?)*$/);

}
private getMedian(arr: number[]): number {
arr.sort((a, b) => a - b);
const half = Math.floor(arr.length / 2);
if (arr.length % 2 === 1) // Odd length
return arr[half];
return (arr[half - 1] + arr[half]) / 2.0;
}
isValid(result) {
const errors: number[] = result.codeResult.decodedCodes
.filter( => .error !== undefined)
.map( => _.error);

const median = this._getMedian(errors);

return median < 0.1; //!(median > 0.08 || errors.some(err => err > 0.1))

}
onValueChanges(result): void {
if (this.sanityCheck(result.codeResult.code)) {

  if (this.isValid(result)) {
    this.barcodeValue = result.codeResult.code;
 
    this.validateAndAddBarCode();
  }
}

}

Hi,

I have tried many ways. But unfortunately, none of them worked. Any help here?

Method 1:

  ngAfterViewInit(): void {
    this.barecodeScanner.config.inputStream.constraints.height.min = 240;
  }

Error

instrument.js:109 TypeError: Cannot read property 'inputStream' of undefined
at t.initScanner (scanner-web.component.ts:51)
at t.ngAfterViewInit (scanner-web.component.ts:25)
at sn (core.js:3105)
at rn (core.js:3075)
at en (core.js:3027)
at hi (core.js:7389)
at core.js:8419
at hi (core.js:7342)
at Di (core.js:8465)
at core.js:7126
at hi (core.js:7368)
at core.js:8419
at hi (core.js:7342)
at Di (core.js:8465)
at core.js:7126
at hi (core.js:7368)
at core.js:8419
at hi (core.js:7342)
at Di (core.js:8465)
at core.js:7126
at hi (core.js:7368)
at di (core.js:7432)
at core.js:8637
at zi (core.js:8662)
at us.detectChanges (core.js:9927)
at tick (core.js:28400)
at core.js:28289
at l.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:27486)
at l.invoke (zone-evergreen.js:363)
at a.run (zone-evergreen.js:123)
at Dc.run (core.js:27368)
at Object.next (core.js:28288)
at u.r [as _next] (core.js:24851)
at u.__tryOrUnsub (Subscriber.js:183)
at u.next (Subscriber.js:122)
at c._next (Subscriber.js:72)
at c.next (Subscriber.js:49)
at $l.next (Subject.js:39)
at $l.emit (core.js:24841)
at Vc (core.js:27422)
at Object.onHasTask (core.js:27500)
at l.hasTask (zone-evergreen.js:419)
at l._updateTaskCount (zone-evergreen.js:440)
at a._updateTaskCount (zone-evergreen.js:263)
at a.runTask (zone-evergreen.js:184)
at m (zone-evergreen.js:569)
at invokeTask (zone-evergreen.js:484)
at invoke (zone-evergreen.js:469)
at n.args. (zone-evergreen.js:2552)

Method 2:

.barcode-scanner-livestream-overlay-content {
    height: 240px !important;
}

No effect here too?

Hi,
How is it possible to adapt the barcode scanner with your own css (height / width). I've already tried something but unfortunately without success

Hey, just wanted to know if there are any plans on moving to @ericblade/quagga2 library as the original Quagga lib is not maintained anymore and it has some optimization issues and also has issues with running on newer browsers/devices.

It would be great if we could move to quagga2 as well. Thanks!

Hi,

This is working fine on iOS Safari. But it gives the below error on iOS Chrome. Any help here?

LOGError: getUserMedia is not defined
ERRORError: Uncaught (in promise): Error: getUserMedia is not defined
a@https://my-be385.web.app/5.c963b72d402ba79cb199.js:1:140957
o@https://my-be385.web.app/5.c963b72d402ba79cb199.js:1:146771
o@[native code]
onInvoke@https://my-be385.web.app/main.a0ca28d2e5a97379764b.js:1:330125
run@https://my-be385.web.app/polyfills.8a7ad34546da8efa99a1.js:1:2042
https://my-be385.web.app/polyfills.8a7ad34546da8efa99a1.js:1:12977
onInvokeTask@https://my-be385.web.app/main.a0ca28d2e5a97379764b.js:1:330018
runTask@https://my-be385.web.app/polyfills.8a7ad34546da8efa99a1.js:1:2661
m@https://my-be385.web.app/polyfills.8a7ad34546da8efa99a1.js:1:9243
invokeTask@https://my-be385.web.app/polyfills.8a7ad34546da8efa99a1.js:1:8322
_@https://my-be385.web.app/polyfills.8a7ad34546da8efa99a1.js:1:20553
k@https://my-be385.web.app/polyfills.8a7ad34546da8efa99a1.js:1:20793

3 things:

1. Exist one way to add various types in tag barcode-scanner-livestream ?
2. Its work with a real barcode scanner? only works in my app from the camera no from usb scanner.
3. I have this problem when te app enter in my barcodeReader component:

thanks 4 your great apport.

We often say an image is worth a hundred words. There we go!

I copy-pasted the code from your example written in your README. What do you think about this warning?

i need to read bar codes from my angular web app. I simply followed the steps mentioned in npm.. But after implementing i am getting the below error.

core.js:1673 ERROR Error: Uncaught (in promise): NotFoundError: Requested device not found at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:3811) at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601).

stackoverflow .

Please help...

Hi,

We hope you'll fix those in the future version.

Wrong Spelling

BarecodeScannerLivestreamModule

Correct Spelling

BarcodeScannerLivestreamModule

Not followed the naming convention

BarecodeScannerLivestreamModule

Correct naming convention

BarcodeScannerLiveStreamModule

I use this VS Code extension to avoid those: https://github.com/streetsidesoftware/vscode-spell-checker

ERROR Error: Uncaught (in promise): Error: Type BarcodeScannerLivestreamModule does not have 'ɵmod' property.
Error: Type BarcodeScannerLivestreamModule does not have 'ɵmod' property.

core.js:6479

   ERROR Error: Uncaught (in promise): Error: Type BarcodeScannerLivestreamModule does not have 'ɵmod' property.

Error: Type BarcodeScannerLivestreamModule does not have 'ɵmod' property.
at getNgModuleDef (core.js:1119)
at recurse (core.js:25298)
at recurse (core.js:25309)
at registerNgModuleType (core.js:25294)
at new NgModuleFactory$1 (core.js:25408)
at Compiler_compileModuleSync__POST_R3__ (core.js:28266)
at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (core.js:28271)
at MergeMapSubscriber.project (router.js:3706)
at MergeMapSubscriber._tryNext (mergeMap.js:44)
at MergeMapSubscriber._next (mergeMap.js:34)
at resolvePromise (zone.js:1213)
at resolvePromise (zone.js:1167)
at zone.js:1279
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28692)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at drainMicroTaskQueue (zone.js:582)

Hello!

iOS 14 release broke some interfaces related to getUserMedia, so now ngx-barcode-scanner doesn't work as expected on iOS 14:

serratus/quaggaJS#444
ericblade/quagga2#244

Seems the trouble can be fixed just by omitting aspectRatio or setting it to {min: 1, max: 1}. May i please ask you to fix it or give us the ability to pass aspectRatio to your component? Or maybe entire constraints object. Sure i can do it myself, but im not very familiar with github and its community unspoken rules, and im afraid to break architecture of your project. If you have a minute to guide me a bit about how these changes should be done, i'll sure create a merge request with all the needed changes myself asap,

And a lil question unrelated to this issue, just curious: do you consider using quagga2? Seems original quagga is orphan and unmaintained at the moment,

Thanks in advance!

There is no way to switch between front and back camera.

Hi Team,

I really appreciate your effort, you guys are doing great. I just need your help, if team can provide the following thing: -

1. EventEmitter for started event.

Hoping for a positive response :).

Thank you

QuaggaJS has support to enable or disable the torch: https://serratus.github.io/quaggaJS/examples/live_w_locator.html

would be great if this could be added to this project as well.

Hi
we are using the barcode-scanner-livestream component and it works as expected.
The only Problem we have, is that when use it the following way =>

<barcode-scanner-livestream #39 type="code_39" (valueChanges)="barcodeScannerOnValueChanges($event)"></barcode-scanner-livestream>

whish is calling the following

barcodeScannerOnValueChanges(result) {
   console.log("RESULT>>", result);
   ...
}

the problem is that on the first scan the function is called once, on the second scan twice, on the third scan three times and so on and so on.

does something have to be called after the scan to scan only once?

at the moment we use version 0.0.6 on Angular 9.1.0

Regards
Michael

I'm trying to set the camera input by configuring the deviceId, so I can get the front camera on a tablet:

I took a look on the config sent to quagga which is shown below:

var DEFAULT_CONFIG = {
    inputStream: {
        name: 'Live',
        type: 'LiveStream',
        target: null,
        constraints: {
            width: { min: 640 },
            height: { min: 480 },
            aspectRatio: { min: 1, max: 100 },
            facingMode: 'environment',
        },
        singleChannel: false
    },
    locator: {
        patchSize: 'medium',
        halfSample: true
    },
    locate: true,
    numOfWorkers: 4,
    decoder: {
        readers: ['code_128_reader']
    }
};

What is the correct way to set the deviceId property?

Is it possible with this library to scan a qr-code?

I have scanned 3 different barcodes from things i have in my kitchen, and it doesnt read any of them. Am I missing something? It adds the green square detecting the qr but nothing gets printed on the html nor the console

 onValueChanges(result){
        console.log(result);
        this.barcodeValue = result.codeResult.code;
    }

<barcode-scanner-livestream type="code_128" (valueChanges)="onValueChanges($event)" (started)="onStarted"></barcode-scanner-livestream>
    <div [hidden]="!barcodeValue">
        {{barcodeValue}}
    </div>

type=ean_extended does not work, all others are working:

quagga.min.js:3 * Error constructing reader ean_extended_reader TypeError: Ut[e] is not a constructor
at quagga.min.js:3:76778
at Array.forEach ()
at o (quagga.min.js:3:76593)
at Object.create (quagga.min.js:3:78717)
at t.value (quagga.min.js:3:97964)
at quagga.min.js:3:96698
at ze (quagga.min.js:3:95854)
at quagga.min.js:3:96537
at Object.trigger (quagga.min.js:3:89902)
at quagga.min.js:3:9942

I try to use this plugin in my simple Angular App.

When I test the app with localhost, it works well.
But, when I deploy the app to my phone and run it, this error occured... 😢

vendor-es2015.js:112899 DOMException: Could not start video source
vendor-es2015.js:41322 ERROR Error: Uncaught (in promise): NotReadableError: Could not start video source
    at resolvePromise (polyfills-es2015.js:3904)
    at polyfills-es2015.js:3811
    at rejected (vendor-es2015.js:124404)
    at ZoneDelegate.invoke (polyfills-es2015.js:3470)
    at Object.onInvoke (vendor-es2015.js:73024)
    at ZoneDelegate.invoke (polyfills-es2015.js:3469)
    at Zone.run (polyfills-es2015.js:3229)
    at polyfills-es2015.js:3963
    at ZoneDelegate.invokeTask (polyfills-es2015.js:3505)
    at Object.onInvokeTask (vendor-es2015.js:73002)

And when I click vendor-es2015.js:112899, I could find the error came from here

The current interface definition for QuaggaConfig does not accurately match the available options in the QuaggaJSConfig interface.

This leads to type errors when trying to pass a config object to barcode-scanner-livestream component.

Can we extend the QuaggaConfig interface or properly replicate the QuaggaJSConfig interface?

Component

import { QuaggaConfig } from 'ngx-barcode-scanner/lib/barcode-scanner-livestream/barcode-scanner-livestream.config';
import { BarecodeScannerLivestreamComponent } from 'ngx-barcode-scanner';

    @ViewChild(BarecodeScannerLivestreamComponent)
  barcodeScanner: BarecodeScannerLivestreamComponent;

  // Commented config options below give type errors
  public config: QuaggaConfig = {
    inputStream: {
      name: "Live",
      type: "LiveStream",
      target: null,
      constraints: {
        width: { min: 640 },
        height: { min: 480 },
        aspectRatio: { min: 1, max: 2 },
        facingMode: "environment",
        deviceId: null
      },
      singleChannel: false
    },
    // frequency: 10,
    // debug: true,
    locator: {
      patchSize: "large",
      halfSample: true
      /*           debug: {
            showCanvas: true,
            showPatches: true,
            showFoundPatches: true,
            showSkeleton: true,
            showLabels: true,
            showPatchLabels: true,
            showRemainingPatchLabels: true,
            boxFromPatches: {
              showTransformed: true,
              showTransformedBox: true,
              showBB: true
            }
          } */
    },
    locate: true,
    numOfWorkers: 4,
    decoder: {
      readers: ["code_128_reader"]
    }
  };

  public startScanner(): void {
    this.barcodeScanner.start();
  }

Template

    <button (click)="startScanner()">Start</button>
    <barcode-scanner-livestream
      type="code_128"
      [config]="config"
    ></barcode-scanner-livestream>

After update to latest version ("0.0.10") I get compile error:

`ERROR in The target entry-point "ngx-barcode-scanner" has missing dependencies:

• lodash.defaultsdeep`

Right now, i am reading a lot of values, but sometimes, they are diferents for the same material.

component.ts:
...
onValueChanges(result) {
console.log(result);
this.barcodeValue = result.codeResult.code;
}
...
component.html
...

There is some explanation for that to happen?

This should probably be updated for Angular 8 at some point.

Can someone post a Demo? I tried follow the steps in "Usage" but nothing happened

Is it posible to set the device / camera to be used? (using deviceId)

Description: When using the BarcodeScannerLivestreamOverlayComponent and camera access is blocked the overlay is not hidden or no event is provided to handle the "ERROR Error: Uncaught (in promise): NotAllowedError: Permission denied".

Steps to reproduce:

1. Navigate to barcode scanner with overlay demo page (link)
2. Click "Scan codebar with overlay window" button.
3. When prompted to grant permission for camera access, click "Block".

Actual result:

1. Camera does not open (as expected), but the overlay does not go away (not desired).
2. Error visible in developer console "ERROR Error: Uncaught (in promise): NotAllowedError: Permission denied"

Expected result:

1. Either overlay should be hidden or an event should be provided to handle the error.

When this.barecodeScanner.hide(); is called, nothing happens.

In barcode-scanner-livestream.component.js (node_modules) line 54, stop function should look like this:
stop() {
if (this._started) {
this.stop();
Quagga.stop();
this._started = false;
this.started.next(false);
}
}

this.stop(); should fix issue.

I tried to test it and follow the steps but I am getting this error:

quagga.min.js:formatted:1 ERROR Error: Uncaught (in promise): NotAllowedError: Permission denied
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (quagga.min.js:formatted:1)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

I am using it with regular Chrome Browser and USB Barcode reader

Hi.
My barcodescanner emulates a keyboard - i tried the code under "Usage" but the event did not trigger - is there a separate type to use with regular keyboard input? Or is perhaps easier in this case to just use @HostListener ?

I tried to use other format but it seems not working..Are other fornat supported?

Hi, I'm gettin gsome trubles when I want to work with the overlay

in console throwme

This likely means that the library (ngx-barcode-scanner) which declares BarcodeScannerLivestreamOverlayComponent has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy

Is there a way to fix it?

Thanks

Hi, I am not able to scan some sample barcodes (code 128) using the mobile device camera whereas we are able to scan it using the laptop's webcam.
Do I need to change/update any configuration to support the mobile device?
Actual the barcode images are too small and with low-resolution quality.
sample barcode:
https://determined-fermi-064edc.netlify.app/not-working2.jpg

Which are the barcode formats supported by ngx-barcode-scanner?

Hello!

I need to change 2 little things in your component:

1. In start procedure return the promise that _init returns, i need this in order to manually catch errors that can occur during initialization,
2. In onDetected return the whole result object instead of result.codeResult.code, i need it in order to be able to analyze errors in result.codeResult.decodedCodes as described here.

I cloned the project, executed npm i and the troubles started to occure right there. I think there's no need to list all the errors that occured, there were hella lot of them - with npm, with angular, with typescript, with everything; i struggled for hours to make it work but no luck.

Can you please help me with it?

Thanks in advance!

In QuaggaJS there is an option to change the frequency of scans, but I'm not able to set the frequency in the config property from my component.ts (Even if I set the frequency in config, it doesn't work).

Hi,

I have problems readind the code 39  from any mobile device.

I updated my code from Angular version 5 to 11 and now I am using the last version of ngx-barcode-scanner 0.2.0 but the problem remain the same: Seem it is a problem with the resolution of the mobile's camara becouse I see fuzzy the image when the camara is actived.

I tried too with the following other libraries: Quagga, Quagga2 and ngx-zxing. 

Anybody can help me?

Thanks and Best Regards,

Originally posted by @ludovaldivia in #53 (comment)

Hello,

i just implemented your scanner and it appears to be not working on Safari iOS 12. And it seems to be not working on Firefox on iOS too.

Am i doing something wrong?
Any help is appreciated.

Kind regards
Arnd

ERROR in ./node_modules/ngx-barcode-scanner/fesm5/ngx-barcode-scanner.js
Module not found: Error: Can't resolve 'quagga' in 'C:\Users\Norm\Dropbox\Norm\Documents\Visual Studio Code\AMZSC_FrontEnd\node_modules\ngx-barcode-scanner\fesm5'

I installed quagga but got same error

I want barcode-live-streaming set to detect multiple type of barcode.
How to set multiple type in "type" atributte ? I tried with coma (,) separator, but it doesnt work.

How can I configure space taken by camera on screen? Currently, it occupies pretty much the whole screen. How can I allocate a, say 400 x 400 pixel area for bar code live stream output? Thanks.

Actually not a issue but a question: Does is support EAN13? I've tried all the EAN types but it detects only rubbish...

thanks

Hi Team,

You guys are doing a great job and I appreciate your work.

I just wanted to inform the team that when I am scanning the barcode created for A:ASN-12:19-000064 then scanner is not able to read and sometimes it does but it returns garbage value.

I tried to scan from the website on the following devices -
OnePlus7
Dell laptop
Microsoft Surface

It would be a great help if the team get a chance to fix this issue?

Thank you

I was wondering if a way exists that I could scan a provided image from just the component?

Hi,

I have problems readind the code 39  from any mobile device.

I updated my code from Angular version 5 to 11 and now I am using the last version of ngx-barcode-scanner 0.2.0 but the problem remain the same: Seem it is a problem with the resolution of the mobile's camara becouse I see fuzzy the image when the camara is actived.

I tried too with the following other libraries: Quagga, Quagga2 and ngx-zxing. 

Anybody can help me?

Thanks and Best Regards,

Originally posted by @ludovaldivia in #53 (comment)

On computer, it works approximatly (I have bad camera) but on mobile phone, the camera just doesn't load