feat(barcode-scanning): zoom functionality

[Melynt3]

Plugin(s)

• [X] Barcode Scanning
• [ ] Face Detection
• [ ] Translation

Current problem

Hi,

I asked about this a few days ago in a different topic, but I would like to officially request a new feature, which is zoom functionality. It's a big challenge to work with small barcodes. I encountered a problem when scanning small CODE128 codes; basically, the scanner does not read them. I was able to hardcode a workaround in the library itself by adding a zoom of 1.6f during camera initialization, but this is only a temporary solution. It would be a great feature that would make the library even more attractive.

Preferred solution

Adding a zoom based on the google barcode scanner, which is implemented in the demo version either zoom by "enlarging the screen" or by adding a slider

Alternative options

While working on react library i occured this kind of zoom which was very intuitive and it was known to be there.

Additional context

No response

[sephallen]

Having the ability to set the zoom level on initialisation would be very useful.

I am also experiencing similar issues with small CODE39 barcodes, the library is not able to read the value unless you pinch to zoom around 200%.

[Melynt3]

Yup, i occured the same error with different type.

i temporary fixed it by setting zoom lvl to 1.65 ratio in library from android studio, if u have more efficient way to manage it i would be greatful.

CameraControl cameraControl = camera.getCameraControl();
float zoomLevel = 1.65f;
cameraControl.setZoomRatio(zoomLevel);

[robingenz]

PRs are welcome. I propose these types:

  /**
   * Set the zoom ratio of the camera.
   * 
   * Only available on Android and iOS.
   */
  setZoomRatio(options: SetZoomRatioOptions): Promise<void>;
  /**
   * Get the zoom ratio of the camera.
   * 
   * Only available on Android and iOS.
   */
  getZoomRatio(): Promise<GetZoomRatioResult>;
  /**
   * Get the minimum zoom ratio of the camera.
   * 
   * Only available on Android and iOS.
   */
  getMinZoomRatio(): Promise<GetMinZoomRatioResult>;
  /**
   * Get the maximum zoom ratio of the camera.
   * 
   * Only available on Android and iOS.
   */
  getMaxZoomRatio(): Promise<GetMaxZoomRatioResult>;

Docs:

• https://developer.android.com/reference/androidx/camera/core/CameraControl#setZoomRatio(float)
• https://developer.android.com/reference/androidx/camera/core/ZoomState#getZoomRatio()
• https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624611-videozoomfactor
• https://developer.apple.com/documentation/avfoundation/avcapturedevice/2865758-maxavailablevideozoomfactor
• https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624614-ramp

Edit:

• There should also be a new zoomRatio property in the StartScanOptions interface to set an initial zoom ratio.
• The setZoomRatio(...) method should throw an error if the value is too large or too small.
• This issue only refers to the startScan(...) method, not the scan(...) method.

[vosecek]

Hi, any chance this task could be implemented?

[robingenz]

@vosecek Sure, but there is no ETA yet. Here you can find information on how to speed up the process.

[vosecek]

@robingenz what is appropriate price/bounty for implementation?

[robingenz]

@vosecek You can set any amount. Just take care of the minimum and maximum amount (see FAQ).

[vosecek]

@robingenz Contribution 200$ sent https://opencollective.com/capawesome/contributions/720755

[robingenz]

@vosecek Thank you for your contribution! I will prioritize the issue.

[robingenz]

I’ve just published a dev version, see https://github.com/capawesome-team/capacitor-mlkit/pull/112#issuecomment-1865041507. Feel free to give it a try. I would appreciate any feedback.

[vosecek]

I’ve just published a dev version, see #112 (comment). Feel free to give it a try. I would appreciate any feedback.

Works great, thanks!

ion-range is not handy component for this, cause zoom is needed only 2x-4x, using sliding range is difficult to set useful zoom ratio.

My implementation for controls is

<ion-fab slot="fixed" horizontal="end" vertical="center">
        <ion-fab-button (click)="increaseZoom()" [disabled]="currentZoomRatio >= maxZoomRatio" class="ion-margin-bottom" [color]="'primary'">
            <ion-icon size="large" name="search-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button (click)="decreaseZoom()" [disabled]="currentZoomRatio <= minZoomRatio" [color]="'dark'">
            <ion-icon size="small" name="search-outline"></ion-icon>
        </ion-fab-button>
    </ion-fab>

// set this.currentZoomRatio on init
increaseZoom() {
    // @ts-ignore
    this.setZoomRatio({detail: {value: this.currentZoomRatio + 1}});
  }

  decreaseZoom() {
    // @ts-ignore
    this.setZoomRatio({detail: {value: this.currentZoomRatio - 1}});
  }

public setZoomRatio(event: InputCustomEvent): void {
    if (!event.detail.value) {
      return;
    }
    BarcodeScanner.setZoomRatio({
      zoomRatio: parseInt(event.detail.value as any, 10),
    }).then(() => {
      BarcodeScanner.getZoomRatio().then(r => {
        this.currentZoomRatio = r.zoomRatio;
      });
    }, err => {
      console.log(err);
    });
  }

This is just my suggestion for demo code. Anyway, this is great and fulfil our needs.