expo-face-detector横屏模式人脸检测异常问题求助

问题描述 #

我在开发Expo托管的React Native项目，使用expo-face-detector实现人脸检测。竖屏模式下功能正常，但在app.json中设置"orientation": "landscape"切换为横屏后，onFacesDetected回调返回的人脸数量要么是0，偶尔会出现2个，完全不符合预期。

相关代码 #

<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
    }}
/>

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
}

原因分析 #

横屏模式下，相机预览方向与人脸检测器的坐标系未正确对齐，导致检测器无法准确识别人脸，甚至出现重复检测的情况。expo-face-detector默认配置未适配横屏旋转角度，需要手动调整检测方向参数。

解决方案 #

1. 动态设置人脸检测器的方向 #

通过expo-screen-orientation监听屏幕方向变化，实时更新人脸检测器的方向配置，确保坐标系对齐：

import { useCallback, useState, useEffect } from 'react';
import { Camera } from 'expo-camera';
import * as FaceDetector from 'expo-face-detector';
import * as ScreenOrientation from 'expo-screen-orientation';

export default function FaceDetectionScreen() {
  const [detectorOrientation, setDetectorOrientation] = useState(FaceDetector.FaceDetectorOrientation.portrait);

  useEffect(() => {
    // 获取初始屏幕方向
    const getInitialOrientation = async () => {
      const orientation = await ScreenOrientation.getOrientationAsync();
      updateDetectorOrientation(orientation);
    };

    // 根据屏幕方向更新检测器方向
    const updateDetectorOrientation = (orientation) => {
      switch (orientation) {
        case ScreenOrientation.Orientation.LANDSCAPE_LEFT:
          setDetectorOrientation(FaceDetector.FaceDetectorOrientation.landscapeLeft);
          break;
        case ScreenOrientation.Orientation.LANDSCAPE_RIGHT:
          setDetectorOrientation(FaceDetector.FaceDetectorOrientation.landscapeRight);
          break;
        case ScreenOrientation.Orientation.PORTRAIT:
          setDetectorOrientation(FaceDetector.FaceDetectorOrientation.portrait);
          break;
        case ScreenOrientation.Orientation.PORTRAIT_UPSIDE_DOWN:
          setDetectorOrientation(FaceDetector.FaceDetectorOrientation.portraitUpsideDown);
          break;
        default:
          setDetectorOrientation(FaceDetector.FaceDetectorOrientation.portrait);
      }
    };

    getInitialOrientation();
    // 监听屏幕方向变化
    const subscription = ScreenOrientation.addOrientationChangeListener(({ orientationInfo }) => {
      updateDetectorOrientation(orientationInfo.orientation);
    });

    return () => {
      ScreenOrientation.removeOrientationChangeListener(subscription);
    };
  }, []);

  return (
    <Camera
      style={{ flex: 1 }}
      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,
        orientation: detectorOrientation // 绑定动态方向
      }}
    />
  );
}

2. 确保Camera组件布局适配横屏 #

将Camera组件的样式设置为flex:1，确保预览区域占满整个屏幕，避免因布局裁剪导致检测区域异常。

3. 升级依赖版本（可选） #

当前使用的expo-face-detector@12.1.1对应Expo 48，该版本在横屏检测上存在部分兼容性问题。可以尝试升级到Expo 49及对应的expo-face-detector@13.0.0，新版本对横屏场景的支持更完善。

4. 调整tracking参数 #

若需要更稳定的检测效果，可将tracking: false改为tracking: true，让检测器持续跟踪已识别的人脸，减少漏检或重复检测的概率。

验证 #

修改完成后重启项目，切换到横屏模式，观察onFacesDetected返回的人脸数量是否恢复正常。

内容的提问来源于stack exchange，提问作者mestarted