API تشخیص شکل: یک عکس ارزش هزار کلمه، چهره و بارکد دارد

Shape Detection API چهره ها، بارکدها و متن را در تصاویر تشخیص می دهد.

توماس اشتاینر

Shape Detection API چیست؟

با APIهایی مانند navigator.mediaDevices.getUserMedia و انتخابگر عکس Chrome برای Android ، گرفتن تصاویر یا داده های ویدیوی زنده از دوربین های دستگاه یا آپلود تصاویر محلی نسبتاً آسان شده است. تاکنون، این داده‌های تصویر پویا - و همچنین تصاویر ثابت در یک صفحه - با کد قابل دسترسی نبوده‌اند، حتی اگر تصاویر در واقع حاوی بسیاری از ویژگی‌های جالب مانند چهره‌ها، بارکدها و متن باشند.

به عنوان مثال، در گذشته، اگر توسعه‌دهندگان می‌خواستند چنین ویژگی‌هایی را روی مشتری استخراج کنند تا یک کدخوان QR بسازند، باید به کتابخانه‌های جاوا اسکریپت خارجی تکیه می‌کردند. این می تواند از نقطه نظر عملکرد گران باشد و وزن کلی صفحه را افزایش دهد. از سوی دیگر، سیستم‌عامل‌هایی از جمله Android، iOS و macOS، اما همچنین تراشه‌های سخت‌افزاری که در ماژول‌های دوربین یافت می‌شوند، معمولاً از قبل دارای آشکارسازهای عملکردی و بسیار بهینه‌شده مانند FaceDetector Android یا آشکارساز ویژگی‌های عمومی iOS، CIDetector هستند.

Shape Detection API این پیاده‌سازی‌ها را از طریق مجموعه‌ای از رابط‌های جاوا اسکریپت نشان می‌دهد. در حال حاضر، ویژگی های پشتیبانی شده عبارتند از تشخیص چهره از طریق رابط FaceDetector ، تشخیص بارکد از طریق رابط BarcodeDetector ، و تشخیص متن (Optical Character Recognition، (OCR)) از طریق رابط TextDetector .

موارد استفاده پیشنهادی

همانطور که در بالا ذکر شد، API تشخیص شکل در حال حاضر از تشخیص چهره، بارکد و متن پشتیبانی می کند. لیست گلوله زیر شامل نمونه هایی از موارد استفاده برای هر سه ویژگی است.

شناسایی چهره

  • شبکه‌های اجتماعی آنلاین یا سایت‌های اشتراک‌گذاری عکس معمولاً به کاربران خود اجازه می‌دهند افراد را در تصاویر حاشیه‌نویسی کنند. با برجسته کردن مرزهای چهره های شناسایی شده، می توان این کار را تسهیل کرد.
  • سایت‌های محتوا می‌توانند به‌جای تکیه بر سایر روش‌های اکتشافی، تصاویر را بر اساس چهره‌های بالقوه شناسایی‌شده به‌صورت پویا برش دهند، یا چهره‌های شناسایی‌شده را با جلوه‌های حرکت و زوم مانند Ken Burns در قالب‌های داستانی برجسته کنند.
  • سایت‌های پیام‌رسانی چندرسانه‌ای می‌توانند به کاربران خود اجازه دهند تا اشیاء خنده‌دار مانند عینک آفتابی یا سبیل را بر روی نشانه‌های چهره شناسایی شده قرار دهند.

تشخیص بارکد

  • برنامه های کاربردی وب که کدهای 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 ، پارامترهای اختیاری را می توان به سازنده آشکارساز منتقل کرد که امکان ارائه نکات به آشکارسازهای زیرین را فراهم می کند.

لطفاً ماتریس پشتیبانی را در توضیح دهنده برای یک نمای کلی از پلتفرم های مختلف به دقت بررسی کنید.

کار با 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 در Android مورد نیاز است.

بهترین شیوه ها

همه آشکارسازها به صورت ناهمزمان کار می کنند، یعنی نخ اصلی را مسدود نمی کنند. بنابراین به تشخیص بیدرنگ متکی نباشید، بلکه مدتی را در اختیار آشکارساز قرار دهید تا کار خود را انجام دهد.

اگر از طرفداران Web Workers هستید، خوشحال خواهید شد که بدانید آشکارسازها نیز در آنجا قرار دارند. نتایج تشخیص قابل سریال‌سازی هستند و بنابراین می‌توانند از طریق postMessage() از worker به برنامه اصلی منتقل شوند. دمو این را در عمل نشان می دهد.

همه پیاده‌سازی‌های پلتفرم از همه ویژگی‌ها پشتیبانی نمی‌کنند، بنابراین مطمئن شوید که وضعیت پشتیبانی را به دقت بررسی کنید و از API به عنوان یک بهبود پیشرونده استفاده کنید. به عنوان مثال، برخی از سیستم عامل ها ممکن است به خودی خود از تشخیص چهره پشتیبانی کنند، اما از تشخیص چهره (چشم، بینی، دهان و غیره) پشتیبانی نمی کنند. یا وجود و مکان متن ممکن است تشخیص داده شود، اما محتوای متن قابل تشخیص نیست.

بازخورد

تیم Chrome و انجمن استانداردهای وب می‌خواهند در مورد تجربیات شما با Shape Detection API بشنوند.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ یا آیا روش ها یا ویژگی هایی وجود دارد که برای اجرای ایده خود به آنها نیاز دارید؟ سوال یا نظری در مورد مدل امنیتی دارید؟

مشکل در اجرا؟

آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یا پیاده سازی با مشخصات متفاوت است؟

  • یک اشکال را در https://new.crbug.com ثبت کنید. اطمینان حاصل کنید که تا جایی که می توانید جزئیات، دستورالعمل های ساده برای بازتولید، و Components را روی Blink>ImageCapture تنظیم کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.

آیا قصد استفاده از API را دارید؟

آیا قصد دارید از API تشخیص شکل در سایت خود استفاده کنید؟ پشتیبانی عمومی شما به ما کمک می کند تا ویژگی ها را اولویت بندی کنیم و به سایر فروشندگان مرورگر نشان می دهد که چقدر حمایت از آنها ضروری است.

  • نحوه استفاده از آن را در موضوع WICG Discourse به اشتراک بگذارید.
  • با استفاده از هشتگ #ShapeDetection یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید کجا و چگونه از آن استفاده می‌کنید.

لینک های مفید