`expo-face-detector` not detecting faces in landscape mode

Question

I am working on an Expo managed react-native project, using expo-face-detector to detect faces. It is working fine on Portrait mode. But when I changed "orientation": "landscape" in app.json, I am getting 0 face result or sometimes 2 face results in onFacesDetected callback.

<Camera
    type={Camera.Constants.Type.front}
    onFacesDetected={res => console.log(res.faces.length)}
    faceDetectorSettings={{
       detectLandmarks: FaceDetector.FaceDetectorLandmarks.all,
       mode: FaceDetector.FaceDetectorMode.accurate,
       runClassifications: FaceDetector.FaceDetectorClassifications.all,
       minDetectionInterval: 500,
       tracking: false
    }}
/>
    

I am using the following package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "expo": "~48.0.6",
    "expo-camera": "~13.2.1",
    "expo-face-detector": "~12.1.1",
    "expo-image": "~1.0.0",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.4",
    "react-native-circular-progress": "^1.3.8",
    "react-native-root-toast": "^3.4.1",
    "react-native-svg": "13.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

Answer 1

The issue might be related to the expo-face-detector library not handling landscape mode face detection. One possible approach is to use the front camera and manually detect faces, using the front camera frames in landscape mode. You can use expo-camera to access frames from the camera and process them with a face detection library that supports landscape mode. For example you can use react-native-camera

1. expo install react-native-camera

Full code:

import React, { useRef } from 'react';
import { View } from 'react-native';
import { Camera } from 'react-native-camera';
import { FaceDetector } from 'react-native-camera';

const CameraComponent = () => {
  const cameraRef = useRef<Camera>(null);

  const handleCameraReady = async () => {
    // Start processing frames here (e.g., start face detection loop)
  };

  const handleFacesDetected = ({ faces }: FaceDetector.FaceDetectionResult) => {
    console.log('Number of faces detected:', faces.length);
    // Process the detected faces here
  };

  return (
    <View style={{ flex: 1 }}>
      <Camera
        ref={cameraRef}
        type={Camera.Constants.Type.front}
        style={{ flex: 1 }}
        onCameraReady={handleCameraReady}
        onFacesDetected={handleFacesDetected}
        faceDetectionClassifications={
          Camera.Constants.FaceDetection.Classifications.all
        }
      />
    </View>
  );
};

export default CameraComponent;