आकार पहचान API (एपीआई): एक तस्वीर हज़ार शब्दों, चेहरों, और बारकोड के बराबर होती है

Shape Detection API, इमेज में मौजूद चेहरों, बारकोड, और टेक्स्ट की पहचान करता है.

Thomas Steiner

Shape Detection API क्या है?

navigator.mediaDevices.getUserMedia जैसे एपीआई और Chrome for Android के फ़ोटो पिकर की मदद से, डिवाइस के कैमरों से इमेज या लाइव वीडियो डेटा कैप्चर करना या स्थानीय इमेज अपलोड करना काफ़ी आसान हो गया है. अब तक, इस डाइनैमिक इमेज डेटा के साथ-साथ पेज पर मौजूद स्टैटिक इमेज को भी कोड से ऐक्सेस नहीं किया जा सका है. भले ही, इमेज में चेहरे, बारकोड, और टेक्स्ट जैसी कई दिलचस्प सुविधाएं शामिल हों.

उदाहरण के लिए, अगर डेवलपर को क्लाइंट पर ऐसी सुविधाओं को एक्सट्रैक्ट करके क्यूआर कोड रीडर बनाना होता था, तो उन्हें बाहरी JavaScript लाइब्रेरी पर निर्भर रहना पड़ता था. परफ़ॉर्मेंस के लिहाज़ से यह महंगा हो सकता है. साथ ही, इससे पेज का साइज़ भी बढ़ सकता है. दूसरी ओर, Android, iOS, और macOS जैसे ऑपरेटिंग सिस्टम के साथ-साथ, कैमरा मॉड्यूल में मौजूद हार्डवेयर चिप में आम तौर पर पहले से ही बेहतर परफ़ॉर्मेंस देने वाले और ज़्यादा ऑप्टिमाइज़ किए गए फ़ीचर डिटेक्टर होते हैं. जैसे, Android FaceDetector या iOS का सामान्य फ़ीचर डिटेक्टर, CIDetector.

Shape Detection API, JavaScript इंटरफ़ेस के सेट के ज़रिए इन सुविधाओं को उपलब्ध कराता है. फ़िलहाल, इन सुविधाओं का इस्तेमाल किया जा सकता है: FaceDetector इंटरफ़ेस के ज़रिए चेहरे की पहचान करना, BarcodeDetector इंटरफ़ेस के ज़रिए बारकोड की पहचान करना, और TextDetector इंटरफ़ेस के ज़रिए टेक्स्ट की पहचान करना (ऑप्टिकल कैरेक्टर रिकग्निशन, (ओसीआर)).

इस्तेमाल के सुझाए गए उदाहरण

ऊपर बताया गया है कि फ़िलहाल, Shape Detection API इन चीज़ों का पता लगा सकता है: चेहरे, बारकोड, और टेक्स्ट. यहां दी गई बुलेट लिस्ट में, तीनों सुविधाओं के इस्तेमाल के उदाहरण दिए गए हैं.

चेहरे की पहचान करने की सुविधा

  • आम तौर पर, ऑनलाइन सोशल नेटवर्किंग या फ़ोटो शेयर करने वाली साइटें, अपने उपयोगकर्ताओं को इमेज में लोगों को टैग करने की सुविधा देती हैं. पहचाने गए चेहरों की सीमाओं को हाइलाइट करके, इस टास्क को आसान बनाया जा सकता है.
  • कॉन्टेंट साइटें, संभावित तौर पर पहचाने गए चेहरों के आधार पर इमेज को डाइनैमिक तरीके से काट सकती हैं. इसके लिए, उन्हें अन्य अनुमानित तरीकों पर निर्भर रहने की ज़रूरत नहीं होती. इसके अलावा, वे पहचाने गए चेहरों को हाइलाइट कर सकती हैं. इसके लिए, वे कहानी जैसे फ़ॉर्मैट में केन बर्न्स जैसे पैनिंग और ज़ूमिंग इफ़ेक्ट का इस्तेमाल कर सकती हैं.
  • मल्टीमीडिया मैसेजिंग साइटें, अपने उपयोगकर्ताओं को चेहरे की पहचान करने वाले पॉइंट पर मज़ेदार ऑब्जेक्ट जोड़ने की अनुमति दे सकती हैं. जैसे, धूप का चश्मा या मूंछें.

बारकोड का पता लगाना

  • क्यूआर कोड पढ़ने वाले वेब ऐप्लिकेशन, दिलचस्प इस्तेमाल के उदाहरणों को अनलॉक कर सकते हैं. जैसे, ऑनलाइन पेमेंट या वेब नेविगेशन. इसके अलावा, बारकोड का इस्तेमाल करके, मेसेंजर ऐप्लिकेशन पर सोशल कनेक्शन बनाए जा सकते हैं.
  • शॉपिंग ऐप्लिकेशन, अपने उपयोगकर्ताओं को किसी स्टोर में मौजूद सामान के EAN या UPC बारकोड स्कैन करने की सुविधा दे सकते हैं. इससे वे ऑनलाइन कीमतों की तुलना कर पाएंगे.
  • एयरपोर्ट पर वेब कियॉस्क उपलब्ध कराए जा सकते हैं. यहां यात्री अपने बोर्डिंग पास के ऐज़्टेक कोड स्कैन करके, अपनी फ़्लाइट से जुड़ी निजी जानकारी देख सकते हैं.

टेक्स्ट की पहचान करने की सुविधा

  • ऑनलाइन सोशल नेटवर्किंग साइटें, उपयोगकर्ता के बनाए गए इमेज कॉन्टेंट को ज़्यादा सुलभ बना सकती हैं. इसके लिए, वे इमेज में मौजूद टेक्स्ट को alt एट्रिब्यूट के तौर पर जोड़ सकती हैं. ऐसा तब किया जाता है, जब इमेज के लिए कोई अन्य ब्यौरा नहीं दिया गया हो. इसके अलावा, वे <img> टैग का इस्तेमाल भी कर सकती हैं.
  • कॉन्टेंट साइटें, टेक्स्ट का पता लगाने की सुविधा का इस्तेमाल कर सकती हैं. इससे, वे टेक्स्ट वाली हीरो इमेज के ऊपर हेडिंग नहीं डालेंगी.
  • वेब ऐप्लिकेशन, टेक्स्ट का पता लगाने की सुविधा का इस्तेमाल करके, टेक्स्ट का अनुवाद कर सकते हैं. जैसे, रेस्टोरेंट के मेन्यू.

मौजूदा स्थिति

चरण स्थिति
1. एक्सप्लेनर बनाना पूरा हो गया
2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाना पूरा हो गया
3. सुझाव/राय पाना और डिज़ाइन को बेहतर बनाना प्रोसेस जारी है
4. ऑरिजिन ट्रायल पूरा हो गया
5. लॉन्च करें बारकोड का पता लगाया गया पूरी हुई
चेहरे की पहचान जारी है
टेक्स्ट की पहचान करने की सुविधा चालू है

Shape Detection API का इस्तेमाल कैसे करें

को चालू करके, स्थानीय एक्सपेरिमेंट के लिए Shape Detection API का इस्तेमाल किया जा सकता है.

अगर आपको Shape Detection API को स्थानीय तौर पर आज़माना है, तो about://flags में #enable-experimental-web-platform-features फ़्लैग चालू करें.

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 पर उपलब्ध है. Android डिवाइस पर Google Play services का होना ज़रूरी है.

सबसे सही तरीके

सभी डिटेक्टर, एसिंक्रोनस तरीके से काम करते हैं. इसका मतलब है कि वे मुख्य थ्रेड को ब्लॉक नहीं करते. इसलिए, रीयलटाइम में होने वाली पहचान पर भरोसा न करें. इसके बजाय, डिटेक्टर को अपना काम करने के लिए कुछ समय दें.

अगर आपको वेब वर्कर पसंद हैं, तो आपको यह जानकर खुशी होगी कि डिटेक्टर वहां भी उपलब्ध हैं. पहचान करने के नतीजों को क्रम से लगाया जा सकता है. इसलिए, इन्हें वर्कर से मुख्य ऐप्लिकेशन में postMessage() के ज़रिए भेजा जा सकता है. डेमो में इसे काम करते हुए दिखाया गया है.

सभी प्लैटफ़ॉर्म पर, सभी सुविधाएं काम नहीं करती हैं. इसलिए, यह पक्का करें कि आपके प्लैटफ़ॉर्म पर कौनसी सुविधाएं काम करती हैं. साथ ही, एपीआई का इस्तेमाल, धीरे-धीरे सुविधाओं को बेहतर बनाने के लिए करें. उदाहरण के लिए, ऐसा हो सकता है कि कुछ प्लैटफ़ॉर्म सिर्फ़ चेहरे का पता लगाने की सुविधा देते हों, लेकिन चेहरे की पहचान करने की सुविधा न देते हों. जैसे, आंखें, नाक, मुंह वगैरह. इसके अलावा, ऐसा भी हो सकता है कि टेक्स्ट की मौजूदगी और उसकी जगह की पहचान की जा सकती हो, लेकिन टेक्स्ट के कॉन्टेंट की पहचान न की जा सकती हो.

सुझाव/राय दें या शिकायत करें

Chrome टीम और वेब स्टैंडर्ड कम्यूनिटी, Shape Detection API के साथ आपके अनुभवों के बारे में जानना चाहती है.

हमें एपीआई डिज़ाइन के बारे में बताएं

क्या एपीआई के बारे में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या क्या आपको अपने आइडिया को लागू करने के लिए, कुछ और तरीकों या प्रॉपर्टी की ज़रूरत है? क्या आपको सुरक्षा मॉडल के बारे में कोई सवाल पूछना है या कोई टिप्पणी करनी है?

  • Shape Detection API के GitHub डेटा स्टोर पर, स्पेसिफ़िकेशन से जुड़ी समस्या की शिकायत करें या किसी मौजूदा समस्या के बारे में अपने विचार जोड़ें.

क्या आपको लागू करने में कोई समस्या आ रही है?

क्या आपको Chrome के साथ काम करने वाले किसी एक्सटेंशन में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, खास जानकारी से अलग है?

  • https://new.crbug.com पर जाकर, गड़बड़ी की रिपोर्ट करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, समस्या को दोबारा बनाने के लिए आसान निर्देश दें. इसके अलावा, कॉम्पोनेंट को Blink>ImageCapture पर सेट करें.

क्या आपको एपीआई का इस्तेमाल करना है?

क्या आपको अपनी साइट पर Shape Detection API का इस्तेमाल करना है? सार्वजनिक तौर पर आपकी मदद से, हमें सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे ब्राउज़र बनाने वाली अन्य कंपनियों को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

  • WICG Discourse थ्रेड पर, हमें बताएं कि आपको इसका इस्तेमाल कैसे करना है.
  • @ChromiumDev को ट्वीट करें. इसके लिए, हैशटैग #ShapeDetection का इस्तेमाल करें. साथ ही, हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मददगार लिंक