如何使用react-native-vision-camera库检测静态图片URI中的人脸？

expo-face-detector在SDK 51已被废弃，改用react-native-vision-camera处理静态图片人脸检测，需要借助其静态帧创建能力和专用的人脸检测插件，具体实现如下：

1. 安装依赖 #

先安装所需的核心库和插件：

# 安装react-native-vision-camera核心库
npm install react-native-vision-camera

# 安装人脸检测插件
npm install vision-camera-face-detector

# 安装Worklets依赖（帧处理必需）
npm install react-native-worklets-core

如果是Expo项目，需在app.json/app.config.js中配置插件权限：

{
  "expo": {
    "plugins": [
      [
        "react-native-vision-camera",
        {
          "cameraPermissionText": "需要访问相机权限以处理图片人脸检测",
          "photoPermissionText": "需要访问相册权限以读取目标图片"
        }
      ],
      "vision-camera-face-detector"
    ]
  }
}

2. 替换原检测函数 #

通过createFrameFromImageUri将静态图片URI转换为可处理的帧对象，再调用人脸检测接口完成识别：

import { createFrameFromImageUri } from 'react-native-vision-camera';
import { detectFaces, Face, FaceDetectionOptions } from 'vision-camera-face-detector';
import { useCallback } from 'react';

const detectFaces = useCallback(async (imageUri: string): Promise<Face[] | undefined> => {
  try {
    // 将静态图片URI转为帧对象
    const frame = await createFrameFromImageUri(imageUri);
    
    // 配置检测选项，与原函数参数对应
    const detectionOptions: FaceDetectionOptions = {
      mode: 'fast',
      detectLandmarks: 'none',
      runClassifications: 'none',
    };
    
    // 执行人脸检测
    const faces = await detectFaces(frame, detectionOptions);
    
    // 释放帧资源，避免内存泄漏
    frame.release();
    
    return faces;
  } catch (error) {
    console.log("🚀 ~ file: SeancePhoto.tsx ~ line 54 ~ detectFaces ~ error", error);
    return undefined;
  }
}, []);

关键注意事项 #

• 确保已在项目中配置并申请了相机和相册权限，否则无法读取目标图片URI
• 处理完成后必须调用frame.release()释放帧资源，防止内存溢出
• 若出现版本兼容问题，需保证vision-camera-face-detector与react-native-vision-camera的版本匹配

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