إنشاء ماسح ضوئي QR: برنامج تعليمي للكاميرا الأصلية

في هذا البرنامج التعليمي React Native Camera ، سننشئ تطبيق قارئ رمز الاستجابة السريعة. سيكون قادرًا على قراءة رموز QR في الوقت الفعلي وعرض محتواها على الشاشة في وقت الاكتشاف. سنستخدم CLI Quickstart الخاص بـ React Native.

(ملاحظة: إذا كنت بحاجة إلى مساعدة في إعداد هذا ، فيمكنك دائمًا الرجوع إلى صفحة React Native Getting Started - ولا تنس النقر على زر "React Native CLI Quickstart" ، حيث يأتي خيار "Expo CLI Quickstart" محددًا مسبقًا في ذلك الوقت من كتابة هذا المقال.)

لماذا تتفاعل مع المحتوى الأصلي؟

يُعد React Native إطار عمل قيمًا يستعير نموذج React ومبادئ التصميم لتمكين التطوير السريع عبر الأنظمة الأساسية لواجهات المستخدم السريعة. Facebook و Airbnb و Uber والعديد من الآخرين لديهم بالفعل أحدث تطبيقاتهم التي تم إنشاؤها باستخدام React Native.

ما هي كاميرا React الأصلية؟

تعتبر React Native Camera (RNCamera) هي العنصر الأساسي عندما يتعلق الأمر بتنفيذ وظائف الكاميرا في تطبيق React Native. يساعدك هذا المكون على التواصل مع نظام التشغيل الأصلي من خلال بعض الوظائف البسيطة حتى تتمكن من استخدام أجهزة الجهاز. يمكنك إنشاء تطبيقاتك حول هذه الوظائف دون الدخول في متاعب التعليمات البرمجية الأصلية. تدعم RNCamera بالفعل:

• الصور
• أشرطة فيديو
• الكشف عن الوجه
• مسح الباركود
• التعرف على النص (Android فقط)

لاحظ أن RNCamera كانت تأتي في نكهتين:

1. كاميرا RN
2. RCTCamera (مهملة)

... لذا تأكد من استخدام RNCamera حتى تتمكن من الحصول على آخر التحديثات باستمرار.

ملاحظة: تعتمد React Native Camera بشكل كبير على وحدة كاميرا Expo ، ومن السهل جدًا الانتقال ذهابًا وإيابًا بين الاثنين.

إنشاء تطبيقك الأول باستخدام RNCamera

قبل أن نبدأ الماسح الضوئي React Native QR ، هناك بعض التبعيات التي سنحتاج إلى تثبيتها.

تثبيت تبعيات RNCamera

يحتاج إعدادنا إلى إصدار JDK 1.7 كحد أدنى (والذي من المحتمل أن يكون لديك) وإذا كنت تستخدم Android ، فستحتاج إلى buildToolsVersion أحدث من 25.0.2. (من المؤكد أن هناك قائمة أكثر تفصيلاً وحداثة في المستندات.)

لنبدأ أولاً بإنشاء مشروع React Native جديد:

 react-native init CameraExample

الآن دعنا ننشر الإصدار الأول من مثالنا على كاميرا React Native على الهاتف.

 cd CameraExample react-native run-android

يجب أن تبدو مثل لقطة الشاشة أدناه:

حان الوقت الآن لتثبيت حزمة react-native-camera في مشروعنا. سنستخدم خيار "التثبيت التلقائي في الغالب مع التفاعل الأصلي". (هناك برامج أخرى مثل التثبيت التلقائي في الغالب مع CocoaPods والتثبيت اليدوي ، لكننا سنلتزم بالخيار الأول ، لأنه الأكثر كفاءة.) ما عليك سوى تشغيل:

 npm install react-native-camera --save react-native link react-native-camera

يجب عليك أيضًا إضافة الأذونات التالية إلى android/app/src/main/AndroidManifest.xml :

 package="com.cameraexample"> <uses-permission android:name="android.permission.INTERNET" /> + <uses-permission android:name="android.permission.CAMERA" /> + <uses-permission android:name="android.permission.RECORD_AUDIO"/> + <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> + <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <application android:name=".MainApplication"

ستحتاج أيضًا إلى تعيين إستراتيجية الأبعاد في android/app/build.gradle — ليس لها افتراضي وستتلقى خطأ إذا لم تحددها:

 defaultConfig { applicationId "com.cameraexample" minSdkVersion rootProject.ext.minSdkVersion + missingDimensionStrategy 'react-native-camera', 'general' targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0"

ملاحظة: يجب عادةً تعيين استراتيجية الأبعاد على " general " على النحو الوارد أعلاه. ومع ذلك ، يمكنك ضبطه على mlkit بدلاً من ذلك ، إذا كنت ترغب في استخدام MLKit للتعرف على النص / الوجه / الرمز الشريطي.

بعد التثبيت ، ستحتاج إلى استخدام run-android لتثبيت التبعيات الجديدة:

 react-native run-android

إذا سارت الأمور على ما يرام ، يجب أن ترى نفس شاشة الترحيب React Native على جهازك أو جهاز المحاكاة مرة أخرى.

إعداد الكاميرا

أولاً ، لنبدأ بتعديل App.js واستيراد RNCamera هناك:

 import { RNCamera } from 'react-native-camera';

بعد ذلك ، سنقوم بتعديل وظيفة RNCamera render حديثًا. لاحظ سمة style المضافة إلى الكاميرا حتى تأخذ ملء الشاشة. بدون هذه الأنماط ، قد لا تتمكن من رؤية عرض الكاميرا على شاشتك ، حيث إنها لن تشغل أي مساحة:

 render() { return ( <View style={styles.container}> - <Text style={styles.welcome}>Welcome to React Native!</Text> - <Text style={styles.instructions}>To get started, edit App.js</Text> - <Text style={styles.instructions}>{instructions}</Text> + <RNCamera + ref={ref => { + this.camera = ref; + }} + style={{ + flex: 1, + width: '100%', + }} + > + </RNCamera> </View> ); }

بعد إضافة هذا الرمز ، يجب أن تحتوي واجهتك على الكاميرا في وضع ملء الشاشة ، تمامًا مثل لقطة الشاشة أدناه:

يمكننا الآن رؤية الرموز الشريطية (حيث يمكننا رؤية رموز الاستجابة السريعة الخاصة بنا للاختبار تظهر على الشاشة أعلاه) ولكن لا يمكننا قراءتها حتى الآن. دعنا نستخدم خوارزمية RNCamera للتعرف على ما هو مكتوب داخل كل منها.

قراءة معلومات الباركود

من أجل قراءة معلومات الرمز الشريطي ، سنستخدم onGoogleVisionBarcodesDetected حتى نتمكن من استدعاء دالة واستخراج المعلومات. دعنا نضيف ذلك في مكون <RNCamera> barcodeRecognized بوظيفة BarcodeRecognized للعناية بها. لاحظ أن onGoogleVisionBarcodesDetected تُرجع كائنًا يحتوي على خاصية barcodes ، والتي تحتوي على مجموعة من جميع الرموز الشريطية التي تم التعرف عليها في الكاميرا.

ملاحظة: لا تتوفر تقنية onGoogleVisionBarcodesDetected QR Code إلا على نظام Android ، ولكن إذا كنت ترغب في اتباع نهج عبر الأنظمة الأساسية ، فمن الأفضل onBarCodeRead . وهو يدعم رمزًا شريطيًا واحدًا فقط في كل مرة — حيث يُترك استخدامه كخيار احتياطي كتدريب للقارئ.

إليك الطريقة التي يجب أن تعتني بها <RNCamera> بعد إضافة onGoogleVisionBarcodesDetected :

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > </RNCamera>

والآن يمكننا التعامل مع الرموز الشريطية في App.js باستخدام الوظيفة أدناه ، والتي ستحذرنا فقط عند اكتشاف رمز شريطي ويجب أن يعرض محتواه على الشاشة:

 barcodeRecognized = ({ barcodes }) => { barcodes.forEach(barcode => console.warn(barcode.data)) };

إليك كيف يبدو أثناء العمل:

تقديم تراكبات الباركود

تُظهر لقطة الشاشة السابقة الآن المعلومات الواردة في الباركود ولكنها لا تسمح لنا بمعرفة الرسالة التي تنتمي إلى أي رمز شريطي. لهذا ، سوف نتعمق أكثر في barcodes التي تم إرجاعها من onGoogleVisionBarcodesDetected ونحاول تحديد كل من الرموز الشريطية على شاشتنا.

لكن أولاً ، سنحتاج إلى حفظ الرموز الشريطية المعترف بها في الحالة حتى نتمكن من الوصول إليها وتقديم تراكب بناءً على البيانات المضمنة. سنقوم الآن بتعديل وظيفتنا المحددة مسبقًا لتبدو كما يلي:

 barcodeRecognized = ({ barcodes }) => this.setState({ barcodes });

سنحتاج الآن إلى إضافة كائن state تمت تهيئته إلى مصفوفة فارغة من الرموز الشريطية حتى لا يحدث أي أخطاء في وظائف render لدينا:

 export default class App extends Component<Props> { state = { barcodes: [], } // ...

لنقم الآن بإنشاء وظيفة renderBarCodes التي يجب إضافتها داخل مكون <RNCamera> :

 <RNCamera ref={ref => { this.camera = ref; }} style={{ flex: 1, width: '100%', }} onGoogleVisionBarcodesDetected={this.barcodeRecognized} > {this.renderBarcodes()} </RNCamera>

يجب أن تأخذ هذه الوظيفة الآن الرموز الشريطية التي تم التعرف عليها من الحالة وتعرضها على الشاشة:

 renderBarcodes = () => ( <View> {this.state.barcodes.map(this.renderBarcode)} </View> );

لاحظ أن التعيين يشير إلى renderBarcode الذي يجب أن يعرض كل رمز شريطي على الشاشة. لقد أضفت بعض التصميمات البسيطة حتى نتمكن من التعرف عليها بسهولة:

 renderBarcode = ({ bounds, data }) => ( <React.Fragment key={data + bounds.origin.x}> <View style={{ borderWidth: 2, borderRadius: 10, position: 'absolute', borderColor: '#F00', justifyContent: 'center', backgroundColor: 'rgba(255, 255, 255, 0.9)', padding: 10, ...bounds.size, left: bounds.origin.x, top: bounds.origin.y, }} > <Text style={{ color: '#F00', flex: 1, position: 'absolute', textAlign: 'center', backgroundColor: 'transparent', }}>{data}</Text> </View> </React.Fragment> );

يحتوي كل رمز شريطي تم التعرف عليه على:

• خاصية bounds لإخبارنا بمكان العثور على الرمز الشريطي على شاشتنا ، والذي سنستخدمه لعرض التراكب الخاص به
• خاصية data توضح لنا ما تم ترميزه في هذا الرمز الشريطي المحدد
• خاصية type التي تخبرنا عن نوع الباركود (2D ، QR ، إلخ.)

باستخدام هذه المعلمات الثلاثة كما لدينا في وظيفة التصيير أعلاه يعطي النتيجة التالية:

النشر عبر الأنظمة الأساسية

كما ذكرنا ، تقوم RNCamera بتجريد الأجزاء الأصلية من وحدة الكاميرا إلى لغة عالمية عبر الأنظمة الأساسية. من المهم ملاحظة أن بعض الميزات ستكون متاحة فقط على نظام أساسي واحد أو قد يكون لها طريقة مختلفة للكتابة على منصة أخرى. للتأكد من أن ما تنوي بناءه مدعوم على جميع الأنظمة الأساسية التي تحتاجها ، تأكد دائمًا من قراءة الوثائق كخطوة أولى. علاوة على ذلك ، من الأفضل دائمًا اختبار حالات الحافة على الأجهزة المختلفة بعد الانتهاء من التنفيذ ، حتى تكون متأكدًا من متانة منتجك.

اذهب إلى الأمام وفك

آمل أن يكون هذا الطعم الصغير لتطوير الواقع المعزز مفيدًا ، وأن لديك الآن تطبيق React Native Camera الأساسي الذي يعمل على هاتفك أو جهاز المحاكاة. لا تتردد في ترك تعليق إذا كان لديك أي أسئلة أو طلبات!