Camera is stretched when using width and height

[Burgov]

I have a barcode scanner with width 400 and height 200, and the camera view is stretch to make everything really flat, looks like it's scaling the full screen camera down to the dimensions without keeping aspect ratio.

[EddyVerbruggen]

Yeah, I noticed this as well (only on Android actually).

[shaqaruden]

I have this issue on iOS as well. Can you fix this? Or is this a Firebase MLKit issue?

[EddyVerbruggen]

Can you share the UI code?

[shaqaruden]

The code in the example

[shaqaruden]

Changing the width and height to 100% does not distort the image

[EddyVerbruggen]

So that means it's ok now?

[shaqaruden]

Yea, but it would be nice to be able to have a camera view that's not the full size

[zalesak]

height and width also stretch image, it seems there is bad computing behind display aspect ratio. There is circular tag on screens...

Android, Huawei P10 Pro

[zalesak]

I hope this is fix:

In file mlkit-cameraview.android.js, line 243 replace with this:
var pict = sizePair.pictureSize;
var diff = Math.abs((size.width / size.height) - (pict.width / pict.height));

it compute preview/picture pair with the closest aspect ratio.

[DanielDent]

To the extent that this is an Android-specific issue, I think the following line is responsible:

nativescript-plugin-firebase/src/mlkit/mlkit-cameraview.android.ts

Line 130 in 794467a

let sizePair = this.selectSizePair(this.camera, 1400, 1200); // TODO based on wrapping frame

The selectSizePair function seems to be looking for the previewSize which most closely matches the aspect ratio of the preview display area -- however, it assumes that the preview display area is always 1400x1200. Identifying the camera preview's current height & width, and updating it based on screen orientation or other layout changes does not currently appear implemented.

[EddyVerbruggen]

Yeah that TODO is waiting to be solved indeed. Happy to merge a PR if someone would like to take a stab at it :)

[murillobrand]

I solved this!
I will create a PR soon

[EddyVerbruggen]

@murillobrand That would be great!