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

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

Thomas Steiner

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

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

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

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

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

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

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

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

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

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

رصد النصوص

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

الوضع الحالي

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

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

إذا كنت تريد تجربة Shape Detection API على الجهاز، فعِّل العلامة #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 API. لا يشير توفّر واجهة إلى ما إذا كانت المنصة الأساسية تتيح استخدام الميزة. يعمل هذا الإجراء على النحو المطلوب. لهذا السبب، ننصحك باتّباع نهج البرمجة الدفاعية من خلال رصد الميزات يلي:

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.

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

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

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

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

ملاحظات

يريد فريق Chrome ومجتمع معايير الويب معرفة تجربتك مع Shape Detection API.

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

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

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

هل رصدت خطأ في عملية تنفيذ Chrome؟ أم هل التنفيذ مختلف عن المواصفات؟

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

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

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

روابط مفيدة