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

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

ما هي 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 حاليًا إمكانية اكتشاف الوجوه والرموز الشريطية والنصوص. تحتوي القائمة النقطية التالية على أمثلة لحالات الاستخدام لجميع الميزات الثلاث.

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

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

اكتشاف الرمز الشريطي

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

التعرّف على النص

  • يمكن للمواقع الإلكترونية للتواصل الاجتماعي على الإنترنت تحسين إمكانية الوصول إلى محتوى الصور من إنشاء المستخدمين من خلال إضافة النصوص التي تم رصدها كسمات 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.

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

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

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

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

إضافة ملاحظات

يريد فريق Chrome ومنتدى معايير الويب التعرَّف على تجاربك في استخدام Shape Detection API.

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

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

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

هل واجهت خطأً في تنفيذ Chrome؟ أم أن التنفيذ مختلف عن المواصفات؟

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

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

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

روابط مفيدة