Come creare un'app mobile per il riconoscimento facciale con React Native, Expo e Kairos

Una breve introduzione ed esempio di creazione di un'applicazione mobile per il rilevamento del volto.

Il riconoscimento facciale - un tempo roba da romanzi di fantascienza - è ora una tecnologia ampiamente utilizzata. In questo post, ti mostrerò come sviluppare un'app mobile di rilevamento del volto di base con React Native ed Expo.

React Native è uno strumento semplice e veloce per sviluppare app mobili multipiattaforma.
Expo rende lo sviluppo di React Native ancora più veloce fornendo tutta una serie di funzionalità pronte all'uso per far funzionare rapidamente la tua app.

Iniziamo!

Costruire con React Native? Impalcatura e distribuzione di app React Native con modelli di qualità garantita gratuitamente nel generatore di app Crowdbotics. Controlla.

Innanzitutto, devi installare Expo CLI (preferibilmente come globale) nel tuo sistema. Per fare ciò, eseguire il comando seguente nel prompt dei comandi nella posizione in cui si desidera salvare il progetto.

(Avrai bisogno di avere Node.js (versione 6 o successiva) installato sul tuo computer per eseguire questo comando. Scarica l'ultima versione di Node.js.)

npm installa -g expo-cli

Ora esegui questo comando successivo per avviare il tuo progetto. Denominalo come preferisci.

expo init >

Inizia a scrivere il codice nel tuo file di lavoro. Di default è App.js.

Importa le cose che vuoi usare nel tuo progetto.

importare {Permessi, Fotocamera, FaceDetector,} da "expo";

Innanzitutto, ottieni l'autorizzazione dall'uso della fotocamera all'avvio dell'app.

componente asincronoWillMount () {
    const {status} = await Permissions.askAsync (Permissions.CAMERA);
    this.setState ({hasCameraPermission: stato === 'concesso'});
}

Ora, se l'utente dà il permesso di utilizzare la fotocamera, utilizzare il componente della fotocamera in cui si desidera aprire la fotocamera.

ritorno (
    style = {} styles.camera
    type = { 'fronte'}
    onFacesDetected = {} this.handleFacesDetected
    faceDetectorSettings = {{
         modalità: FaceDetector.Constants.Mode.fast,
         detectLandmarks: FaceDetector.Constants.Mode.none,
         runClassifications: FaceDetector.Constants.Mode.none
    }}>
);

Se viene rilevato un volto, verrà attivata la funzione "handleFacesDetected".

handleFacesDetected = ({faces}) => {
    if (faces.length> 0) {
        this.setState ({faces});
    }
};

Sto aggiungendo l'attributo "ref" e un pulsante al componente della fotocamera in modo che quando premiamo il pulsante invierà la nostra immagine al processo di riconoscimento per valutare se registrarsi o riconoscerlo.

 {this.camera = ref; }}
    onFacesDetected = {} this.handleFacesDetected
    faceDetectorSettings = {{
        modalità: FaceDetector.Constants.Mode.fast,
        detectLandmarks: FaceDetector.Constants.Mode.none,
        runClassifications: FaceDetector.Constants.Mode.none,
}}>
 this.snap (false)}>
    
        {''} Iscriviti {''}
    
 this.snap (true)}>
    
        {' '}Riconoscere{' '}
    
);
//dove,
snap = async (riconoscere) => {
    provare {
        if (this.camera) {
            lascia che foto = attenda questo.camera.takePictureAsync ({base64: true});
            if (! faceDetected) {
                avviso ('Nessun volto rilevato!');
                ritorno;
            }

            const userId = makeId ();
            const {base64} = foto;
            questo [riconoscere? 'riconoscere': 'iscriviti'] ({userId, base64});
        }
    } cattura (e) {
        console.log ('error on snap:', e)
    }
};

Siamo in grado di rilevare volti sulla fotocamera. Il nostro prossimo obiettivo è riconoscere i volti.

Per raggiungere questo obiettivo useremo Kairos. Per usare Kairos, devi visitare https://kairos.com e registrarti come sviluppatore.

Una volta effettuata la registrazione, otterrai la chiave dell'app e l'ID app. Queste sono le due cose che dovrebbero assicurarti di essere in grado di accedere al server su Kairos per poter elaborare le tue immagini. È la chiave per riconoscere il tuo viso.

Quindi, configura la tua app con queste credenziali

const BASE_URL = 'https://api.kairos.com/';
const HEADERS = {
    'Accept': 'application / json',
    "Content-Type": "application / json",
    'app_id': '',
    'app_key': ''
}

Puoi utilizzare diverse API utilizzando l'URL di base in questo modo:
(POST) https://api.kairos.com/enroll
(POST) https://api.kairos.com/recognize
(POST) https://api.kairos.com/detect
(POST) https://api.kairos.com/gallery/list_all
eccetera.

Crea le tue funzioni utilizzando queste API.

Esempi delle funzioni di registrazione e riconoscimento sono i seguenti:

// Metodo di iscrizione
const iscr = async ({userId, base64}) => {
    const rawResponse = await fetch (`$ {BASE_URL} iscriviti`, {
        metodo: 'POST',
        intestazioni: HEADERS,
        body: JSON.stringify ({
            "immagine": base64,
            "subject_id": `MySocial _ $ {userId}`,
            "gallery_name": "MyGallery"
        })
    });
    const content = await rawResponse.json ();
    restituire contenuti;
}
// Riconosci il metodo
const riconoscere = async (base64) => {
    const rawResponse = await fetch (`$ {BASE_URL} riconoscere`, {
        metodo: 'POST',
        intestazioni: HEADERS,
        body: JSON.stringify ({
            "immagine": base64,
            "gallery_name": "MyGallery"
        })
    });
    const content = await rawResponse.json ();
    restituire contenuti;
}

Dove,

  • image => URL accessibile pubblicamente, caricamento file o foto codificata Base64.
  • subject_id => (può essere casuale) la chiave per l'immagine (definita da te) viene utilizzata come identificatore per il viso.
  • gallery_name => è il nome della cartella in cui verranno salvate le tue foto (definite da te) per identificare la galleria.

Una risposta positiva dell'API "riconoscere" dovrebbe essere così:

Ed eccoti qua! Nelle "immagini" sono presenti elenchi di candidati che includono gli ID dei volti corrispondenti.

Questa è una breve introduzione al riconoscimento facciale. Puoi anche controllare i documenti di Kairos per maggiori dettagli.

Grazie per aver letto! :-)

Se crei un'app di riconoscimento facciale interessante con React Native, Kairos o Expo, lascia un link nei commenti. Mi piacerebbe dargli un'occhiata.

Costruire un'app Web o mobile?

Crowdbotics è il modo più veloce per creare, avviare e ridimensionare un'applicazione.

Sviluppatore? Prova Crowdbotics App Builder per creare rapidamente impalcature e distribuire app con una varietà di framework popolari.

Occupato o non tecnico? Unisciti a centinaia di team felici che creano software con PM di Crowdbotics e sviluppatori esperti. Scorri la cronologia e i costi con Crowdbotics Managed App Development gratuitamente.