Weiqi Zhang
Weiqi Zhang

Reputation: 1

How to extract data from FaceDetector of Expo SDK?

I’m practicing on Expo snack with Expo's FaceDetector (SDK 37) and managed to generate data about faces. However, I couldn't (or 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 used in Expo Snack and tested with my Android 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: Results in the Snack console

I tried to replace the faceDetected function with the following code:

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

Then, the console shows slightly different results: Results in Snack console

I tried both ways to render rollAngle, but an error message showed up and said face[0].rollAngle is undefined and is not an object.

Upvotes: 0

Views: 2922

Answers (2)

Dumb Head
Dumb Head

Reputation: 44

You may have resolved this problem.

"faces.faces" worked for me..

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

Upvotes: 1

Ace Rimmer
Ace Rimmer

Reputation: 141

I believe I have fixed your problem:

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

I think your main problem was you were using

setFaces({faces}) 

instead of

setFaces(faces)

Upvotes: 0

Related Questions