ממשק API לזיהוי צורה: תמונה אחת שווה אלף מילים, פנים וברקודים

‏Shape Detection API מזהה פנים, קודי מ barras וטקסט בתמונות.

Thomas Steiner

מהו Shape Detection API?

בעזרת ממשקי API כמו navigator.mediaDevices.getUserMedia ובורר התמונות ב-Chrome ל-Android, קל מאוד לצלם תמונות או נתוני וידאו בשידור חי ממצלמות של מכשירים, או להעלות תמונות מקומיות. עד עכשיו, לא ניתן היה לגשת לנתוני התמונות הדינמיות האלה – וגם לתמונות סטטיות בדף – באמצעות קוד, למרות שתמונות יכולות להכיל הרבה תכונות מעניינות כמו פרצופים, קודי מ barras וטקסט.

לדוגמה, בעבר, אם מפתחים רצו לחלץ תכונות כאלה מהלקוח כדי ליצור קורא של קודי QR, הם היו צריכים להסתמך על ספריות JavaScript חיצוניות. הפעולה הזו עשויה להיות יקרה מבחינת הביצועים ולהגדיל את משקל הדף הכולל. לעומת זאת, במערכות הפעלה כמו Android, ‏ iOS ו-macOS, וגם בשבבי החומרה שנמצאים במודולים של המצלמה, בדרך כלל כבר יש גלאי תכונות עם ביצועים טובים ומותאמים במיוחד, כמו FaceDetector ב-Android או גלאי התכונות הגנרי ב-iOS,‏ CIDetector.

Shape Detection API חושף את ההטמעות האלה באמצעות קבוצה של ממשקי JavaScript. נכון לעכשיו, התכונות הנתמכות הן זיהוי פנים דרך הממשק FaceDetector, זיהוי ברקוד דרך הממשק BarcodeDetector וזיהוי טקסט (זיהוי תווים אופטי, OCR) דרך הממשק TextDetector.

הצעות לתרחישים לדוגמה

כפי שמתואר למעלה, Shape Detection API תומך כרגע בזיהוי של פנים, קודי מ barras וטקסט. רשימת הנקודות הבאה מכילה דוגמאות לתרחישי שימוש לכל שלוש התכונות.

זיהוי פנים

  • בדרך כלל, אתרי רשתות חברתיות או אתרים לשיתוף תמונות מאפשרים למשתמשים להוסיף הערות לגבי אנשים בתמונות. כדי להקל על המשימה, אפשר להדגיש את הגבולות של הפנים שזוהו.
  • באתרי תוכן אפשר לחתוך תמונות באופן דינמי על סמך פנים שזוהו, במקום להסתמך על שיטות ניתוח נתונים אחרות. אפשר גם להדגיש פנים שזוהו באמצעות אפקטים של תנועה וזום בסגנון Ken Burns בפורמטים של סיפורים.
  • אתרים של הודעות מולטימדיה יכולים לאפשר למשתמשים להוסיף שכבות של עצמים מצחיקים כמו משקפי שמש או שפמים על נקודות זיהוי בפנים שזוהו.

זיהוי ברקודים

  • אפליקציות אינטרנט שקוראות קודי QR יכולות לאפשר תרחישים שימוש מעניינים, כמו תשלומים אונליין או ניווט באינטרנט, או להשתמש בברקודים כדי ליצור קשרים חברתיים באפליקציות של שירותי העברת הודעות.
  • אפליקציות שופינג יכולות לאפשר למשתמשים שלהן לסרוק ברקודים של 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, אפשר להעביר פרמטרים אופציונליים ל-constructor של הגלאי, שמאפשרים לספק רמזים לגלאים הבסיסיים.

מומלץ לבדוק היטב את מטריצת התמיכה במאמר הסבר כדי לקבל סקירה כללית על הפלטפורמות השונות.

עבודה עם 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. בהתאם לפלטפורמה, יכול להיות שיהיה זמין מידע נוסף על נקודות ציון בפנים כמו עיניים, אף או פה. חשוב לציין ש-API הזה מזהה רק פנים. הוא לא מזהה את האדם שאליו שייכות הפנים.

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);
}

זיהוי תכונות

לא מספיק לבדוק את קיומם של ה-constructors כדי לזהות את 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"
  ]
*/

כך תוכלו לזהות את התכונה הספציפית שאתם צריכים, למשל סריקה של קודי QR:

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

זוהי שיטה טובה יותר מאשר להסתיר את הממשקים, כי יכול להיות שיהיו הבדלים ביכולות גם בין פלטפורמות שונות, ולכן כדאי לעודד את המפתחים לבדוק בדיוק את היכולת (כמו פורמט ברקוד מסוים או נקודת ציון בפנים) שהם צריכים.

תמיכה במערכות הפעלה

זיהוי ברקודים זמין ב-macOS, ב-ChromeOS וב-Android. נדרש Google Play Services ב-Android.

שיטות מומלצות

כל הגלאים פועלים באופן אסינכרוני, כלומר הם לא חוסמים את הליבה הראשית. לכן, אל תסתמכו על זיהוי בזמן אמת, אלא תנו לגלאי זמן מה כדי לבצע את העבודה שלו.

אם אתם אוהבים Web Workers, תוכלו לשמוע שגם הם חשופים לגלאי. תוצאות הזיהוי ניתנות לסריאליזציה, ולכן אפשר להעביר אותן מהצוות לאפליקציה הראשית דרך postMessage(). בדמו אפשר לראות איך זה עובד.

לא כל הטמעות הפלטפורמה תומכות בכל התכונות, לכן חשוב לבדוק היטב את סטטוס התמיכה ולהשתמש ב-API ככלי לשיפור הדרגתי. לדוגמה, יכול להיות שפלטפורמות מסוימות תומכות בזיהוי פנים כשלעצמו, אבל לא בזיהוי נקודות ציון בפנים (עיניים, אף, פה וכו'). לחלופין, יכול להיות שהמערכת תזהה את נוכחות הטקסט ואת המיקום שלו, אבל לא את תוכן הטקסט.

משוב

צוות Chrome וקהילת תקני האינטרנט רוצים לשמוע על החוויה שלכם עם Shape Detection API.

תיאור של עיצוב ה-API

האם יש משהו ב-API שלא פועל כצפוי? או שאולי חסרות שיטות או מאפיינים שדרושים לכם כדי ליישם את הרעיון? יש לכם שאלות או הערות לגבי מודל האבטחה?

בעיה בהטמעה?

מצאתם באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?

  • שולחים דיווח על באג בכתובת https://new.crbug.com. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור הבעיה ולהגדיר את Components ל-Blink>ImageCapture. Glitch הוא כלי מצוין לשיתוף שחזור מהיר וקל של באגים.

מתכננים להשתמש ב-API?

מתכננים להשתמש ב-Shape Detection API באתר שלכם? התמיכה הציבורית שלכם עוזרת לנו לקבוע סדר עדיפויות לתכונות, ומראה ליצרני דפדפנים אחרים כמה חשובה התמיכה בהם.

קישורים שימושיים