barcodeScan mask flipped view

[Win546]

Question

Hi good morning,
So i've implemented a code that should scan the camera and take for valid only the code that are inside a mask, at the center of the screen, but the position are not visually where they should be, iv0e use some sort of view upon the camera to check if the point fall within this mask region, but for some reason the the point are flipped,( maybe the orientation) i don't know, any way i've tried to scale down the position based on screen width and height / camera height and width, ( but opposite because of the tilted, like this {height:width, width: height}) on android works pretty well, but on ios seem to be flipped in another way, obviously not the correct one ahahah

i don't know if can be the framework that we're using to build the app, draftbit, works good, but flipped

if you can help me ii'd very helpful, thanks in advanced

What I tried

const onCodeScanned = (codes,frame) => {

const { width, height } = frame;

setCameraResolution({ width: height, height: width });

if (scanCooldown) return;
setScanCooldown(true);


if (codes.length > 0) {
  const scannedCode = codes[0];
  const { corners, frame } = scannedCode;

// Scaling factors
const scaleX = screenWidth / (cameraResolution.width+(Platform.OS === 'ios' ? 50: 40));
const scaleY = screenHeight / (cameraResolution.height+(Platform.OS === 'ios' ? 180: 170));

  // Adjust coordinates based on scaling factors
const absCoords = {
    framex:  (Platform.OS === 'ios' ? frame.y : frame.x)    * (Platform.OS === 'ios' ? scaleY :  scaleX) ,
    framey:  (Platform.OS === 'ios' ? frame.x : frame.y) * (Platform.OS === 'ios' ? scaleX :  scaleY) }

setCoordinates(absCoords);

// rest of the code //

return (
<View style={{ flex: 1}}>
<Camera
{...props}
zoom={device?.neutralZoom ?? 1}
device={device}
isActive={true}
codeScanner={codeScanner}
onCameraReady={onCameraReady}
style={(StyleSheet.absoluteFill), { flex: 1 }}
resizeMode={'cover'}

  />

  <BarcodeMask
    lineAnimationDuration={2000}
    showAnimatedLine={true}
    width={maskWidth}
    height={maskHeight}
    outerMaskOpacity={0.4}
    backgroundColor={'#eee'}
    edgeColor={'#fff'}
    edgeBorderWidth={4}
    edgeHeight={25}
    edgeWidth={25}
    edgeRadius={5}
    animatedLineColor={'#0097AB'}
    animatedLineThickness={3}
    animatedLineOrientation="horizontal"
  />

  {coordinates && (
 <>
     
      <View style={[ styles.pointDebug, {left: coordinates.framex,  top: coordinates.framey  }]}/>
      <View style={[ styles.pointDebugCorner1, {left: coordinates.pointAx,  top: coordinates.pointAy  }]}/>
      <View style={[ styles.pointDebugCorner2, {left: coordinates.pointBx,  top: coordinates.pointBy  }]}/>
      <View style={[ styles.pointDebugCorner3, {left: coordinates.pointCx,  top: coordinates.pointCy  }]}/>
      <View style={[ styles.pointDebugCorner4, {left: coordinates.pointDx,  top: coordinates.pointDy  }]}/>
 </>
  )}
</View>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#000',
},
pointDebug: {
position: 'absolute',
width: 4,
height: 4,
borderRadius: 5,
backgroundColor: 'yellow',
},
pointDebugCorner1: {
position: 'absolute',
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'red',
},
pointDebugCorner2: {
position: 'absolute',
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'blue',
},
pointDebugCorner3: {
position: 'absolute',
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'green',
},
pointDebugCorner4: {
position: 'absolute',
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'orange',
},
});

VisionCamera Version

4

Additional information

• I am using Expo
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar questions in the issues page as well as in the discussions page and found none.

[mrousavy]

I don't really understand the question here, this might be better off asked on the community discord.

[itahmad101]

@Win546 inverted value of x and y on IOS right ?

[Win546]

yes, from what i understood, the x and y on ios are tilted, i think for the orientation of the camera (on android after the scaling the point are where they should be ),so when i scale with the camera resolution dosen't work as aspected.
Ios:
even if the view is vertical, the camera seems oriented in landscape, I notice this because by moving the camera up/down my point moves on my x axis, while by moving it left/right it moves on the y axis

[itahmad101]

I'm also can reproduce this bug(Iphone 6S iOS 15.8.2)

[mlhtnc]

I am not sure if I understood the question right but comments are right. x and y values are inverted on ios. I updated to @4.3.2 few weeks ago and the problem still persist. Also width and height might be inverted too. On the other hand there is no problem on android.

[Win546]

yes, exactly what you said!
Any way i've changed my first approach and now i'm trying to use expo-camera but it's the same, android works well, ios tilted, the only one that seems to work it's expo-barcode-scanner, where the point are where the should be on ios !( but on android instead the camera preview it's not so good as the other pack, so i was conditionally render the correct scanner based on platform .
But it's not the right solution because expo-barcode-scanner it'll be deprecated from sdk 51, so i'm trying to find a solution for for expo-camera, without any success at the moment

[mlhtnc]

I just inverted x, y and width, height values for ios as workaround and it's working fine. For android I just use values as it is. I was using the values to calculate if scanned barcode inside the rectangle or not.

[mrousavy]

VisionCamera exposes device.sensorOrientation, maybe you need to rotate that. Either way, I don't have the free time to look into this now. Maybe I can take a look at this in the future, we'll see.

[mrousavy]

Always open to PRs of course.