Kako izgraditi mobilnu aplikaciju za prepoznavanje lica s React Native, Expo i Kairos

Kratak uvod i primjer izrade mobilne aplikacije za otkrivanje lica.

Prepoznavanje lica - nekoć znanstveno-fantastični romani - danas je široko korištena tehnologija. U ovom postu pokazat ću vam kako razviti osnovnu mobilnu aplikaciju za otkrivanje lica s React Native i Expo.

React Native brz je i jednostavan alat za razvoj mobilnih aplikacija na više platformi.
Expo čini React Native razvoj još bržim pružajući čitav niz značajki izvan okvira kako biste brzo pokrenuli i pokrenuli vašu aplikaciju.

Započnimo!

Zgrada s React Native? Skenirajte i implementirajte React Native aplikacije s besplatnim predlošcima u alatu za izradu aplikacija Crowdbotics. Provjerite.

Prvo, u svoj sustav morate instalirati Expo CLI (po mogućnosti kao globalni). Da biste to učinili, pokrenite sljedeću naredbu u naredbenom retku na mjestu na kojem želite spremiti svoj projekt.

(Da biste pokrenuli ovu naredbu, na vašem računalu trebate imati instaliran Node.js (verzija 6 ili novija). Preuzmite najnoviju verziju Node.js.)

npm install -g expo-cli

Sada pokrenite sljedeću naredbu za pokretanje projekta. Dajte mu ime kako god želite.

expo init 

Započnite kodiranje u vašoj radnoj datoteci. Prema zadanim postavkama to je App.js.

Uvezite stvari koje želite koristiti u svom projektu.

import {Permissions, kamera, FaceDetector,} iz 'expo';

Prvo, dobiti dozvolu za upotrebu svoje kamere kada se aplikacija pokrene.

async komponentaWillMount () {
    const {status} = čekajte Permissions.askAsync (Permissions.CAMERA);
    this.setState ({hasCameraPermission: status === 'odobren'});
}

Sada, ako korisnik daje dozvolu za upotrebu kamere, koristite komponentu kamere tamo gdje želite otvoriti kameru.

povratak (
    style = {styles.camera}
    type = { 'prednji'}
    onFacesDetected = {this.handleFacesDetected}
    faceDetectorSettings = {{
         način rada: FaceDetector.Constants.Mode.fast,
         detectLandmarks: FaceDetector.Constants.Mode.none,
         runClassifications: FaceDetector.Constants.Mode.none
    }}>
);

Ako se prepozna lice, aktivirat će se funkcija 'handleFacesDetected'.

handleFacesDetected = ({lica}) => {
    ako (lica.duljina> 0) {
        this.setState ({lica});
    }
};

Dodajem atribut 'ref' i gumb komponenti kamere tako da će kad pritisnemo tipku poslati našu sliku u postupak prepoznavanja kako bi se procijenilo treba li je upisati ili prepoznati.

 {this.camera = ref; }}
    onFacesDetected = {this.handleFacesDetected}
    faceDetectorSettings = {{
        način rada: FaceDetector.Constants.Mode.fast,
        detectLandmarks: FaceDetector.Constants.Mode.none,
        runClassifications: FaceDetector.Constants.Mode.none,
}}>
 this.snap (false)}>
    
        {''} Upisite {''}
    
 this.snap (true)}>
    
        {' '}Prepoznati{' '}
    
);
//gdje,
snap = async (prepoznati) => {
    probaj {
        ako (this.camera) {
            neka fotografija = čeka ovo.camera.takePictureAsync ({base64: true});
            ako (! lice prepoznato) {
                upozorenje ('Nije otkriveno lice!');
                povratak;
            }

            const userId = makeId ();
            const {base64} = fotografija;
            ovo [prepoznajete? 'prepoznati': 'upisati'] ({userId, base64});
        }
    } catch (e) {
        console.log ('pogreška pri prestanku:', e)
    }
};

Kamera možemo otkriti lica. Naš sljedeći cilj je prepoznati lica.

Da bismo postigli ovaj cilj, poslužit ćemo se Kairosa. Da biste koristili Kairos, morate posjetiti https://kairos.com i prijaviti se kao programer.

Jednom kada se prijavite, dobit ćete svoj ključ aplikacije i ID aplikacije. To su dvije stvari koje bi osigurale da možete pristupiti poslužitelju na Kairosu kako biste mogli obraditi svoje slike. To je ključ vašeg prepoznavanja lica.

Zatim konfigurirajte svoju aplikaciju s ovim vjerodajnicama

const BASE_URL = 'https://api.kairos.com/';
const HEADERS = {
    'Prihvati': 'aplikacija / json',
    "Vrsta sadržaja": "aplikacija / json",
    'app_id': '',
    'app_key': ''
}

Možete koristiti različite API-je koristeći bazni URL poput ovog:
(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
itd

Izradite svoje funkcije pomoću ovih API-ja.

Primjeri funkcija za upis i prepoznavanje su sljedeći:

// Metoda upisa
const enroll = async ({userId, base64}) => {
    const rawResponse = pričekaj dohvat (`$ {BASE_URL} upis`, {
        metoda: 'POST',
        zaglavlja: HEADERS,
        tijelo: JSON.stringify ({
            "slika": base64,
            "subject_id": `MySocial _ $ {userId}`,
            "gallery_name": "MyGallery"
        })
    });
    const content = čekajte rawResponse.json ();
    uzvratiti sadržaj;
}
// Metoda prepoznavanja
const prepoznati = async (base64) => {
    const rawResponse = pričekaj dohvat (`$ {BASE_URL} prepoznati`, {
        metoda: 'POST',
        zaglavlja: HEADERS,
        tijelo: JSON.stringify ({
            "slika": base64,
            "gallery_name": "MyGallery"
        })
    });
    const content = čekajte rawResponse.json ();
    uzvratiti sadržaj;
}

Gdje,

  • image => Javno dostupan URL, prijenos datoteke ili fotografija zaštićena Base64.
  • subject_id => (može biti nasumičan) tipka za vašu sliku (koju definirate vi) koristi se kao identifikator za lice.
  • gallery_name => je naziv mape u koju će se spremati vaše fotografije (koju ste definirali) koji se koristi za prepoznavanje galerije.

Uspješan odgovor API-ja za prepoznavanje trebao bi biti ovako:

I, evo! U "slikama" imate liste kandidata koje uključuju odgovarajuće identifikacijske dokumente lica.

Ovo je kratki uvod u prepoznavanje lica. Također možete provjeriti dokumente Kairos za više pojedinosti.

Hvala na čitanju! :-)

Ako napravite cool aplikaciju za prepoznavanje lica s React Native, Kairos ili Expo, ostavite vezu u komentarima. Volio bih to provjeriti.

Izgradnja web ili mobilne aplikacije?

Crowdbotics je najbrži način za izgradnju, pokretanje i razmjenu aplikacije.

Programer? Isprobajte Crowdbotics Builder aplikacija za brzo skeniranje i implementaciju aplikacija s različitim popularnim okvirima.

Zauzet ili netehnički? Pridružite se stotinama sretnih timova koji grade softver s Crowdbotics PM-ovima i stručnjacima. Vremenski raspon i troškovi s Crowdbotics Upravljanjem razvojem aplikacija besplatno.