feat: Implement cornerPoints and frame for scanned codes (#2117)

* Android & TypeScript part of scanned code corner points. Scanned frame dimensions also included in callback. #2076

* TS fix. #2076

* Implement iOS parts of code scanner corner points with additional scanned frame data.

* Add example page for code scanning

* Use Point type from Point.ts

* Update package/src/CodeScanner.ts

Add parameters description to CodeScanner callback.

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

* Update package/src/CodeScanner.ts

More expressive description for CodeScannerFrame.

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

* Update package/src/CodeScanner.ts

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

* Update package/src/CodeScanner.ts

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

* Update package/ios/Core/CameraSession+CodeScanner.swift

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

* Update package/ios/Core/CameraSession+CodeScanner.swift

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

* Remove default values from CodeSCannerFrame

* Linting

* Multiply code corner points in swift

---------

Co-authored-by: stemy <balazs.stemler@metrix.co.hu>
Co-authored-by: Zoli <iamzozo@metrix.co.hu>
Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

package/src/Camera.tsx

@@ -11,7 +11,7 @@ import type { RecordVideoOptions, VideoFile } from './VideoFile'
 import { VisionCameraProxy } from './FrameProcessorPlugins'
 import { CameraDevices } from './CameraDevices'
 import type { EmitterSubscription } from 'react-native'
-import { Code, CodeScanner } from './CodeScanner'
+import { Code, CodeScanner, CodeScannerFrame } from './CodeScanner'
 
 //#region Types
 export type CameraPermissionStatus = 'granted' | 'not-determined' | 'denied' | 'restricted'
@@ -19,6 +19,7 @@ export type CameraPermissionRequestResult = 'granted' | 'denied'
 
 interface OnCodeScannedEvent {
   codes: Code[]
+  frame: CodeScannerFrame
 }
 interface OnErrorEvent {
   code: string
@@ -398,7 +399,7 @@ export class Camera extends React.PureComponent<CameraProps> {
     const codeScanner = this.props.codeScanner
     if (codeScanner == null) return
 
-    codeScanner.onCodeScanned(event.nativeEvent.codes)
+    codeScanner.onCodeScanned(event.nativeEvent.codes, event.nativeEvent.frame)
   }
 
   //#region Lifecycle

package/src/CodeScanner.ts

@@ -1,3 +1,5 @@
+import { Point } from './Point'
+
 /**
  * The type of the code to scan.
  */
@@ -15,6 +17,20 @@ export type CodeType =
   | 'aztec'
   | 'data-matrix'
 
+/**
+ * The full area that is used for code scanning. In most cases, this is 1280x720 or 1920x1080.
+ */
+export interface CodeScannerFrame {
+  /**
+   * The width of the frame
+   */
+  width: number
+  /**
+   * The height of the frame
+   */
+  height: number
+}
+
 /**
  * A scanned code.
  */
@@ -36,6 +52,10 @@ export interface Code {
     width: number
     height: number
   }
+  /**
+   * The location of each corner relative to the Camera Preview (in dp).
+   */
+  corners?: Point[]
 }
 
 /**
@@ -48,8 +68,10 @@ export interface CodeScanner {
   codeTypes: CodeType[]
   /**
    * A callback to call whenever the scanned codes change.
+   * @param codes The scanned codes, or an empty array if none.
+   * @param frame The full area that is used for scanning. Code bounds and corners are relative to this frame.
    */
-  onCodeScanned: (codes: Code[]) => void
+  onCodeScanned: (codes: Code[], frame: CodeScannerFrame) => void
   /**
    * Crops the scanner's view area to the specific region of interest.
    */

package/src/hooks/useCodeScanner.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react'
-import { Code, CodeScanner } from '../CodeScanner'
+import { Code, CodeScanner, CodeScannerFrame } from '../CodeScanner'
 
 export function useCodeScanner(codeScanner: CodeScanner): CodeScanner {
   const { onCodeScanned, ...codeScannerOptions } = codeScanner
@@ -7,8 +7,8 @@ export function useCodeScanner(codeScanner: CodeScanner): CodeScanner {
   // Memoize the  function once and use a ref on any identity changes
   const ref = useRef(onCodeScanned)
   ref.current = onCodeScanned
-  const callback = useCallback((codes: Code[]) => {
-    ref.current(codes)
+  const callback = useCallback((codes: Code[], frame: CodeScannerFrame) => {
+    ref.current(codes, frame)
   }, [])
 
   // CodeScanner needs to be memoized so it doesn't trigger a Camera Session re-build