The corners are not the exact values ​​to make an overlay

[najBaby]

trafficstars

What

• The corners are not the exact values ​​to make an overlay. Help me

[juliansteenbakker]

This is a known issue and I have already been working on it. In short, we need to lock the aspect ratio in order to match the overlay with the preview. I have already started with some implementation of this but have not finished yet.

[najBaby]

Ok thanks you. I need fastly.

[WingCH]

same issue!

[Thisora]

Same issue here

[WingCH]

any update about this issue? i need correct corner position to handle scan area feature

[jinjilynn]

we need to lock the aspect ratio with what value?

[SeriousMonk]

Hi, is there a build-in way for creating an overlay? Another option would be to put the MobileScanner inside a Stack and manually create an overlay, but a build in one (like in qr_code_scanner) would be much nicer to use.

[blueeyestw]

If anyone is only looking for an overlay UI and not a restricted scan area, just do this:

            child: Stack(
              children: [
                MobileScanner(
                  allowDuplicates: false,
                  controller: controller,
                  onDetect: onDetect,
                ),
                //overlays a semi-transparent rounded square border that is 60% of screen width
                Center(
                  child: Container(
                    width: MediaQuery.of(context).size.width * 0.6,
                    height: MediaQuery.of(context).size.width * 0.6,
                    decoration: BoxDecoration(
                      color: Colors.transparent,
                      border: Border.all(color: Colors.white38, width: 4.0),
                      borderRadius: const BorderRadius.all(Radius.circular(24.0)),
                    ),
                  ),
                ),
              ],
            ),

[marcov-dart]

I want to display an overlay with the 4 corners highlighted like the commented out one in the example (mobile_scanner_overlay.dart). I uncommented that example and made it more or less work with the current master in git. But I don't understand the coordinate system of the List<Offset> corners. They make no sense to me whatsoever. Does anyone know what is up with those? I would expect the coordinates to match the coordinate system of the image as in arguments.size from onStart. If I have that I can do the calculation on the flutter side depending on BoxFit. But right now the aspect ratio of the coordinates coming back is all off. In the horizontal direction I determined by trial and error that have to divide by 4 and in the vertical by 2.3 to make it more or less match the corners.

[marcov-dart]

This is a known issue and I have already been working on it. In short, we need to lock the aspect ratio in order to match the overlay with the preview. I have already started with some implementation of this but have not finished yet.

I am trying to understand what you are saying here, but I don't understand why you would need to lock aspect ratio? The coordinates that you get back from the detector are they not in the same coordinate system as the input image?

[marcov-dart]

I somewhat figured out what is going on here. For android in MobileScanner.kt there is on line 239 val analysisSize = analysis.resolutionInfo?.resolution ?: Size(0, 0). For me that gives me 640 x 480. It is in portrait mode so it actually is 480 x 640. And those match up with the coordinates from corners. Basically I need that value on the flutter side to make that work. For iOS the situation is different and a bit weird. The callback captureOutput gets passed sampleBuffer. That gets turned into an image buffer that we can ask for its with and height (let imageWidth = CGFloat(CVPixelBufferGetWidth(imageBuffer)), let imageHeight = CGFloat(CVPixelBufferGetHeight(imageBuffer))). For me that returns 1128 x 1504. And that gets analysed. You would expect coordinates in terms of the input image. But the coordinates don't quite match that. I have to scale in the horizontal direction 3 / 4 and in the vertical by 4 / 3. Mind you 1128 x 1504 has 3 : 4 ratio. I don't think that is a coincidence. At first I thought the detector turning the input image into a square, but that doesn't fit because then I would only have to scale on one of the axis 3/4 and not also the other one by 4 / 3.

[juliansteenbakker]

The issue is fixed by using the size of the captureOutput buffer, which is implemented in the latest beta version.

With version 3.0.0-beta.4 you can use an custom scanning area like shown in the example app: https://github.com/juliansteenbakker/mobile_scanner/blob/master/example/lib/barcode_scanner_window.dart

Please note that this is still a beta so there can be breaking changes in the near future.

[luisgalan]

Would it make sense to have another version of Barcode.corners which returns the corners relative to the widget's coordinate system? That way it it would be very straightforward to add something like a barcode indicator overlay