React Native - 如何从 Expo SDK 的 FaceDetector 中提取数据？答案

【问题标题】：React Native - How to extract data from FaceDetector of Expo SDK?React Native - 如何从 Expo SDK 的 FaceDetector 中提取数据？
【发布时间】：2020-08-02 11:10:24
【问题描述】：

我是 React Native 的新手，还在学习 React 和 JavaScript。我正在使用 Expo 的 FaceDetector (SDK 37) 在 Expo 小吃上练习，并设法生成有关人脸的数据。但是，我无法（或不知道如何）提取这些数据。我现在的目标是在 Text 组件中呈现 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>
  );
}

在零食控制台中，我看到如下结果： Results in the Snack console

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

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

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

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

请提供帮助，我们将不胜感激。谢谢你。

【问题讨论】：

标签： react-native expo face-detection data-extraction

【解决方案1】：

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

“faces.faces”为我工作..

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

我是 react-native 的新手.. 因此，如果您通过其他方式解决了问题，请告诉我们。

【讨论】：

【解决方案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)

【讨论】：