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

आकार डिटेक्शन एपीआई, इमेज में चेहरों, बारकोड, और टेक्स्ट का पता लगाता है.

आकार डिटेक्शन एपीआई क्या है?

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

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

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

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

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

चेहरे की पहचान

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

बारकोड की पहचान करना

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

टेक्स्ट की पहचान

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

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

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

आकार का पता लगाने वाले एपीआई को इस्तेमाल करने का तरीका

अगर आपको स्थानीय तौर पर, 'शेप डिटेक्शन एपीआई' के साथ एक्सपेरिमेंट करना है, तो #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. प्लैटफ़ॉर्म के हिसाब से, ज़्यादा जानकारी पाने के लिए चेहरे के लैंडमार्क, जैसे कि आंखें, नाक या मुंह उपलब्ध हो सकते हैं. ध्यान रखें कि यह एपीआई सिर्फ़ चेहरों की पहचान करता है. इससे यह पता नहीं चलता कि चेहरे का मालिक कौन है.

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

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

सिर्फ़ कंस्ट्रक्टर की मौजूदगी की जांच करके, ताकि आकार का पता लगाने वाला एपीआई काम नहीं करता. इंटरफ़ेस होने पर, आपको यह नहीं पता चलेगा कि उस प्लैटफ़ॉर्म पर वह सुविधा काम करती है या नहीं. यह उम्मीद के मुताबिक काम कर रहा है. इसलिए, हम सुविधा की पहचान करके डिफ़ेंसिव प्रोग्रामिंग का सुझाव देते हैं इस तरह:

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 पर उपलब्ध है. Google Play services Android के लिए ज़रूरी हैं.

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

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

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

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

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

Chrome टीम और वेब मानक समुदाय आपकी आकार डिटेक्शन एपीआई का इस्तेमाल किया जा सकता है.

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

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

क्या लागू करने में कोई समस्या हुई?

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या, लागू करने पर क्या यह स्पेसिफ़िकेशन से अलग है?

  • https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. के रूप में शामिल करना पक्का करें ज़्यादा से ज़्यादा जानकारी दें, इसे बनाने के आसान निर्देश, और Blink>ImageCapture के लिए कॉम्पोनेंट. ग्लिच तुरंत और आसान प्रतिनिधि साझा करने के लिए बढ़िया कार्य करता है.

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

क्या आपको अपनी साइट पर आकार का पता लगाने वाला एपीआई इस्तेमाल करना है? आपका सार्वजनिक समर्थन से हमें सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, यह दूसरे ब्राउज़र वेंडर को दिखाता है कि बेहद ज़रूरी है, ताकि उन्हें उनकी मदद की जा सके.

मददगार लिंक