Hi friends,

I am explaining about face detection from scratch using react native and expo.
First Create a new project named as FaceDetection.

create-react-native-app FaceDetection

Import the below classes from the expo

import { FaceDetector,Camera,Permissions,Constants } from ‘expo’;
Then, Ask for the camera permission
async componentWillMount() {

   const { status } =await Permissions.askAsync(Permissions.CAMERA);

   this.setState({hasCameraPermission:status==='granted'});

}

Then, Open Camera and detect the face using the front camera. If face detected ‘handleFacesDetected’ function will be triggered.

return (

        <View style={styles.container}>

          <Camera

             style={styles.camera}

             type={'front'}

             onFacesDetected={this.handleFacesDetected}

             faceDetectorSettings={{

               mode: FaceDetector.Constants.Mode.fast,

               detectLandmarks: FaceDetector.Constants.Mode.none,

               runClassifications: FaceDetector.Constants.Mode.none,

             }}>

             </Camera>

        </View>

      );
handleFacesDetected = ({ faces }) => {

    if(faces.length>0){

      this.setState({ faces });

    }

  };

Face detected you want to see the dimensions set the below code.

<Camera>
  <View style={styles.topBar}>
    <Text style={styles.textcolor}>x: {this.state.faces.length?this.state.faces[0].bounds.origin.x.toFixed(0) :0}</Text>
    <Text style={styles.textcolor}>y: {this.state.faces.length?this.state.faces[0].bounds.origin.y.toFixed(0) :0}</Text>
  </View>

  <View style={styles.bottomBar}>
    <Text style={styles.textcolor}>Heigth: {this.state.faces.length?this.state.faces[0].bounds.size.height.toFixed(0) :0}</Text>
    <Text style={styles.textcolor}>width: {this.state.faces.length?this.state.faces[0].bounds.size.width.toFixed(0) :0}</Text>
  </View>
<Camera>

But, If you want to mark your face in the camera you should write some styles.

renderFace({ bounds, faceID, rollAngle, yawAngle }) {

return (

<View

key={faceID}

transform={[

{ perspective: 600 },

{ rotateZ: `${rollAngle.toFixed(0)}deg` },

{ rotateY: `${yawAngle.toFixed(0)}deg` },

]}

style={[

styles.face,

{

...bounds.size,

left:bounds.origin.x,

top:bounds.origin.y,

},

]}>

<Text style={styles.faceText}>rollAngle: {rollAngle.toFixed(0)}</Text>

<Text style={styles.faceText}>yawAngle: {yawAngle.toFixed(0)}</Text>

</View>

);

}

renderFaces = () => 

    <View style={styles.facesContainer} pointerEvents="none">

      {this.state.faces.map(this.renderFace)}

    </View>

Add the below line after camera Tag.

<camera>...</camera>
{ this.state.faces.length ? this.renderFaces() : undefined}

Finally write Style as below.

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#000',

  },

  camera: {

    flex: 1,

    justifyContent: 'space-between',

  },

  topBar: {

    flex: 0.2,

    backgroundColor: 'transparent',

    flexDirection: 'row',

    justifyContent: 'space-around',

    paddingTop: Constants.statusBarHeight+1,

  },

  bottomBar: {

    flex: 0.2,

    backgroundColor: 'transparent',

    flexDirection: 'row',

    justifyContent: 'space-around',

  },

  face: {

    padding: 10,

    borderWidth: 1,

    borderRadius: 1,

    position: 'absolute',

    borderColor: '#808000',

    justifyContent: 'center',

    backgroundColor: 'transparent',

  },

  faceText: {

    color: '#32CD32',

    fontWeight: 'bold',

    textAlign: 'center',

    margin: 10,

    backgroundColor: 'transparent',

  },

  facesContainer: {

    position: 'absolute',

    bottom: 0,

    right: 0,

    left: 0,

    top: 0,

  },

  textcolor:{

    color: '#008080',

  }

});

Git: Click Here

Expo Demo: Click Here

face detection


Advertisements