capawesome-team / capacitor-mlkit

⚡️ ML Kit plugins for Capacitor. Supports Android and iOS.
https://capawesome.io/plugins/mlkit/
Apache License 2.0
147 stars 43 forks source link

feat: pauseScanning and resumeScanning #180

Closed anusha-kaparapu closed 1 month ago

anusha-kaparapu commented 2 months ago

Plugin(s)

Current problem

In our project, we have to validate barcode scans in the background while the user is still scanning them. If the validation is invalid, we have to force the user to restart the scanning process rather than aborting it.

We must halt and continue scanning events in order to achieve this.

Preferred solution

pauseScanning and resumeScanning events is required.

Alternative options

No response

Additional context

ionic - 8 Capacitor - 6 @capacitor-mlkit/barcode-scanning - 6.1.0 FYI @robingenz, @JanMisker, @trancee, @jcesarmobile is there any plan to do for feature requests. let me know if any additional details.

Before submitting

JanMisker commented 2 months ago

In my projects I remove() the listener I get from BarcodeScanner.addListener to force a pause. Basically the scanSingleBarcode from the Usage example.

anusha-kaparapu commented 2 months ago

Thank you for your response, @JanMisker . However, in our project, we incorporated validations such as "Serial number is not valid" while scanning the barcode. After throwing the error, we immediately restarted the scan. Previously, we utilised the Capacitor/Community barcode scanner plugin, which has resume and pause scanning capabilities.

robingenz commented 2 months ago

@anusha-kaparapu What exactly are these methods supposed to do? I agree with @JanMisker. You can simply remove the listener and then you will no longer be informed about new barcodes. If you want to continue scanning, then add the listener again. You may have to adapt your code, but the plugin should already provide the functionality you need.

anusha-kaparapu commented 2 months ago

Thanks for your response @robingenz , As per your suggestion, I did the same implementation once the barcode was scanned. We removed the lister after getting validation, and we initiated listener again for continued scanning. But we are facing some issues while continuing to scan. Please find the attached videos. Some white background is displayed after the lister is removed in between interacting with the listener, again and while continuing to scan, some times the screen gets stuck and stoped the scanning as well.

Please find the below code what we have written.

the below two videos is @capacitor-mlkit/barcode-scanning plugin

https://github.com/user-attachments/assets/cef66710-a598-4ef2-bf5e-0cbd542d4beb

https://github.com/user-attachments/assets/e551cc70-0de4-4777-8389-3218bb030bcb

The below video is @capacitor-community/barcode-scanner (this is our current existing behaviour for using resume and pause scanning methods).

https://github.com/user-attachments/assets/e1391098-e832-44ee-ad46-966cbbb4ac6d

Example:

async startScanner() {
        document.querySelector('body')?.classList.add(‘barcode-scanner-active');
                const listener = await BarcodeScanner.addListener(
                    'barcodeScanned',
                    async result => {
                    if (result.barcode.displayValue) {
                        if (result.barcode.displayValue) {
                            await listener.remove();
                            document.querySelector('body')?.classList.remove('barcode -scanner-active');
                            BarcodeScanner.stopScan();
                            // this method is API call, sending the barcode display value to API based on response 
                                we display the error message and do the continue scan.
                            this.getSerialNumberFromSearch().catch(() => {});
                        }
                    } else {
                        this.errorInfo = String(
                            this.translateService.instant('scanner.Serial-number-is-not-valid')
                        );
                        this.continuosScan();
                    }
                    },
                );
                await BarcodeScanner.startScan();
      };

    continuosScan() {
            setTimeout(() => {
                this.ngZone.run(() => {
                    this.startScanner();
                    this.hideErrorMessage();
                });
            }, 1000);
        }
robingenz commented 2 months ago

@anusha-kaparapu You should only call BarcodeScanner.stopScan() when you are completely finished. Otherwise, just remove the listener and let the scan run in the background during validation.

JanMisker commented 2 months ago

You are calling BarcodeScanner.startScan() multiple times, which will cause problems like you show in the videos. The continue scanning method should only register the listener and nothing else.

anusha-kaparapu commented 1 month ago

Thanks a lot @robingenz and @JanMisker i followed your instructions and applied, it is working as expected. :)

robingenz commented 1 month ago

@anusha-kaparapu Great, thank you for getting back. @JanMisker Thank you for your help. Feel free to continue contributing to this project in the future. I really appreciated your contributions to the Capacitor Community.

In this case i will close this issue.