دمج مسح الهوية واستخراجها في تطبيقات الويب باستخدام BlinkID SDK

في هذا البرنامج التعليمي المفصل خطوة بخطوة، سنوضح لك كيفية بدء المسح الضوئي واستخراج البيانات من رخصة القيادة باستخدام مجموعة أدوات تطوير البرمجة SDK الخاصة بـ Microblink’s BlinkID.

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

والأفضل من ذلك، اختبر هذا في أقل من 5 دقائق على جهازك (إذا كان لديك Node و Git مثبتين) عن طريق القيام بالخطوات التالية:

• في جهازك الطرفي، استنسخ هذا الريبو باستخدام استنساخ git cloneBlinkID
• احصل على الترخيص من Microblink Developer Hub وأضفه إلى المتغير LICENSE في الملف main.js
• تشغيل cd BlinkID-InBrowserSDK-GettingStarted && npm install && npm run dev
• افتح http://localhost:5173/

إذا كنت تفضل مقطع فيديو قصير لتشغيل هذا المشروع، فلا تتردد في مشاهدته هنا.

إذا كنت ترغب في إعادة إنشاء هذا المشروع من الصفر، فإليك الدليل التفصيلي أدناه.

المشكلة

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

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

والآن، تخيل ما يلي: يمكنك تنفيذ مكتبة تمكّنك من تزويد العملاء بالقدرة على مسح هويتهم بالكاميرا الخاصة بهم فقط، وويلا: تملأ جميع التفاصيل تلقائيًا من هويتهم.

سلس وخالٍ من الأخطاء وسريع!

هل أنت مفتون؟ حسناً، دعنا نستعرض خطوة بخطوة عملية البدء في هذا الأمر.

بشكل عام، يمكن أن يؤدي دمج إمكانات المسح الضوئي المتقدم للمستندات والتعرف الضوئي على الحروف (OCR) في تطبيق الويب الخاص بك إلى تحسين تجربة المستخدم بشكل كبير وتبسيط العمليات بغض النظر عن المجال. تقدم مجموعة أدوات تطوير البرمجيات BlinkID SDK منMicroblink حلولاً قوية وموثوقة للمسح الضوئي ليس فقط لرخص القيادة، ولكن أيضًا لبطاقات الهوية وجوازات السفر وغيرها من المستندات. في منشور المدونة هذا، سأرشدك خلال خطوات دمج BlinkID في تطبيق الويب الخاص بك لاستخراج البيانات من رخصة القيادة، وسنتعمق أكثر في حلول أخرى في بعض المنشورات الأخرى.

المتطلبات الأساسية

تأكد من تثبيت الأدوات التالية:

• Node.js – انتقل إلى موقع الويب الرئيسي وقم بتنزيل الملف القابل للتنفيذ لجهازك
• Git – انتقل إلى موقع الويب الرئيسي وقم بتنزيل الملف القابل للتنفيذ لجهازك

بدء مشروع جديد مع Vite

كما ترى في أحدث تقرير عن حالة JS، أصبحت Vite واحدة من أكثر أدوات الإنشاء المحبوبة، لذا سنستخدمها هنا.

في حال كنت تتساءل عن سبب أهمية ذلك، فهناك شرح طويل جداً هنا، وإجابة سريعة جداً ولكن ممتلئة بالفم:

تستفيد Vite من وحدات ES الأصلية لتوفير خادم تطوير سريع مع استبدال فوري للوحدات النمطية (HMR)، مما يجعل التطوير أكثر سلاسة وكفاءة، وإنتاج بنيات محسنة وجاهزة للإنتاج.

وبصراحة، لا يجب عليك استخدام Vite لأن الأطفال الرائعين يستخدمونه، ولكن لأنه سيجعل تجربتك في التطوير أفضل بكثير.

حسناً، بعد أن انتهينا من الجانب النظري، دعنا نشغل الأمر التالي في جهازك الطرفي: npm create vite@latest. سيؤدي ذلك إلى تشغيل أحدث إصدار من Vite.

عند مطالبتك بذلك، استخدم blinkid-integration كاسم للمشروع، وحدد Vanilla كإطار عمل (بمعنى، لا يوجد إطار عمل) و Javascript كمتغير (بمعنى، اللغة؛ الخيار الآخر هو TypeScript). الناتج الذي يجب أن تراه مشابه لهذا:

✔ اسم المشروع: ... بلينكيد-التكامل ✔ حدد إطار عمل: ' فانيلا ✔ حدد متغيرًا: ' مشروع سقالة جافا سكريبت في / Users/nikola/DEV/test-vite/blinkid-التكامل...
تم.
الآن قم بتشغيل: cd blinkid-integration npm install npm run dev  

تشغيل مشروع السقالات

لنقم بتشغيل الأوامر (في الطرفية) المذكورة في نهاية الإخراج السابق:

cd blinkid-integration npm install npm run dev

بمجرد الانتهاء من ذلك، يجب أن تحصل على مخرج مشابه لهذا:

تمت إضافة 10 حزم، وتدقيق 11 حزمة في 10 ثوانٍ 3 حزم تبحث عن تمويل تشغيل 'npm fund' للحصول على التفاصيل وجدت 0 ثغرات > blinkid-integration@0.0.0 dev > vite المنفذ 5173 قيد الاستخدام، جرب حزمة أخرى...
VITE vITE الإصدار 5.3.2 جاهز في 209 مللي ثانية ➜ محلي: http://localhost:5174/ ➜ الشبكة: استخدم - المضيف للكشف ➜ اضغط h + enter لإظهار المساعدة 

يجب أن ترى الصفحة التالية في متصفحك إذا فتحت http://localhost:5174:

كما هو متوقع، إذا نقرت على زر العد هو 0، سيزداد العدد.

إضافة BlinkID SDK

بعد ذلك، دعنا نقوم بتثبيت BlinkID SDK عن طريق تشغيل الكود التالي في الطرفية:

npm install -تثبيت -حفظ @microblink/blinkid-in-browser-sdk

نسخ مجلد الموارد

هذه خطوة مهمة للغاية، وغالباً ما يتم تجاهلها! لذا، يرجى التأكد من نسخ المجلد resources (الموجود في node_modules/@microblink/blinkid-in-browser-sdk/resources) إلى المجلد public.

إنشاء بنية HTML أساسية

إذا فتحت مشروع السقالة في المحرر المفضل لديك (أنا أستخدم VSCode)، سترى بنية المجلد هذه:

إذا كنت مهتمًا ولم تستخدم Vite من قبل، فإنني أشجعك على الاطلاع على الكود. فهو يعرض إمكانية استخدام الأمر import.

والآن، دعنا نستبدل المحتويات الحالية للملف index.html بما يلي:

<!doctype html>
<html lang="en">
  <الرأس>
    <meta charset="UTF-8"/>
    <رابط rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <العنوان>اختبار BlinkID </title>
  </head>
  <الجسم>
    <معرف الفيديو ="myCameraVideoElement"></الفيديو><النص البرمجي نوع النص="وحدة نمطية" src="/main.js"></النص></الجسم></html>

ستلاحظ أننا قمنا بتغيير title فقط، وبدلاً من <div id="app"></div> أضفنا <video id="myCameraVideoElement"></video>.

إضافة JavaScript لمسح المستندات ضوئيًا واستخراجها

استبدل جميع محتويات الملف main.js بالرمز التالي:

const LICENSE = '''؛ استيراد * كـ BlinkIDSDK من "@microblink/blinkid-in-browser-sdk"؛ إذا (BlinkIDSDK.isBrowserSupported())) { const loadSettings.loadSettings = جديد BlinkIDSDK.WasmSDKLoadSettings(LICENSE); loadSettings.engineLocation = window.site.site.origin + "/resources/" ؛ BlinkIDSDK.loadWasmModule(loadSettings).then ( async (wasmSDK) => { const recognizer = await BlinkIDSDK.createBlinkIdSingleSideSingleRecognizer(wasmSDK); const constognizerRunner = await BlinkIDSDK.createRecognizerRunner( wasmSDK,  [recognizer]، صحيح)؛ const cameraFeed = document.getElementById("myCameraVideoElement")؛ حاول { const videoRecognizer = await BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream( cameraFeed, recognizerRunner)؛ const processResult = await videoRecognizer.التعرف على()؛ وحدة التحكم.log(processResult)؛ إذا (processResult !== BlinkIDSDK.RecognizerResultState.Empty) { const recognitionResult = await recognizer.getResult()؛ وحدة التحكم.log(recognitionResult)؛ } أخرى { console.log("لم يكن التعرف ناجحًا!")؛ } } } إمساك (خطأ) { console.error(error)؛ } } }، (خطأ) => (خطأ) { { console.log("خطأ أثناء تهيئة SDK!"، خطأ)؛ } } } ) ) } آخر { { console.log("هذا المتصفح غير مدعوم من قبل SDK!")؛ } } }

والآن، دعونا نفهم ما الذي يفعله هذا الرمز…

يشكل LICENSE = ''؛ استيراد * باسم BlinkIDSDK من "@microblink/blinkid-in-browser-sdk"؛ إذا (BlinkIDSDK.isBrowserSupported())) {

سطراً بسطر:

• قمنا بتعريف ثابت يسمى LICENSE (سنتناول هذا الأمر في القسم التالي).
• استيراد جميع الأعضاء المصدرة من الحزمة @microblink/blinkid-in-browser-sdk ، وتعيينها إلى الكائن BlinkIDSDK.
• التحقق مما إذا كان المتصفح الحالي مدعومًا من قبل BlinkID SDK (يمكنك الاطلاع على قائمة المتصفحات المدعومة في وثائقنا).

const loadSettings = جديد BlinkIDSDDK.WasmSDKLoadSettings(LICENSE)؛ loadSettings.engineLocation = window.location.origin + "/resources/";

سطراً بسطر:

• Created a new instance of WasmSDKLoadSettings, passing the LICENSE constant.
  • يحتفظ هذا الكائن بإعدادات التكوين لتحميل الوحدة النمطية WebAssembly (WASM) الخاصة بمجموعة تطوير البرمجيات SDK. يمكنك قراءة المزيد عنها هنا.
• Set the location where the WASM engine files are hosted. As you may remember from the Copying the resources folder step, we copied the resources folder to the public folder, and we need to indicate that specifically.
  • إذا كنت ستنسخ/تلصق المحتوى الفعلي للمجلد resources في المجلد public ، فلن تحتاج إلى تعيين هذا على وجه التحديد.
• Called the loadWasmModule method to load the WASM module with the specified settings.
  • تقوم هذه الطريقة بإرجاع وعد، وبمجرد أن يتم حلها بنجاح، يتم تنفيذ دالة رد الاتصال غير المتزامن، مما يعرض المتغير wasmSDK.

const constitute recognizer = await BlinkIDSDK.createBlinkIdSingIdSingleSideRecognizer(wasmSDK)؛ constitute recognizerRunner = await BlinkIDSDK.createRecognizerRunner( wasmSDK, [recognizer], true );

سطراً بسطر:

• إنشاء مثيل BlinkIdSingleSideRecognizer.
• Created a RecognizerRunner instance which manages the recognition process.
  • يأخذ مثيل Wasm SDK، ومصفوفة من أدوات التعرّف، وعلامة منطقية تشير إلى ما إذا كان يجب أن يسمح أداة التعرّف بنتائج متعددة أم لا (اقرأ المزيد عن ذلك هنا).

const cameraFeed = document.getElementById("myCameraVideoElement")؛ const videoRecognizer = await BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream( cameraFeed, recognizerRunner);

سطراً بسطر:

• حدد عنصر الفيديو من DOM الذي سيُستخدم لعرض تغذية الكاميرا.
• في كتلة try/catch ، أنشأنا مثيل VideoRecognizer من دفق الكاميرا باستخدام عنصر الفيديو المحدد (cameraFeed) وعامل التعرف (recognizerRunner).

const processResult = await videoRecognizer.recognize()؛ console.log(processResult)؛ إذا (processResult !=== BlinkIDSDK.RecognizerResultState.Empty) { const recognitionResult = await recognizer.getResult()؛ console.log(recognitionResult)؛ } وإلا { console.log("لم يكن التعرف ناجحًا!")؛ } }

سطراً بسطر:

• بدء عملية التعرف وتسجيل النتيجة على وحدة التحكم.
• تحقق مما إذا كانت نتيجة العملية غير فارغة، ثم انتظر النتائج من أداة التعرف وسجلها في وحدة التحكم.
• إذا كانت نتيجة العملية فارغة، نقوم بتسجيل الرسالة المناسبة.

وأخيراً، نلتقط أي أخطاء من try/catch وعد.

اختبار التكامل – اللقطة رقم 1

إذا قمت بفتح الملف index.html في متصفح الويب، فسترى خطأ، شيء على غرار:

خطأ غير معلوم في إعدادات WasmSDKLoadSettings الجديدة (@microblink_blinkid_blinkid-in-browser-sdk.js?v=1a0eef98:1868:13) في main.js:5:24

هذا لأننا لم نقم بتعريف الترخيص في المتغير LICENSE.

الحصول على الترخيص

لإصلاح ذلك، نحتاج إلى الانتقال إلى https://login.microblink.com/ لإنشاء حساب في Developer Hub. سيُطلب منك نموذج التسجيل القياسي:

سوف تُطرح عليك بعض الأسئلة التي يمكنك تخطيها (إذا كنت مطورًا أو مديرًا شخصيًا أو ما إلى ذلك).

وستتلقى رسالة تأكيد بالبريد الإلكتروني.

بمجرد تسجيل الدخول، سترى لوحة تحكم مثل هذه:

هنا يجب عليك النقر على الزر Start New Trial ، وفي الشاشة التالية حدد BlinkID كمنتج، و InBrowser كمنصة، و localhost كاسم المجال لبيئة الاختبار. قبل الانتقال إلى الإنتاج، يجب عليك تحديث اسم النطاق إلى نطاقك الفعلي.

بعد ذلك ستصل إلى شاشة حيث يمكنك نسخ الرمز (سيكون عبارة عن سلسلة طويلة من الأرقام والحروف تسمى Base64). الصق هذا الرمز في المتغير LICENSE في الملف main.js ، وستكون جاهزًا تمامًا.

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

اختبار التكامل – اللقطة رقم 2

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

ثم إذا قمت بإظهار هذه الصورة للكاميرا، فسيتم تفريغ جميع البيانات المتاحة في سجل وحدة التحكم:

خاتمة

إن دمج BlinkID SDK في تطبيق الويب الخاص بك هو عملية مباشرة يمكن أن تعزز بشكل كبير من قدرات التطبيق على متن الطائرة/المعالجة.

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

لمن يريد معرفة المزيد

كان هذا مثالاً بسيطاً فقط لتبدأ سريعاً.

الآن، إذا كنت ترغب في معرفة المزيد، يمكنك الاطلاع على الريبو الرسمي على Github، ويمكنك أيضًا محاولة إضافة بعض التعديلات بنفسك، مثل

• التصميم
  • حسِّن HTML باستخدام CSS لجعل الواجهة أكثر سهولة في الاستخدام.
• معالجة الأخطاء والتغذية الراجعة
  • إضافة معالجة أفضل للأخطاء وتقديم ملاحظات أفضل للمستخدمين.
• توسيع نطاق الوظائف
  • استكشف ميزات BlinkID SDK وعزز قدرات تطبيقك.