aboozaid / react-native-facerecognition Goto Github PK

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ToastAndroid,
  ListView,
  TextInput,
  TouchableHighlight,
  DeviceEventEmitter
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import Face from 'react-native-facerecognition'
import DialogManager, { SlideAnimation, DialogContent, DialogTitle, DialogButton } from 'react-native-dialog-component';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({
      rowHasChanged:(r1,r2) => r1 !== r2
    });
    const faces = [];
    this.state = {
      dataSource: this.ds.cloneWithRows(faces),
      captured: 1,
      faces: faces,
      type: 'front'
    };
  }
  componentDidMount() {
    DeviceEventEmitter.addListener("onFaceRecognized", this.onFaceRecognized.bind(this))
    DeviceEventEmitter.addListener("onClean", this.onClean.bind(this))
  }
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            style = {styles.preview}
            type={this.state.type}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            onMountError={(msg) => this.cameraError(msg)}
            onCameraReady={() => {this.onCameraReady()}}
        />
        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
        <TouchableOpacity
            onPress={this.takePicture.bind(this)}
            style = {styles.capture}
        >
            <Text style={{fontSize: 14}}> SHOT </Text>
        </TouchableOpacity>
        <TouchableOpacity
            onPress={this.recognizePicture.bind(this)}
            style = {styles.capture}
        >
            <Text style={{fontSize: 14}}> RECOGNIZE </Text>
        </TouchableOpacity>
        <TouchableOpacity
            onPress={() => this.setState({type: this.state.type === 'back' ? 'front' : 'back',})}
            style = {styles.capture}
        >
            <Text style={{fontSize: 14}}> FLIP </Text>
        </TouchableOpacity>
        <TouchableOpacity
            onPress={() => this.clean()}
            style = {styles.capture}
        >
            <Text style={{fontSize: 14}}> CLEAN </Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
  
  onFaceRecognized(data) {
    ToastAndroid.show("Recognized: " + data.name + " Distance: " + data.distance, ToastAndroid.LONG)
  }
  onClean(msg) {
    this.setState({faces: []})
    ToastAndroid.show(msg, ToastAndroid.SHORT)
  }
  clean() {
    Face.Clean();
  }
  onCameraReady() {
    Face.Start(Face.Detection.DEEP, (success) => {
      ToastAndroid.show("Train initialized", ToastAndroid.SHORT)
    }, (error) => {
      ToastAndroid.show(error, ToastAndroid.LONG)
    })
  }

  takePicture = async function() {
    if (this.camera) {
      const options = { width: 200, base64: true }
      const data = await this.camera.takePictureAsync(options)
      Face.Detect(data.base64, (detected) => {
        ToastAndroid.show(detected, ToastAndroid.SHORT)
        this.setState({image64: data.base64})
        this.onFaceDetect()
      }, (error) => {
        ToastAndroid.show(error, ToastAndroid.SHORT)
      })
    }
  };
  recognizePicture = async function() {
    if (this.camera) {
      const options = { width: 200, base64: true };
      const data = await this.camera.takePictureAsync(options)
      Face.Detect(data.base64, (detected) => {
        ToastAndroid.show(detected, ToastAndroid.SHORT)
        Face.Identify(data.base64, (unrecognized) => {
          ToastAndroid.show(unrecognized, ToastAndroid.SHORT)
        })
      }, (error) => {
        ToastAndroid.show(error, ToastAndroid.SHORT)
      })
      console.log(data.uri);
    }
  };
  onFaceDetect() {
    if(this.state.faces.length == 0)
      this.newFaceDetected();
    else {
      DialogManager.show({
        title: 'Trained Faces',
        titleAlign: 'center',
        haveOverlay: false,
        animationDuration: 200,
        SlideAnimation: new SlideAnimation({slideFrom: 'top'}),
        children: (
          <DialogContent >
              <View>
                <ListView dataSource = {this.state.dataSource} renderRow = {this.renderRow.bind(this)} />
              </View>
              <DialogButton text = "Close" align = 'right' onPress = {() => DialogManager.dismiss()} />
              <DialogButton text = "New Face" align = 'right' onPress = {() => this.newFaceDetected()} />
          </DialogContent>
        ),
      }, () => {
        console.log('callback - show')
      });
    }
  }
  newFaceDetected() {
    DialogManager.show({
      title: 'Train Face',
      titleAlign: 'center',
      haveOverlay: false,
      animationDuration: 200,
      SlideAnimation: new SlideAnimation({slideFrom: 'top'}),
      children: (
        <DialogContent>
            <View>
              <TextInput placeholder="face name" onChangeText={(Fname) => this.setState({Fname})} />
            </View>
          <DialogButton text = "Save" onPress= {() => this.newFaceImage()}/>
        </DialogContent>
      ),
    }, () => {
      console.log('callback - show');
    });
  }
  newFaceImage() {
    const faces = [...this.state.faces, {Fname: this.state.Fname, captured: this.state.captured}]
    const images = {image64: this.state.image64, Fname: this.state.Fname}
    Face.Training(images, (result) => alert(result), (err) => alert(err))
    this.setState({dataSource: this.ds.cloneWithRows(faces), faces})
    DialogManager.dismissAll()
  }
  saveCaptureImage(faceData) {
    if(faceData.captured == 5)
      ToastAndroid.show("More photos are not allowed", ToastAndroid.SHORT)
    else {
      const slice = this.state.faces.slice()
      slice.map((face) => {
        if(face.Fname == faceData.Fname)
          face.captured++
      })
      this.setState({dataSource: this.ds.cloneWithRows(slice)})
      const images = {image64: this.state.image64, Fname: faceData.Fname}
      Face.Training(images, (result) => alert(result), (err) => alert(err))
    }
    DialogManager.dismiss()
  }
  renderRow(rowData) {
    return(
          <TouchableHighlight onPress= {() => this.saveCaptureImage(rowData)} underlayColor='transparent' >
            <View style = {{
                flex:1,
                flexDirection: 'row',
                padding: 15,
                alignItems: 'center',
                borderColor: '#D7D7D7',
                borderBottomWidth: 1
            }}>
            <Text style = {{fontSize: 16}}>{rowData.captured}</Text>
                <View style = {{paddingLeft: 20}}>
                  <Text style = {{fontSize: 18}}>{rowData.Fname}</Text>
                </View>
            </View>
          </TouchableHighlight>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#D7D7D7',
    borderRadius: 5,
    padding: 10,
    paddingHorizontal: 10,
    alignSelf: 'center',
    margin: 10
  }
});

    google()
    jcenter()
    maven { url 'https://www.jitpack.io' }
    maven { url "https://maven.google.com" }
}

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

defaultConfig {
    applicationId "com.facereco"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
    
}
splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
    }
}
signingConfigs {
    debug {
        storeFile file('debug.keystore')
        storePassword 'android'
        keyAlias 'androiddebugkey'
        keyPassword 'android'
    }
}
buildTypes {
    debug {
        signingConfig signingConfigs.debug
    }
    release {
        // Caution! In production, you need to generate your own keystore file.
        // see https://reactnative.dev/docs/signed-apk-android.
        signingConfig signingConfigs.debug
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}

// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
    variant.outputs.each { output ->
        // For each separate APK per architecture, set a unique version code as described here:
        // https://developer.android.com/studio/build/configure-apk-splits.html
        def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
        def abi = output.getFilter(OutputFile.ABI)
        if (abi != null) {  // null for the universal-debug, universal-release variants
            output.versionCodeOverride =
                    versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
        }

    }
}

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
  exclude group:'com.facebook.fbjni'
}

debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.facebook.flipper'
    exclude group:'com.squareup.okhttp3', module:'okhttp'
}

debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.facebook.flipper'
}

if (enableHermes) {
    def hermesPath = "../../node_modules/hermes-engine/android/";
    debugImplementation files(hermesPath + "hermes-debug.aar")
    releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
    implementation jscFlavor
}

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true"/>
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>
<uses-feature android:name="android.hardware.camera.front" android:required="true"/>
<uses-feature android:name="android.hardware.camera.front.autofocus" android:required="false"/>
<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

 error: cannot find symbol
            new FaceModulePackage()

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ToastAndroid,
  ListView,
  TextInput,
  TouchableHighlight,
  DeviceEventEmitter,
  StatusBar,
  Image,
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import Face from 'react-native-facerecognition';
import DialogManager, {
  SlideAnimation,
  DialogContent,
  DialogTitle,
  DialogButton,
} from 'react-native-dialog-component';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });
    const faces = [];
    this.state = {
      dataSource: this.ds.cloneWithRows(faces),
      captured: 1,
      faces: faces,
      type: 'front',
    };
  }
  componentDidMount() {
    StatusBar.setHidden(true);
    DeviceEventEmitter.addListener(
      'onFaceRecognized',
      this.onFaceRecognized.bind(this)
    );
    DeviceEventEmitter.addListener('onClean', this.onClean.bind(this));
  }
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={this.state.type}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={
            'We need your permission to use your camera phone'
          }
          onMountError={msg => this.cameraError(msg)}
          onCameraReady={() => {
            this.onCameraReady();
          }}>
          <View
            style={{
              flex: 0,
              flexDirection: 'row',
              justifyContent: 'flex-end',
            }}>
            <TouchableOpacity
              onPress={this.recognizePicture.bind(this)}
              style={styles.capture}>
              <Image
                style={{ width: 35, height: 35 }}
                source={{
                  uri:
                    'https://cdn3.iconfinder.com/data/icons/antivirus-internet-security-thin-colored-outline/33/facial_recognition-512.png',
                }}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  type: this.state.type === 'back' ? 'front' : 'back',
                })
              }
              style={styles.capture}>
              <Image
                style={{ width: 35, height: 35 }}
                source={{
                  uri:
                    'https://user-images.githubusercontent.com/20476002/43048582-2fa1b864-8dea-11e8-968a-2bb209302604.png',
                }}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => this.clean()}
              style={styles.capture}>
              <Image
                style={{ width: 35, height: 35 }}
                source={{
                  uri:
                    'https://cdn2.iconfinder.com/data/icons/basic-4/512/delete-512.png',
                }}
              />
            </TouchableOpacity>
          </View>
          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
            <TouchableOpacity
              onPress={this.takePicture.bind(this)}
              style={styles.capture}>
              <Image
                style={{ width: 35, height: 35 }}
                source={{
                  uri:
                    'https://user-images.githubusercontent.com/20476002/43048598-67bed272-8dea-11e8-9736-a6ebb6e28362.png',
                }}
              />
            </TouchableOpacity>
          </View>
        </RNCamera>
      </View>
    );
  }

  onFaceRecognized(data) {
    ToastAndroid.show(
      'Recognized: ' + data.name + ' Distance: ' + data.distance,
      ToastAndroid.LONG
    );
  }
  onClean(msg) {
    this.setState({ faces: [] });
    ToastAndroid.show(msg, ToastAndroid.SHORT);
  }
  clean() {
    Face.Clean();
  }
  onCameraReady() {
    Face.Start(
      Face.Detection.DEEP,
      success => {
        ToastAndroid.show('Train initialized', ToastAndroid.SHORT);
      },
      error => {
        ToastAndroid.show(error, ToastAndroid.LONG);
      }
    );
  }

  takePicture = async function() {
    if (this.camera) {
      const options = { width: 200, base64: true };
      const data = await this.camera.takePictureAsync(options);
      Face.Detect(
        data.base64,
        detected => {
          ToastAndroid.show(detected, ToastAndroid.SHORT);
          this.setState({ image64: data.base64 });
          this.onFaceDetect();
        },
        error => {
          ToastAndroid.show(error, ToastAndroid.SHORT);
        }
      );
    }
  };
  recognizePicture = async function() {
    if (this.camera) {
      const options = { width: 200, base64: true };
      const data = await this.camera.takePictureAsync(options);
      Face.Detect(
        data.base64,
        detected => {
          ToastAndroid.show(detected, ToastAndroid.SHORT);
          Face.Identify(data.base64, unrecognized => {
            ToastAndroid.show(unrecognized, ToastAndroid.SHORT);
          });
        },
        error => {
          ToastAndroid.show(error, ToastAndroid.SHORT);
        }
      );
      console.log(data.uri);
    }
  };
  onFaceDetect() {
    if (this.state.faces.length == 0) this.newFaceDetected();
    else {
      DialogManager.show(
        {
          title: 'Trained Faces',
          titleAlign: 'center',
          haveOverlay: false,
          animationDuration: 200,
          SlideAnimation: new SlideAnimation({ slideFrom: 'top' }),
          children: (
            <DialogContent>
              <View>
                <ListView
                  dataSource={this.state.dataSource}
                  renderRow={this.renderRow.bind(this)}
                />
              </View>
              <DialogButton
                text="Close"
                align="right"
                onPress={() => DialogManager.dismiss()}
              />
              <DialogButton
                text="New Face"
                align="right"
                onPress={() => this.newFaceDetected()}
              />
            </DialogContent>
          ),
        },
        () => {
          console.log('callback - show');
        }
      );
    }
  }
  newFaceDetected() {
    DialogManager.show(
      {
        title: 'Train Face',
        titleAlign: 'center',
        haveOverlay: false,
        animationDuration: 200,
        SlideAnimation: new SlideAnimation({ slideFrom: 'top' }),
        children: (
          <DialogContent>
            <View>
              <TextInput
                placeholder="face name"
                onChangeText={Fname => this.setState({ Fname })}
              />
            </View>
            <DialogButton text="Save" onPress={() => this.newFaceImage()} />
          </DialogContent>
        ),
      },
      () => {
        console.log('callback - show');
      }
    );
  }
  newFaceImage() {
    const faces = [
      ...this.state.faces,
      { Fname: this.state.Fname, captured: this.state.captured },
    ];
    const images = { image64: this.state.image64, Fname: this.state.Fname };
    Face.Training(images, result => alert(result), err => alert(err));
    this.setState({ dataSource: this.ds.cloneWithRows(faces), faces });
    DialogManager.dismissAll();
  }
  saveCaptureImage(faceData) {
    if (faceData.captured == 5)
      ToastAndroid.show('More photos are not allowed', ToastAndroid.SHORT);
    else {
      const slice = this.state.faces.slice();
      slice.map(face => {
        if (face.Fname == faceData.Fname) face.captured++;
      });
      this.setState({ dataSource: this.ds.cloneWithRows(slice) });
      const images = { image64: this.state.image64, Fname: faceData.Fname };
      Face.Training(images, result => alert(result), err => alert(err));
    }
    DialogManager.dismiss();
  }
  renderRow(rowData) {
    return (
      <TouchableHighlight
        onPress={() => this.saveCaptureImage(rowData)}
        underlayColor="transparent">
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            padding: 15,
            alignItems: 'center',
            borderColor: '#D7D7D7',
            borderBottomWidth: 1,
          }}>
          <Text style={{ fontSize: 16 }}>{rowData.captured}</Text>
          <View style={{ paddingLeft: 20 }}>
            <Text style={{ fontSize: 18 }}>{rowData.Fname}</Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
  },
  preview: {
    flex: 1,
    //justifyContent: 'flex-end',
    //alignItems: 'center',
  },
  capture: {
    flex: 0,
    //backgroundColor: '#D7D7D7',
    //borderRadius: 5,
    padding: 10,
    //paddingHorizontal: 10,
    alignSelf: 'center',
    margin: 10,
  },
});