rotating detection box

luicfrr · Jul 2, 2024 · ef088b2 · ef088b2
1 parent 78f2b40
commit ef088b2
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -90,6 +90,7 @@ function FaceDetection(): JSX.Element {
   const aFaceH = useSharedValue( 0 )
   const aFaceX = useSharedValue( 0 )
   const aFaceY = useSharedValue( 0 )
+  const aRot = useSharedValue( 0 )
   const animatedStyle = useAnimatedStyle( () => ( {
     position: 'absolute',
     borderWidth: 4,
@@ -108,14 +109,28 @@ function FaceDetection(): JSX.Element {
     } ),
     top: withTiming( aFaceY.value, {
       duration: 100
-    } )
+    } ),
+    transform: [ {
+      rotate: `${ aRot.value }deg`
+    } ]
   } ) )
 
   useEffect( () => {
     if ( hasPermission ) return
     requestPermission()
   }, [] )
 
+  /**
+   * Handle camera UI rotation
+   * 
+   * @param {number} rotation Camera rotation
+   */
+  function handleUiRotation(
+    rotation: number
+  ) {
+    aRot.value = rotation
+  }
+
   /**
    * Hanldes camera mount error event
    *
@@ -181,6 +196,7 @@ function FaceDetection(): JSX.Element {
             onError={ handleCameraMountError }
             faceDetectionCallback={ handleFacesDetected }
             outputOrientation={ 'device' }
+            onUIRotationChanged={ handleUiRotation }
             faceDetectionOptions={ {
               ...faceDetectionOptions,
               autoScale