如何从Expo SDK的FaceDetector中提取数据？

Question

我正在使用 Expo 的 FaceDetector (SDK 37) 练习 Expo 零食，并设法生成有关面部的数据。但是，我无法（或不知道如何）提取这些数据。我现在的目标是在文本组件中渲染 rollAngle 数据。

这是我在 Expo Snack 中使用的代码，并用我的 Android 手机进行了测试：

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import { Camera } from 'expo-camera';
import * as FaceDetector from 'expo-face-detector'

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [faces, setFaces] = useState([])

  const faceDetected = ({faces}) => {
    setFaces({faces})
    console.log({faces})
  }
 
  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission !== true) {
    return <Text>No access to camera</Text>
  }

  return (
    //<View style={{ flex: 1 }}>
      <Camera
        style={{ flex: 1 }}
        type='front'
        onFacesDetected = {faceDetected}
        FaceDetectorSettings = {{
          mode: FaceDetector.Constants.Mode.fast,
          detectLandmarks: FaceDetector.Constants.Landmarks.all,
          runClassifications: FaceDetector.Constants.Classifications.none,
          minDetectionInterval: 5000,
          tracking: false
        }}
      >
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}>
          <Text style= {{top:200}}> is {faces[0].rollAngle} </Text>
        </View>
      </Camera>
    //</View>
  );
}

在零食控制台中，我看到如下结果： Snack 控制台中的结果

我尝试用以下代码替换faceDetected函数：

  const faceDetected = (faces) => {
    setFaces(faces)
    console.log(faces)
  }

然后，控制台显示的结果略有不同： Snack 控制台中的结果

我尝试了两种渲染 rollAngle 的方法，但是出现了一条错误消息，并表示face[0].rollAngle 未定义并且不是对象。

Answer 1

您可能已经解决了这个问题。

“faces.faces”对我有用..

  const faceDetected = (faces) => {
    setFaces(faces.faces)
  }

Answer 2

我相信我已经解决了你的问题：

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import { Camera } from 'expo-camera';
import * as FaceDetector from 'expo-face-detector'

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [faces, setFaces] = useState([])

  const faceDetected = ({faces}) => {
    setFaces(faces) // instead of setFaces({faces})
    console.log({faces})
  }

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission !== true) {
    return <Text>No access to camera</Text>
  }

  return (
    //<View style={{ flex: 1 }}>
      <Camera
        style={{ flex: 1 }}
        type='front'
        onFacesDetected = {faceDetected}
        FaceDetectorSettings = {{
          mode: FaceDetector.Constants.Mode.fast,
          detectLandmarks: FaceDetector.Constants.Landmarks.all,
          runClassifications: FaceDetector.Constants.Classifications.none,
          minDetectionInterval: 5000,
          tracking: false
        }}
      >
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}>
          {faces[0] && <Text style= {{top:200}}> is {faces[0].rollAngle} </Text>} // only render text if faces[0] exists
        </View>
      </Camera>
    //</View>
  );
}

我认为你的主要问题是你正在使用

setFaces({faces}) 

而不是

setFaces(faces)