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

ממשק ה-API לזיהוי צורה מזהה פנים, ברקודים וטקסט בתמונות.

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

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

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

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

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

איתור פנים

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

זיהוי ברקוד

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

זיהוי טקסט

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

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

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

איך משתמשים בממשק ה-API לזיהוי צורות

אם אתם רוצים להתנסות באופן מקומי עם ממשק ה-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);
}

זיהוי תכונות

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

מתארים את עיצוב ה-API

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

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

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

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

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

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

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