diff --git a/package/example/ios/Podfile.lock b/package/example/ios/Podfile.lock index 7b1a4fe24c..788fee69c9 100644 --- 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 index 2fdb41c716..8f1894450a 100644 --- 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 index 44fa190cd1..5cf1ca029d 100644 --- 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 index 34653117b2..30908a2a78 100644 --- 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"