كيفية بناء تطبيقات الجوال التعرف على الوجه مع رد الفعل الأصلي ، ومعرض ، وكايروس

مقدمة موجزة ومثال على بناء تطبيق المحمول للكشف عن الوجه.

أصبحت تقنية التعرف على الوجه - التي كانت ذات يوم مادة الروايات العلمية - تقنية تستخدم على نطاق واسع. في هذا المنشور ، سأوضح لك كيفية تطوير تطبيق أساسي للكشف عن الوجه باستخدام React Native و Expo.

React Native هي أداة سريعة وسهلة لتطوير تطبيقات الأجهزة المحمولة.
يجعل Expo تطوير React Native بشكل أسرع من خلال توفير مجموعة كاملة من الميزات الجاهزة للوصول إلى التطبيق الخاص بك وتشغيله بسرعة.

هيا بنا نبدأ!

بناء مع رد الفعل الأصلي؟ سقالة ونشر تطبيقات React Native مع قوالب مضمونة الجودة مجانًا في أداة إنشاء تطبيق Crowdbotics. تحقق من ذلك.

أولاً ، يجب عليك تثبيت Expo CLI (يفضل أن تكون عالمية) في نظامك. للقيام بذلك ، قم بتشغيل الأمر التالي في موجه الأوامر في الموقع الذي تريد حفظ مشروعك فيه.

(ستحتاج إلى تثبيت Node.js (الإصدار 6 أو الأحدث) على جهاز الكمبيوتر الخاص بك لتشغيل هذا الأمر. قم بتنزيل أحدث إصدار من Node.js.)

npm install -g expo-cli

الآن قم بتشغيل هذا الأمر التالي لبدء مشروعك. سمها ما شئت.

معرض الحرف الأول <اسم مشروعك>

بدء الترميز في ملف العمل الخاص بك. بشكل افتراضي ، يكون App.js.

استيراد الأشياء التي تريد استخدامها في مشروعك.

استيراد {أذونات ، كاميرا ، FaceDetector ،} من "المعرض" ؛

أولاً ، الحصول على إذن من استخدام الكاميرا الخاصة بهم عند بدء تشغيل التطبيق.

مكون غير متزامنWillMount () {
    const {status} = انتظار Permissions.askAsync (الأذونات.CAMERA) ؛
    this.setState ({hasCameraPermission: الوضع === 'منح'})؛
}

الآن ، إذا أعطى المستخدم إذنًا باستخدام الكاميرا ، فاستخدم مكون الكاميرا الذي تريد فتح الكاميرا فيه.

إرجاع (
<عرض النمط = {styles.container}>
<كاميرا
    النمط = {styles.camera}
    اكتب = { 'الجبهة'}
    onFacesDetected = {this.handleFacesDetected}
    faceDetectorSettings = {{
         الوضع: FaceDetector.Constants.Mode.fast ،
         detectLandmarks: FaceDetector.Constants.Mode.none،
         runClassifications: FaceDetector.Constants.Mode.none
    }}>

إذا تم اكتشاف وجه ، فسيتم تشغيل وظيفة "handleFacesDetected".

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

أقوم بإضافة سمة "ref" وزر لمكون الكاميرا بحيث عندما نضغط على الزر ، سوف نرسل صورتنا إلى عملية الاعتراف لتقييم ما إذا كنت تريد التسجيل أو التعرف عليها.

<كاميرا
    النمط = {styles.camera}
    اكتب = { 'الجبهة'}
    ref = {ref => {this.camera = ref؛ }}
    onFacesDetected = {this.handleFacesDetected}
    faceDetectorSettings = {{
        الوضع: FaceDetector.Constants.Mode.fast ،
        detectLandmarks: FaceDetector.Constants.Mode.none،
        runClassifications: FaceDetector.Constants.Mode.none،
}}>
 this.snap (false)}>
    نص <
        style = {{fontSize: 18، marginBottom: 10، color: 'white'}}>
        {' '}يتسجل، يلتحق{' '}
    
 this.snap (true)}>
    نص <
        style = {{fontSize: 18، marginBottom: 10، color: 'white'}}>
        {' '}تعرف{' '}
    
//أين،
المفاجئة = غير متزامن (التعرف) => {
    محاولة {
        if (this.camera) {
            دع الصورة = تنتظر this.camera.takePictureAsync ({base64: true}) ؛
            if (! faceDetected) {
                تنبيه ('لم يتم اكتشاف أي وجه!') ؛
                إرجاع؛
            }

            const userId = makeId () ؛
            const {base64} = الصورة ؛
            هذا [تعترف؟ 'التعرف': 'تسجيل'] ({userId ، base64}) ؛
        }
    } catch (e) {
        console.log ('error on snap:'، e)
    }
}؛

نحن قادرون على اكتشاف الوجوه على الكاميرا. هدفنا التالي هو التعرف على الوجوه.

لتحقيق هذا الهدف سوف نستخدم كايروس. لاستخدام Kairos ، عليك زيارة https://kairos.com والاشتراك كمطور.

بمجرد التسجيل ، ستحصل على مفتاح التطبيق ومعرف التطبيق. هذان هما الشيئان اللذان من شأنهما التأكد من قدرتك على الوصول إلى الخادم في كايروس حتى تتمكن من معالجة صورك. إنه مفتاح التعرف على وجهك.

بعد ذلك ، قم بتكوين التطبيق الخاص بك باستخدام بيانات الاعتماد هذه

const BASE_URL = 'https://api.kairos.com/'؛
رؤساء كونت =
    "قبول": "application / json" ،
    "نوع المحتوى": "application / json" ،
    'app_id': '' ،
    'app_key': ''
}

يمكنك استخدام واجهات برمجة تطبيقات مختلفة باستخدام عنوان URL الأساسي مثل هذا:
(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
إلخ

أنشئ وظائفك باستخدام واجهات برمجة التطبيقات هذه.

أمثلة الدالتين التسجيل والتعرف كالتالي:

// طريقة التسجيل
const register = async ({userId، base64}) => {
    const rawResponse = في انتظار الجلب (`{{BASE_URL}) تسجيل ، {
        طريقة: "وظيفة" ،
        الرؤوس: الرؤساء ،
        النص الأساسي: JSON.stringify ({
            "صورة": base64 ،
            "topic_id": `MySocial _ $ {userId}`،
            "gallery_name": "MyGallery"
        })
    })؛
    محتوى const = في انتظار rawResponse.json ()؛
    إرجاع المحتوى ؛
}
// التعرف على الطريقة
const التعرف = غير متزامن (base64) => {
    const rawResponse = في انتظار الجلب (تعرف {$ {BASE_URL}} ، {
        طريقة: "وظيفة" ،
        الرؤوس: الرؤساء ،
        النص الأساسي: JSON.stringify ({
            "صورة": base64 ،
            "gallery_name": "MyGallery"
        })
    })؛
    محتوى const = في انتظار rawResponse.json ()؛
    إرجاع المحتوى ؛
}

أين،

  • image => عنوان URL متاح للجمهور ، تحميل ملف أو صورة مشفرة Base64.
  • topic_id => (يمكن أن يكون عشوائيًا) يُستخدم مفتاح لصورتك (المعرّفة بواسطتك) كمعرّف للوجه.
  • gallery_name => هو اسم المجلد الذي سيتم حفظ صورك فيه (المعرّفة بواسطتك) للتعرف على المعرض.

يجب أن تكون الاستجابة الناجحة لواجهة برمجة التطبيقات "التعرف" كما يلي:

وهنا تذهب! في "الصور" ، لديك قوائم مرشحين تتضمن معرفات الوجه المتطابقة.

هذه مقدمة موجزة للتعرف على الوجوه. يمكنك أيضًا التحقق من مستندات Kairos للحصول على مزيد من التفاصيل.

شكرا للقراءة! :-)

إذا قمت بإنشاء تطبيق رائع للتعرف على الوجه باستخدام React Native أو Kairos أو Expo ، فقم بإسقاط رابط في التعليقات. أنا أحب أن التحقق من ذلك.

بناء الويب أو تطبيق الجوال؟

Crowdbotics هي أسرع طريقة لإنشاء تطبيق وتشغيله وتوسيع نطاقه.

مطور؟ جرب تطبيق Crowdbotics App Builder لسقالات التطبيقات ونشرها بسرعة باستخدام مجموعة متنوعة من الأطر الشائعة.

مشغول أو غير الفنية؟ انضم إلى المئات من الفرق السعيدة لبناء البرامج مع Crowdbotics PMs والمطورين الخبراء. نطاق الجدول الزمني والتكلفة مع Crowdbotics Managed App Development مجانًا.