Closed Razgort closed 10 months ago
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
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
// 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
): PromiseInitializing 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() {} /**
also when i add the qrcode scanner, the standart 1d code bar stop being read
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.
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.
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