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

ה-SHA Detection API מזהה פנים, ברקודים וטקסט בתמונות.

תומאס שטיינר

מה זה shape Detection API?

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

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

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

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

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

זיהוי פנים

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

זיהוי ברקוד

  • יישומי אינטרנט שקוראים קודי QR יכולים לקבל גישה לתרחישים מעניינים כמו תשלומים אונליין או ניווט באינטרנט, או להשתמש בברקודים כדי ליצור קשרים חברתיים באפליקציות של מסנג'ר.
  • אפליקציות שופינג מאפשרות למשתמשים לסרוק ברקודים מסוג EAN או UPC של פריטים בחנות פיזית כדי להשוות בין מחירים באינטרנט.
  • בשדות תעופה יש עמדות אינטרנט שבהן הנוסעים יכולים לסרוק את הקודים האצטקים של כרטיסי העלייה למטוס כדי להציג מידע אישי שקשור לטיסות שלהם.

זיהוי טקסט

  • אתרים של רשתות חברתיות באינטרנט יכולים לשפר את הנגישות לתוכן תמונות שנוצר על ידי משתמשים על ידי הוספת טקסטים שזוהו כמאפייני alt לתגי <img>, כשלא סופקו תיאורים אחרים.
  • אתרי תוכן יכולים להשתמש בזיהוי טקסט כדי להימנע מהצבת כותרות מעל לתמונות ראשיות שמכילות טקסט.
  • אפליקציות אינטרנט יכולות להשתמש בזיהוי טקסט כדי לתרגם טקסטים כמו, לדוגמה, תפריטי מסעדות.

הסטטוס הנוכחי

שלב סטטוס
1. יצירת הסבר הושלם
2. יצירת טיוטה ראשונית של מפרט הושלם
3. אוספים משוב וחוזרים על העיצוב בתהליך
4. גרסת מקור לניסיון הושלם
5. הפעלה זיהוי ברקוד הושלם
זיהוי הפנים מתבצע
זיהוי טקסט מתבצע

איך משתמשים ב- shape Detection API

אם רוצים להתנסות בגרסה המקומית של ה-API לזיהוי צורה, צריך להפעיל את הדגל #enable-experimental-web-platform-features ב-about://flags.

הממשקים של כל שלושת המזהים, FaceDetector, BarcodeDetector ו-TextDetector דומים. כולן מספקות שיטה אסינכרונית אחת בשם detect(), שמקבלת את הערך ImageBitmapSource כקלט (כלומר, CanvasImageSource, Blob או ImageData).

עבור FaceDetector ו-BarcodeDetector, אפשר להעביר פרמטרים אופציונליים ל-builder של הגלאי, וכך לספק רמזים לגלאי הבסיס.

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

עבודה עם 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);
}

זיהוי תכונות

לא מספיק רק לבדוק אם הבנאים קיימים כדי לזהות את ה- 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.

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

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

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

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

משוב

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

לספר לנו על עיצוב ה-API

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

נתקלתם בבעיה בהטמעה?

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

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

מתכנן להשתמש ב-API?

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

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