React Native, Expo və Kairos ilə mobil üz tanıma tətbiqi yaratmaq

Mobil bir üz tanıma tətbiqi yaratmaq üçün sürətli bir giriş və nümunə.

Bir vaxtlar elmi fantastika romanlarının üzünü tanıma - indi tanınmış bir texnologiyadır. Bu yazıda, əsas üz tanıma mobil tətbiqi yaratmaq üçün React Native və Expo-dan necə istifadə edəcəyinizi göstərəcəyəm.

React Native, cross-platform mobil tətbiqetmələrin inkişafı üçün sürətli və asan bir vasitədir. Expo, tətbiqinizi tez bir zamanda işə salmaq üçün istifadə edə biləcəyiniz müxtəlif xüsusiyyətlər əlavə edərək React Native inkişafını daha da sürətləndirir.

Gəlin başlayaq!

React Native ilə tikilirsiniz? Crowdbotics tətbiqetmə istehsalçısında keyfiyyət zəmanətli şablonlarla React Native tətbiqetmələrinin iskele və təchizatı. Dinləmək.

Əvvəlcə sisteminizə Expo CLI (tercihen qlobal olaraq) quraşdırmalısınız. Bunu etmək üçün, layihənizi saxlamaq istədiyiniz yerdəki komut istəməsində aşağıdakı əmri çalıştırın.

(Bu əmri işə salmaq üçün kompüterinizdə Node.js (versiya 6 və ya daha yuxarı) quraşdırılmış olmalıdır. Node.js.-nın son versiyasını yükləyin.)

npm quraşdırma -g expo-cli

İndi layihənizə başlamaq üçün bu növbəti əmri işə salın. İstədiyiniz kimi adlandırın.

expo init

İşləmə sənədinizdə kodlamağa başlayın. Varsayılan olaraq, bu App.js.

Layihənizdə istifadə etmək istədiyiniz obyektləri idxal edin.

{Expo "-dan {Permmissions, Camera, FaceDetector,} idxal edin;

Tətbiqə başlayarkən əvvəlcə kameranızı istifadə etmək üçün icazə alın.

uyğunsuz komponentWillMount () {
const {status} = Permmissions.askAsync (Permmissions.CAMERA) gözləyir;
this.setState ({hasCameraPermission: status === 'grant'});
}

İndi istifadəçi kameradan istifadə etmək üçün icazə verəndə kameranı açmaq istədiyiniz kamera komponentindən istifadə edin.

Qayıt (
stil = {styles.camera}
type = {'ön'}
onFacesDetected = {this.handleFacesDetected}
faceDetectorSettings = {{
rejimi: FaceDetector.Constants.Mode.fast,
detectLandmarks: FaceDetector.Constants.Mode.none,
runClassitions: FaceDetector.Constants.Mode.none
}}>
);

Bir üz tanınırsa, "handleFacesDetected" funksiyası işə salınır.

handleFacesDetected = ({üzlər}) => {
əgər (üzlər.length> 0) {
this.setState ({üzlər));
}
};

Kamera komponentinə "ref" atributunu və bir düyməni əlavə edirəm ki, düyməyə basıldıqda şəklimizin qeydiyyata alınıb tanınmamasını qiymətləndirmək üçün tanınma prosesinə göndərilsin.

{this.camera = ref; }} onFacesDetected = {this.handleFacesDetected} faceDetectorSettings = {{mode: FaceDetector.Constants.Mode.fast, detectLandmarks: FaceDetector.Constants.Mode.none, runClassifications: FaceDetector.Constants.Mode.none,}}>
this.snap (false)}> {''} Qeydiyyatdan keçin {''}
this.snap (doğru)}> {''} Tanıma {''}
);
// harada,
snap = async (detect) => {try {if (this.camera) {let photo = wait for this.camera.takePictureAsync ({base64: true}); if (! faceDetected) {alert ('Üz aşkarlanmadı!'); Qayıt; } const userId = makeId (); const {base64} = foto; bunu tanıyıram? 'Tanın': 'Qeydiyyatdan keç'] ({userId, base64}); }} tut (e) {console.log ('snapda səhv:', e)}};

Kamerada üzləri tanıya bilərik. Növbəti hədəfimiz üzləri tanımaqdır.

Bu məqsədə çatmaq üçün Kairosdan istifadə edəcəyik. Kairos'u istifadə etmək üçün https://kairos.com saytını ziyarət etməli və inkişaf etdirici olaraq qeydiyyatdan keçməlisiniz.

Daxil olduqdan sonra tətbiq açarınızı və tətbiq kimliyinizi alacaqsınız. Təsvirlərinizi işləmək üçün Kairosun serverinə girişinizi təmin edəcək iki şey bunlardır. Üzünüzü tanımağın açarıdır.

Sonra tətbiqinizi bu etimadnamə ilə konfiqurasiya edin

const BASE_URL = 'https://api.kairos.com/'; const HEADERS = {'Qəbul et': 'application / json', 'Content-Type': 'application / json', 'app_id': ' ',' app_key ':' '}

Aşağıdakı əsas URL istifadə edərək fərqli API istifadə edə bilərsiniz: (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 və s.

Bu API-lərdən istifadə edərək funksiyalarınızı yaradın.

Qeyd və tanınma funksiyalarının nümunələri bunlardır:

// Qeyd metodu const enroll = async ({userId, base64}) => {const rawResponse = sorğunu gözləyir ("$ {BASE_URL} qeyd", {metod: 'POST', başlıqlar: HEADERS, bədən: JSON.stringify ( {"image": base64, "subject_id": `MySocial _ $ {userId}`, "gallery_name": "MyGallery"})});
const content = rawResponse.json () gözləyin; Məzmunu qaytarın; }
// Algılama metodu const detect = async (base64) => {const rawResponse = sorğunu gözləyin ("$ {BASE_URL} detect", {method: 'POST', başlıqlar: HEADERS, gövdə: JSON.stringify ({"image ": base64," gallery_name ":" MyGallery "})});
const content = rawResponse.json () gözləyin; Məzmunu qaytarın; }

Harada,

  • image => Hər kəsə açıq URL, fayl yükləməsi və ya Base64 kodlu foto.
  • subject_id => (təsadüfi ola bilər) şəklin açarı (sizin təyin etdiyiniz) üz üçün bir identifikator kimi istifadə olunur.
  • gallery_name => şəkillərinizin saxlandığı (sizin təyin etdiyiniz) və qalereyanı müəyyənləşdirmək üçün istifadə olunan qovluq adıdır.

Discovery API-nin uğurlu cavabı belə olmalıdır:

Və gedək! "Şəkillər" də uyğun Face ID-lərini ehtiva edən namizəd siyahıları var.

Bu üz tanıma üçün qısa bir girişdir. Daha çox məlumat üçün Kairos sənədlərini də kontrol edə bilərsiniz.

Oxuduğunuz üçün təşəkkür edirik! :-)

React Native, Kairos və ya Expo istifadə edərək yaxşı bir üz tanıma tətbiqetməsi edirsinizsə, şərhlərə bir link əlavə edin. Sınamaq istərdim.

Veb və ya mobil tətbiq yaradırsınız?

Crowdbotics bir tətbiqetmə qurma, işə salma və miqyaslandırma üçün ən sürətli yoldur.

İnkişaf etdirici? Müxtəlif populyar çərçivələrdən istifadə edərək tətbiqləri sürətlə qurmaq və yerləşdirmək üçün Crowdbotics Tətbiq Oluşturucusunu sınayın.

Məşğul və ya texniki deyil? Crowdbotics PM və təcrübəli inkişaf etdiricilərlə proqram inkişaf etdirən yüzlərlə xoşbəxt komandaya qoşulun. Crowdbotics Managed App Development ilə cədvəl və xərcləri pulsuz olaraq saxlayın.