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

• [X] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] 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)