Shape Detection API: الصورة تساوي ألف كلمة ووجه ورموز شريطية

تكتشف واجهة برمجة التطبيقات Shape Detection للوجوه والرموز الشريطية والنصوص في الصور.

ما هي واجهة برمجة تطبيقات Shape Detection؟

باستخدام واجهات برمجة التطبيقات مثل navigator.mediaDevices.getUserMedia وChrome لنظام Android أداة اختيار الصور، أصبح من السهل إلى حدّ ما التقاط صور أو بيانات فيديو مباشر من الجهاز الكاميرات أو تحميل صور محلية. حتى الآن، تمثل بيانات الصور الديناميكية هذه، بالإضافة الصور الثابتة على صفحة — لا يمكن الوصول إليها عن طريق الرمز، على الرغم من قد تحتوي الصور بالفعل على الكثير من الخصائص المثيرة للاهتمام مثل الوجوه والرموز الشريطية والنص.

فإذا أراد المطورون في الماضي استخراج هذه الميزات من خلال العميل لإنشاء قارئ لرمز الاستجابة السريعة، كان عليه إلى الاعتماد على مكتبات JavaScript خارجية. قد يكون هذا مكلفًا من منظور الأداء وزيادة الوزن الإجمالي للصفحة. على الجانب الآخر وأنظمة التشغيل بما في ذلك Android وiOS وmacOS، بالإضافة إلى الأجهزة الشرائح الموجودة في وحدات الكاميرا، وعادةً ما تكون عالية الأداء الكاشفة المحسَّنة للميزات مثل نظام Android FaceDetector أو كاشف الميزات العامة في iOS، CIDetector

تعرض Shape Detection API عمليات التنفيذ هذه من خلال مجموعة من واجهات JavaScript حاليًا، الميزات المتوافقة هي الكشف من خلال واجهة FaceDetector، ورصد الرمز الشريطي من خلال واجهة BarcodeDetector ورصد النص (حرف بصري) التعرّف البصري على الأحرف (OCR)) من خلال واجهة TextDetector.

حالات الاستخدام المقترَحة

كما هو موضح أعلاه، تتيح واجهة برمجة التطبيقات Shape Detection API للوجوه والرموز الشريطية والنصوص. تحتوي قائمة التعداد النقطي التالية على أمثلة من حالات الاستخدام للميزات الثلاث.

التعرّف على الوجه

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

رصد الرمز الشريطي

  • ويمكن لتطبيقات الويب التي تقرأ رموز الاستجابة السريعة فتح قفل حالات الاستخدام المثيرة للاهتمام مثل عمليات الدفع عبر الإنترنت أو التنقل عبر الويب، أو استخدام الرموز الشريطية لإنشاء مواقع الاتصالات على تطبيقات المراسلة.
  • يمكن لتطبيقات Shopping أن تسمح للمستخدمين بإجراء فحص EAN أو UPC الرموز الشريطية الخاصة العناصر في متجر فعلي لمقارنة الأسعار عبر الإنترنت.
  • بإمكان المطارات توفير أكشاك ويب يمكن للركاب فيها مسح بيانات صعودهم البطاقات رموز Aztec المعروضة المعلومات المخصصة المتعلقة برحلاتهم الجوية.

رصد النص

  • يمكن لمواقع الشبكات الاجتماعية عبر الإنترنت تحسين إمكانية الوصول إلى محتوى صور من إنشاء المستخدمين عن طريق إضافة النصوص التي تم رصدها كسمات alt لعلامات <img> في حال عدم تقديم أوصاف أخرى.
  • السماح لمواقع المحتوى باستخدام ميزة كشف النص لتجنب وضع العناوين أعلى الصور الرئيسية مع نص مضمَّن.
  • يمكن لتطبيقات الويب استخدام ميزة كشف النص لترجمة نصوص مثل، على سبيل المثال، قوائم مأكولات المطاعم.

الوضع الحالي

الخطوة الحالة
1. إنشاء شرح مكتمل
2. إنشاء مسودة أولية للمواصفات مكتمل
3. جمع الملاحظات تكرار التصميم قيد التقدّم
4. مرحلة التجربة والتقييم مكتمل
5- الإطلاق رصد الرمز الشريطي مكتمل
ميزة "التعرّف على الوجوه" قيد التقدّم
رصد النص قيد التقدّم

كيفية استخدام Shape Detection API

إذا كنت تريد تجربة واجهة برمجة تطبيقات Shape Detection محليًا، تفعيل #enable-experimental-web-platform-features إبلاغ في about://flags.

واجهات جميع أدوات الرصد الثلاث، FaceDetector وBarcodeDetector تعد TextDetector متشابهة. تقدم جميعها طريقة واحدة غير متزامنة يسمى detect() ويأخذ ImageBitmapSource كمدخل (أي إما CanvasImageSource، Blob، أو ImageData).

بالنسبة إلى FaceDetector وBarcodeDetector، يمكن تمرير مَعلمات اختيارية. إلى الدالة الإنشائية لأداة الكشف التي تسمح بتقديم تلميحات أدوات الكشف الأساسية.

يُرجى التحقّق بعناية من مصفوفة الدعم في موضح نظرة عامة على المنصات المختلفة.

العمل مع "BarcodeDetector"

تعرض BarcodeDetector القيم الأولية للرمز الشريطي التي يعثر عليها في ImageBitmapSource والمربّعات المحيطية، بالإضافة إلى معلومات أخرى مثل تنسيقات الرموز الشريطية التي تم رصدها

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

العمل مع "FaceDetector"

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

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

العمل مع "TextDetector"

تعرض TextDetector دائمًا المربعات المجاورة للنصوص التي تم اكتشافها، وفي بعض المنصات، يتم التعرّف على الشخصيات

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

رصد الميزات

إن البحث المجرد عن وجود عوامل إنشائية لتمييزها عن لا تكفي واجهة برمجة التطبيقات Shape Detection. لا يشير توفُّر واجهة إلى ما إذا كان النظام الأساسي الأساسي متوافقًا مع هذه الميزة. يعمل ذلك على النحو المنشود. لذلك، ننصح باتّباع نهج البرمجة الدفاعية من خلال اكتشاف الميزات النحو التالي:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

تم تعديل واجهة BarcodeDetector لتتضمّن طريقة getSupportedFormats(). وتم اقتراح واجهات مماثلة لـ FaceDetector أو لـ TextDetector.

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

ويتيح لك ذلك التعرّف على الميزة المحدّدة التي تحتاج إليها، مثل مسح رمز الاستجابة السريعة ضوئيًا:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

هذا أفضل من إخفاء الواجهات لأنه حتى عبر الأنظمة الأساسية، قد تختلف الإمكانات لذا يجب تشجيع المطوّرين على التحقّق بدقة من الإمكانات (مثل تنسيق رمز شريطي معيّن أو معلَم للوجه) التي تتطلبها.

دعم نظام التشغيل

تتوفّر ميزة "رصد الرمز الشريطي" على أنظمة التشغيل macOS وChromeOS وAndroid. خدمات Google Play مطلوبة على Android.

أفضل الممارسات

تعمل جميع أدوات الرصد بشكل غير متزامن، بمعنى أنها لا تحظر . لذلك لا تعتمدوا على الرصد في الوقت الفعلي، لكن أفضّلوا بعض الوقت اللازم لتأدية أداة الكشف

إذا كنت من محبي Web Workers، وسيكون من دواعي سروري أن تعرف أن أدوات الكشف هناك أيضًا مكشوفة. نتائج الاكتشاف قابلة للتسلسل وبالتالي يمكن تمريرها من العامل إلى التطبيق الرئيسي عبر postMessage(). يوضّح العرض التوضيحي هذا الأمر بشكل عملي.

بعض عمليات تنفيذ الأنظمة الأساسية لا تتيح كل الميزات، لذا احرص على التحقق من حالة الدعم بعناية واستخدام واجهة برمجة التطبيقات كخطوة تدريجية التحسين. على سبيل المثال، قد توفِّر بعض الأنظمة الأساسية ميزة "التعرّف على الوجوه". في حد ذاته، ولكن ليس اكتشاف معالم الوجه (العيون والأنف والفم وما إلى ذلك)؛ أو قد يتم التعرّف على مكان النص وموقعه، ولكن لا يمكن التعرّف على المحتوى النصي.

ملاحظات

يرغب فريق Chrome ومنتدى معايير الويب في معرفة المزيد عن وخبرات مختلفة مع واجهة برمجة تطبيقات Shape Detection.

أخبِرنا عن تصميم واجهة برمجة التطبيقات

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

هل تواجه مشكلة في عملية التنفيذ؟

هل واجهت مشكلة في التنفيذ في Chrome؟ أم أن التنفيذ عن المواصفات؟

  • يمكنك الإبلاغ عن الخطأ على https://new.crbug.com. تأكد من تضمين أكبر قدر ممكن من التفاصيل، وتعليمات بسيطة لإعادة إنتاجه، وتعيين المكونات إلى Blink>ImageCapture. خلل بشكل رائع لمشاركة عمليات إعادة الإنتاج السريعة والسهلة.

هل تخطط لاستخدام واجهة برمجة التطبيقات؟

هل تخطط لاستخدام واجهة برمجة تطبيقات Shape Detection على موقعك الإلكتروني؟ الدعم العام يساعدنا في تحديد أولويات الميزات، ويُظهر لموردي المتصفحات الآخرين مدى أمرًا بالغ الأهمية لدعمهم.

روابط مفيدة