💭 How to follow QR position about react-native-vision-camera

[shacharcohen1997]

#2436 (comment) made it perfect but i dont know how she made it

[shacharcohen1997]

i managed to improve the code by using

// useTransposeFromStream.ts 
/** Determines the offset & scale values to translate stream coordinates to a layouts coordinate */
const getTransposeProperties = (source: Dimension, target: Dimension) => {
  const scaleRatio = Math.max(
    target.width / source.width,
    target.height / source.height,
  );
  // Represents the width and height of the stream, scaled down to fit the screen
  // This is without taking into account the cut off part of the stream (to fit the screen)
  const uncutDimensions = {
    width: source.width * scaleRatio,
    height: source.height * scaleRatio,
  };
  // Reprensents how much of the stream is cut off to fit the screen
  const cutDimensions = {
    width: (uncutDimensions.width - target.width)*(scaleRatio),
    height: (uncutDimensions.height - target.height)*scaleRatio,
  };
  const x = {
    offset: cutDimensions.width/ 2 ,
    scale: scaleRatio,
  };
  const y = {
    offset: cutDimensions.height / 2,
    scale: scaleRatio,
  };
//   console.log("scaleRatio", scaleRatio, "uncutDimensions", uncutDimensions, "cutDimensions", cutDimensions, "x", x, "y", y);

  return { x, y };
};

export const transposeFromStream = (
    { x, y, width, height }: Rectangle,
    source: Dimension, // replace 'any' with the actual type of 'stream'
    target: Dimension
  ) => {
    const transposeFromStreamProperties = getTransposeProperties(source, target);
  
    return {
      x:
        x * transposeFromStreamProperties.x.scale -
        transposeFromStreamProperties.x.offset,
      y:
        y * transposeFromStreamProperties.y.scale -
        transposeFromStreamProperties.y.offset,
      width: width * transposeFromStreamProperties.x.scale,
      height: height * transposeFromStreamProperties.y.scale,
    };
  };



/** Given a set of coordinates in a landscape picture, returns the corresponding coordinates for a vertical plan  */
export const rotateCoordinatesToVertical = (
  { x, y }: Point,
  { height }: Dimension,
) => {
  return {
    x: height - y,
    y: x,
  };
};


export const rotateRectangleToVertical = (
  rectangle: Rectangle,
  frame: Dimension,
) => {
  // Rotating by 90° means the width and height are swapped
  const width = rectangle.height;
  const height = rectangle.width;
  // Rotate the top left corner coordinates
  const rotatedCoordinates = rotateCoordinatesToVertical(rectangle, frame);
  // The top left corner coordinates now represent the top right corner of the rectangle in the new plane
  // So recalculate the new top left corner coordinates
  return {
    x: rotatedCoordinates.x - width,
    y: rotatedCoordinates.y,
    width,
    height,
  };
};

export type Dimension = {
  width: number;
  height: number;
};
export type Point = {
  x: number;
  y: number;
};
export type Rectangle = Point & Dimension;

[shacharcohen1997]

WhatsApp.Video.2024-04-12.at.17.47.11.mp4

[tuannguyen0410]

Hi @shacharcohen1997 I have follow your idea and have a same problem. and I have try like this .maybe this will have help you. Viewbox of my camera is '0 0 414 709' you can get is by using View Ref

And my useCodeScanner function is like this.

By the way I just make a test in Rect . you can try it in Polygon . Many thank for your idea

[tuannguyen0410]

Here is my result for this detection

[tuannguyen0410]

@shacharcohen1997 I have try to draw code Scanner Border only when detected code

const topLeftX = codesFrame.x;
const topLeftY = codesFrame.y;
const topRightX = codesFrame.x + codesFrame.width;
const topRightY = codesFrame.y;
const bottomRightX = codesFrame.x + codesFrame.width;
const bottomRightY = codesFrame.y + codesFrame.height;
const bottomLeftX = codesFrame.x;
const bottomLeftY = codesFrame.y + codesFrame.height;
const paths = [
{ d: M${topLeftX + codesFrame.width / 3} ${topLeftY} H${topLeftX} V${topLeftY + codesFrame.height / 3} },
{ d: M${topRightX - codesFrame.width / 3} ${topRightY} H${topRightX} V${topRightY + codesFrame.height / 3} },
{ d: M${bottomRightX - codesFrame.width / 3} ${bottomRightY} H${bottomRightX} V${bottomRightY - codesFrame.height / 3} },
{ d: `M${bottomLeftX + codesFrame.width / 3} ${bottomLeftY} H${bottomLeftX} V${bottomLeftY

divide for 3 just my calculate the stroke width:
The Result is:

[mrousavy]

Hey I think this can be discussed on the community discordi nstead of GitHub issues.

[shachar1997]

@shacharcohen1997 I have try to draw code Scanner Border only when detected code

const topLeftX = codesFrame.x; const topLeftY = codesFrame.y; const topRightX = codesFrame.x + codesFrame.width; const topRightY = codesFrame.y; const bottomRightX = codesFrame.x + codesFrame.width; const bottomRightY = codesFrame.y + codesFrame.height; const bottomLeftX = codesFrame.x; const bottomLeftY = codesFrame.y + codesFrame.height; const paths = [ { d: M${topLeftX + codesFrame.width / 3} ${topLeftY} H${topLeftX} V${topLeftY + codesFrame.height / 3} }, { d: M${topRightX - codesFrame.width / 3} ${topRightY} H${topRightX} V${topRightY + codesFrame.height / 3} }, { d: M${bottomRightX - codesFrame.width / 3} ${bottomRightY} H${bottomRightX} V${bottomRightY - codesFrame.height / 3} }, { d: `M${bottomLeftX + codesFrame.width / 3} ${bottomLeftY} H${bottomLeftX} V${bottomLeftY

divide for 3 just my calculate the stroke width: The Result is:

can you send the full snippet or your code?

[tuannguyen0410]

@shacharcohen1997 I have try to draw code Scanner Border only when detected code
const topLeftX = codesFrame.x; const topLeftY = codesFrame.y; const topRightX = codesFrame.x + codesFrame.width; const topRightY = codesFrame.y; const bottomRightX = codesFrame.x + codesFrame.width; const bottomRightY = codesFrame.y + codesFrame.height; const bottomLeftX = codesFrame.x; const bottomLeftY = codesFrame.y + codesFrame.height; const paths = [ { d: M${topLeftX + codesFrame.width / 3} ${topLeftY} H${topLeftX} V${topLeftY + codesFrame.height / 3} }, { d: M${topRightX - codesFrame.width / 3} ${topRightY} H${topRightX} V${topRightY + codesFrame.height / 3} }, { d: M${bottomRightX - codesFrame.width / 3} ${bottomRightY} H${bottomRightX} V${bottomRightY - codesFrame.height / 3} }, { d: `M${bottomLeftX + codesFrame.width / 3} ${bottomLeftY} H${bottomLeftX} V${bottomLeftY
divide for 3 just my calculate the stroke width: The Result is:

can you send the full snippet or your code?

@shacharcohen1997 I think this well help