fix: Update to latest face detector

mrousavy · Apr 16, 2024 · 991b89b · 991b89b
1 parent dc59152
commit 991b89b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/package/example/ios/Podfile.lock b/package/example/ios/Podfile.lock
@@ -530,7 +530,7 @@ PODS:
     - React-callinvoker
     - React-Core
     - react-native-worklets-core
-  - VisionCameraFaceDetector (1.4.2):
+  - VisionCameraFaceDetector (1.5.0):
     - GoogleMLKit/FaceDetection
     - React-Core
     - VisionCamera
@@ -791,7 +791,7 @@ SPEC CHECKSUMS:
   RNVectorIcons: 23b6e11af4aaf104d169b1b0afa7e5cf96c676ce
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   VisionCamera: 0070916075536a3d2a2beaaa056a711492f379f2
-  VisionCameraFaceDetector: 9cdc4149c540dbb4995761d66c4f591b5952e652
+  VisionCameraFaceDetector: 7d5ea089a282e0128270105343ea9865656a0a14
   Yoga: 4c3aa327e4a6a23eeacd71f61c81df1bcdf677d5
 
 PODFILE CHECKSUM: 299b350392623e1b01615935e236438d90fd2cff

diff --git a/package/example/package.json b/package/example/package.json
@@ -30,7 +30,7 @@
     "react-native-static-safe-area-insets": "^2.2.0",
     "react-native-vector-icons": "^10.0.0",
     "react-native-video": "^5.2.1",
-    "react-native-vision-camera-face-detector": "^1.4.2",
+    "react-native-vision-camera-face-detector": "^1.5.0",
     "react-native-worklets-core": "^1.0.0-beta.2"
   },
   "devDependencies": {

diff --git a/package/example/src/CameraPage.tsx b/package/example/src/CameraPage.tsx
@@ -28,7 +28,7 @@ import { useIsFocused } from '@react-navigation/core'
 import { usePreferredCameraDevice } from './hooks/usePreferredCameraDevice'
 import { ClipOp, Skia, TileMode } from '@shopify/react-native-skia'
 import type { Contours, Face } from 'react-native-vision-camera-face-detector'
-import { detectFaces } from 'react-native-vision-camera-face-detector'
+import { useFaceDetector } from 'react-native-vision-camera-face-detector'
 
 const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera)
 Reanimated.addWhitelistedNativeProps({
@@ -51,7 +51,7 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
   const isForeground = useIsForeground()
   const isActive = isFocussed && isForeground
 
-  const [cameraPosition, setCameraPosition] = useState<'front' | 'back'>('back')
+  const [cameraPosition, setCameraPosition] = useState<'front' | 'back'>('front')
   const [enableHdr, setEnableHdr] = useState(false)
   const [flash, setFlash] = useState<'off' | 'on'>('off')
   const [enableNightMode, setEnableNightMode] = useState(false)
@@ -184,7 +184,14 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
   paint.setImageFilter(blurFilter)
 
   // idk why but for some reason the face landmarks are divided by 2 relative to the Frame?
-  const MULTIPLIER = 1.9
+  const MULTIPLIER = 1
+  const { detectFaces } = useFaceDetector({
+    performanceMode: 'fast',
+    contourMode: 'all',
+    landmarkMode: 'none',
+    classificationMode: 'none',
+  })
+
   const frameProcessor = useSkiaFrameProcessor(
     (frame) => {
       'worklet'
@@ -193,17 +200,10 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
 
       const result = detectFaces({
         frame: frame,
-        options: {
-          performanceMode: 'fast',
-          contourMode: 'all',
-          landmarkMode: 'none',
-          classificationMode: 'none',
-        },
       })
 
-      const faces = result.faces as unknown as Face[]
-
-      for (const face of faces) {
+      for (const face of result.faces) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (face.contours == null) {
           console.log('no countours for this face!')
           continue
@@ -214,20 +214,25 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
         const necessaryContours: (keyof Contours)[] = ['FACE', 'LEFT_CHEEK', 'RIGHT_CHEEK']
         for (const key of necessaryContours) {
           const points = face.contours[key]
-          path.moveTo(points[0].x * MULTIPLIER, points[0].y * MULTIPLIER)
-          points.slice(1).forEach((point) => {
-            path.lineTo(point.x * MULTIPLIER, point.y * MULTIPLIER)
+          points.forEach((point, index) => {
+            if (index === 0) {
+              // it's a starting point
+              path.moveTo(point.x * MULTIPLIER, point.y * MULTIPLIER)
+            } else {
+              // it's a continuation
+              path.lineTo(point.x * MULTIPLIER, point.y * MULTIPLIER)
+            }
           })
           path.close()
         }
 
         frame.save()
         frame.clipPath(path, ClipOp.Intersect, true)
-        frame.drawImage(frame.__skImage, 0, 0, paint)
+        frame.render(paint)
         frame.restore()
       }
     },
-    [paint],
+    [detectFaces, paint],
   )
 
   const videoHdr = format?.supportsVideoHdr && enableHdr

diff --git a/package/example/yarn.lock b/package/example/yarn.lock
@@ -5325,10 +5325,10 @@ react-native-video@^5.2.1:
     prop-types "^15.7.2"
     shaka-player "^2.5.9"
 
-react-native-vision-camera-face-detector@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-vision-camera-face-detector/-/react-native-vision-camera-face-detector-1.4.2.tgz#fce9b99b4fc3b41163cc39a4e55df182d67e47ae"
-  integrity sha512-aw7NbHgkavpxBbYOQMBhsz/HYJR6egeGCcram/Hb432jmw4US+9yLvUoTWk+Evv3yvShzvLzI4i9cGHn3I1BkA==
+react-native-vision-camera-face-detector@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-native-vision-camera-face-detector/-/react-native-vision-camera-face-detector-1.5.0.tgz#4f940b088c0e7d4abd04e8de40b75daf1183cf35"
+  integrity sha512-2p8KxSdHBT58d3lI731SGxISkTktnT5tMAP2MDF2J0kQMD1EZ4u9c3ULk90fZVY3jvqlKGHJ8Esqv9/45uMT0g==
 
 react-native-worklets-core@^1.0.0-beta.2:
   version "1.0.0-beta.2"