Is this package still in maintining state ?

[Razgort]

Hello, Can yu guys let me know if this package is maintained or not? I wan't to be able to read qrcode with my application using quagga2 in angular. i'm not achieving to scan qr code with this package : decoder: { readers: ['ean_reader', 'qrcode'], multiple: false }, do you see anything i have done wrong ? Thx in advance

[ericblade]

Hi there! I.. definitely need to get back to finishing out documenting this and such, but yes, i'm still here. :)

The important bits over and above regular usage with quagga2 are highlighted

This is from https://github.com/ericblade/quagga2-reader-qr/blob/master/example/src/App.tsx

[Razgort]

Hello, Thanks for your answer, i've done what yu did already Here is what i've done so far but it is working for barcode and not working with qrcode, note that to work with barcode i have to change the decoder reader to readers: ['ean_reader'] otherwise with the reader you highlight it is not working at all, (there is many duplicate code because i've tested mutliple plugins and co) ` ngOnChanges(changes: SimpleChanges): void { this.notificationsService.success(changes.toString()) console.log(changes) } ngAfterViewInit() { if ( !navigator.mediaDevices || !(typeof navigator.mediaDevices.getUserMedia === 'function') ) { this.errorMessage = 'getUserMedia is not supported' return }

this.initializeScanner()

if (environment.production) {
  setTimeout(() => {}, 10000)
}

}

private initializeScanner(): Promise { if ( !navigator.mediaDevices || !(typeof navigator.mediaDevices.getUserMedia === 'function') ) { this.errorMessage = 'getUserMedia is not supported. Please use Chrome on Android or Safari on iOS' this.started = false return Promise.reject(this.errorMessage) }

// enumerate devices and do some heuristics to find a suitable first camera
return Quagga.CameraAccess.enumerateVideoDevices()
  .then(mediaDeviceInfos => {
    const mainCamera = getMainBarcodeScanningCamera(mediaDeviceInfos)
    if (mainCamera) {
      console.log(
        `Using ${mainCamera.label} (${mainCamera.deviceId}) as initial camera`
      )
      return this.initializeScannerWithDevice(mainCamera.deviceId)
    } else {
      console.error(
        `Unable to determine suitable camera, will fall back to default handling`
      )
      return this.initializeScannerWithDevice(undefined)
    }
  })
  .catch(error => {
    this.errorMessage = `Failed to enumerate devices: ${error}`
    this.started = false
  })

}

private initializeScannerWithDevice( preferredDeviceId: string | undefined ): Promise { console.log(Initializing Quagga scanner...)

const constraints: MediaTrackConstraints = {}
if (preferredDeviceId) {
  // if we have a specific device, we select that
  constraints.deviceId = preferredDeviceId
} else {
  // otherwise we tell the browser we want a camera facing backwards (note that browser does not always care about this)
  constraints.facingMode = 'environment'
}

return Quagga.init(
  {
    inputStream: {
      type: 'LiveStream',
      constraints,
      area: {
        // defines rectangle of the detection/localization area
        top: '25%', // top offset
        right: '10%', // right offset
        left: '10%', // left offset
        bottom: '25%' // bottom offset
      },
      target: document.querySelector('#scanner-container') ?? undefined
    },
    decoder: {
      readers: ['code_128_reader', 'qrcode']
    },
    locate: true,
    locator: {
      patchSize: 'medium',
      halfSample: true
    }
    // See: https://github.com/ericblade/quagga2/blob/master/README.md#locate
  },
  err => {
    if (err) {
      console.error(`Quagga initialization failed: ${err}`)
      this.errorMessage = `Initialization error: ${err}`
      this.started = false
    } else {
      console.log(`Quagga initialization succeeded`)
      Quagga.start()
      this.started = true
      this.changeDetectorRef.detectChanges()
      Quagga.onDetected(res => {
        if (res.codeResult.code) {
          this.onBarcodeScanned(res.codeResult.code)
        }
      })
    }
  }
)

}

onBarcodeScanned(code: string) { alert(code) console.log(code) // ignore duplicates for an interval of 1.5 seconds const now = new Date().getTime() if ( code === this.lastScannedCode && this.lastScannedCodeDate !== undefined && now < this.lastScannedCodeDate + 1500 ) { return }

this.lastScannedCode = code
this.lastScannedCodeDate = now
this.beepService.beep()
this.changeDetectorRef.detectChanges()

}

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

onStarted(started) { this.notificationsService.success(started) console.log(started) } onCodeResult(resultString: string) { if (resultString !== undefined && resultString !== 'undefined') { this.QuickVerifString = resultString const props = { QuickVerifString: '123456', correlationParam: new CorrelationParams() } this.store$.dispatch(AuthStore.AuthActions.QuickLogin(props)) } } onError(error: any) { console.error(error) this.isError = true } receiveScanEventOLD($event) { this.store$.dispatch( AuthStore.AuthActions.QuickLogin({ QuickVerifString: $event }) ) } receiveScanEvent(event) { this.qrResultString = event alert(this.qrResultString) } changerEtat() {}

HasDevices(event) { this.hasDevices = event }

HasPermission(event) { this.hasPermission = event } receiveImageStringEvent(_$event) { // console.log($event) } ngOnInit(): void { this.initParams() }

initParams() {} /**

• Called once, before the instance is destroyed. */ ngOnDestroy() {}`

[Razgort]

also when i add the qrcode scanner, the standart 1d code bar stop being read

[ericblade]

I think you had some cut-and-paste errors in that, I can't really make sense out of what's going on in that message.

Do you have a github repo with your code that I could look at?

This has honestly not been very well tested -- I've never actually hosted it, but the built-in tests all work (or at least did last time i built them) in node and browser, and there are other people who appear to have had it working. I have never had a use in my life to scan a Qr code, so it's not something I'm able to test well. Also, the intent here is to provide a most minimal example of how to build a new reader, this has not ever been put through major testing to figure out if it works well.

[ericblade]

I just did some maintenance to this repo that validates that the example app inside here and the cypress test are all in currently working order.