face-detector-demo/App.js at master · wilfredmulenga/face-detector-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react'
import { Text, View, StyleSheet } from 'react-native'
import * as FaceDetector from 'expo-face-detector'
import { Camera } from 'expo-camera'
import Rectangle from './Rectangle'
import { TRANSPARENT, WHITE } from './common/Colors'

const initialState = {
  hasPermission: '',
  face: {},
  faceDetected: false
}

const FaceDetectedPrompt = ({ faceDetected }) => {
  return (
    <View style={styles.faceDetectedPrompt}>
      <Text style={styles.prompt}>{faceDetected ? 'Face detected ✅' : 'No face detected ❌'}</Text>
    </View>
  )
}
class App extends React.Component {
  constructor () {
    super()
    this.state = { ...initialState }
    this.cameraRef = React.createRef()
  }

  async componentDidMount () {
    const { status } = await Camera.requestPermissionsAsync()
    if (status) {
      this.setState({ hasPermission: 'granted' })
    }
  }

  componentWillUnmount () {
    this.cameraRef = null
  }

  handleFacesDetected = (event) => {
    const { faces } = event
    if (faces && faces.length > 0) {
      this.setState({
        faceDetected: true,
        face: faces[0]
      })
    } else {
      this.setState({
        faceDetected: false,
        face: {}
      })
    }
  }

  render () {
    const { hasPermission, faceDetected, face } = this.state
    if (hasPermission === null) {
      return <View />
    }
    if (hasPermission === false) {
      return <Text>No access to camera</Text>
    }

    return (
      <View style={styles.main}>
        <Camera
          ratio="4:3"
          autoFocus="on"
          flashMode="off"
          ref={(ref) => {
            this.cameraRef = ref
          }}
          style={styles.cameraWrapper}
          onFacesDetected={this.handleFacesDetected}
          faceDetectorSettings={{
            mode: FaceDetector.Constants.Mode.fast,
            detectLandmarks: FaceDetector.Constants.Landmarks.all,
            runClassifications: FaceDetector.Constants.Classifications.none,
            minDetectionInterval: 1000,
            tracking: true
          }}
          type={Camera.Constants.Type.front}>
          <View style={styles.cameraContent}>
            {faceDetected && <Rectangle face={face} />}
            <FaceDetectedPrompt faceDetected={faceDetected} />
          </View>
        </Camera>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1
  },
  cameraWrapper: {
    flex: 5
  },
  cameraContent: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: TRANSPARENT,
    marginBottom: 20
  },
  faceDetectedPrompt: {
    position: 'absolute',
    bottom: 0,
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    flexDirection: 'row',
    padding: 10,
    marginBottom: 20
  },
  prompt: {
    fontSize: 22,
    color: WHITE
  }
})

export default App