How to extract data/object from FaceDetector API?

Please provide the following:

  1. SDK Version: 37
  2. Platforms(Android/iOS/web/all): all

Hello, I’m new to React Native and still learning React and JavaScript.

I’m practicing on Expo snack with FaceDetector API and managed to generate data about faces. However, I don’t know how to extract these data. My goal for now is to render the rollAngle data in a Text component.

Here is the code I use and tested with my cellphone:

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>
  );
}

In the snack console, I see results like this:

I also tried to replace faceDetected with the following code:

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

console results look like this:

Either way, when I tried to render rollAngle, an error message showed up and said faces[0].rollAngle is undefined and is not an object.

Any suggestion is appreciated.

Thank you

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.