आकार पहचान एपीआई चेहरों, बारकोड, और इमेज में मौजूद टेक्स्ट की पहचान करता है.
आकार पहचान एपीआई क्या है?
navigator.mediaDevices.getUserMedia और Android के लिए Chrome फ़ोटो पिकर जैसे एपीआई की मदद से, डिवाइस के कैमरों से इमेज या लाइव वीडियो डेटा कैप्चर करना या लोकल इमेज अपलोड करना काफ़ी आसान हो गया है. अब तक, पेज पर मौजूद स्टैटिक इमेज और डाइनैमिक इमेज के डेटा को कोड से ऐक्सेस नहीं किया जा सका है.
भले ही, इमेज में चेहरे, बारकोड, और टेक्स्ट जैसी कई दिलचस्प सुविधाएं हों.
उदाहरण के लिए, पहले अगर डेवलपर क्यूआर कोड रीडर बनाने के लिए, क्लाइंट पर उपलब्ध ऐसी सुविधाएं पाना चाहते थे, तो उन्हें बाहरी JavaScript लाइब्रेरी का इस्तेमाल करना पड़ता था. परफ़ॉर्मेंस के लिहाज़ से यह महंगा हो सकता है
और पेज का कुल वज़न बढ़ सकता है. दूसरी तरफ़, Android, iOS, और macOS जैसे ऑपरेटिंग सिस्टम और कैमरा मॉड्यूल में मिलने वाले हार्डवेयर चिप भी, आम तौर पर बेहतर परफ़ॉर्म करने वाले और बेहतर तरीके से ऑप्टिमाइज़ किए गए फ़ीचर डिटेक्टर होते हैं. जैसे, Android FaceDetector या iOS का सामान्य फ़ीचर डिटेक्टर, CIDetector.
शेप डिटेक्शन एपीआई, JavaScript इंटरफ़ेस के सेट की मदद से, इसे लागू करने की जानकारी दिखाता है. फ़िलहाल, ये सुविधाएं FaceDetector इंटरफ़ेस के ज़रिए चेहरे की पहचान, BarcodeDetector इंटरफ़ेस से बारकोड की पहचान, और TextDetector इंटरफ़ेस से टेक्स्ट की पहचान (ऑप्टिकल कैरेक्टर रिकग्निशन (ओसीआर)) की मदद से की गई हैं.
इस्तेमाल के सुझाए गए उदाहरण
जैसा कि ऊपर बताया गया है, फ़िलहाल आकार का पता लगाने वाला एपीआई चेहरों, बारकोड, और टेक्स्ट की पहचान करने की सुविधा देता है. नीचे दी गई बुलेट सूची में तीनों सुविधाओं के इस्तेमाल के उदाहरण दिए गए हैं.
चेहरे की पहचान
- ऑनलाइन सोशल नेटवर्किंग या फ़ोटो शेयर करने वाली साइटें, आम तौर पर अपने उपयोगकर्ताओं को इमेज में लोगों की व्याख्या करने देती हैं. पहचाने गए चेहरों की सीमाओं को हाइलाइट करके, यह काम आसान हो सकता है.
- कॉन्टेंट साइटें, दूसरे अनुभवों पर भरोसा करने के बजाय, पहचाने गए चेहरों के आधार पर इमेज को डाइनैमिक रूप से काट सकती हैं. इसके अलावा, वे स्टोरी जैसे फ़ॉर्मैट में केन बर्न्स जैसे पैनिंग और ज़ूमिंग इफ़ेक्ट की मदद से पहचाने गए चेहरों को हाइलाइट कर सकती हैं.
- मल्टीमीडिया मैसेज सेवा देने वाली साइटें, अपने उपयोगकर्ताओं को चेहरे पर मौजूद लैंडमार्क पर धूप का चश्मा या मूंछ जैसी मज़ेदार चीज़ें लगाने की अनुमति दे सकती हैं.
बारकोड का पता लगाने की सुविधा
- क्यूआर कोड को पढ़ने वाले वेब ऐप्लिकेशन, इस्तेमाल के दिलचस्प उदाहरण अनलॉक कर सकते हैं. जैसे, ऑनलाइन पेमेंट या वेब नेविगेशन. इसके अलावा, मैसेंजर ऐप्लिकेशन पर सोशल कनेक्शन बनाने के लिए बारकोड का इस्तेमाल भी किया जा सकता है.
- शॉपिंग ऐप्लिकेशन से उनके उपयोगकर्ता, किसी दुकान में मौजूद आइटम के EAN या UPC बारकोड को स्कैन कर सकते हैं. इससे वे ऑनलाइन कीमतों की तुलना कर सकते हैं.
- हवाई अड्डे ऐसे वेब कीऑस्क उपलब्ध करा सकते हैं जहां यात्री अपने बोर्डिंग पास के ऐज़टेक कोड स्कैन कर सकते हैं. इससे उन्हें अपनी फ़्लाइट से जुड़ी निजी जानकारी दिख सकती है.
टेक्स्ट की पहचान करने की सुविधा
- अगर कोई और जानकारी नहीं दी गई है, तो ऑनलाइन सोशल नेटवर्किंग साइटें
<img>टैग के लिए, पता लगाए गए टेक्स्ट कोaltएट्रिब्यूट के तौर पर जोड़कर, उपयोगकर्ता के जनरेट किए गए इमेज कॉन्टेंट की सुलभता को बेहतर बना सकती हैं. - कॉन्टेंट साइटें, टेक्स्ट की पहचान करने की सुविधा का इस्तेमाल करके, हीरो इमेज के ऊपर हेडिंग को शामिल करने से बचा सकती हैं.
- वेब ऐप्लिकेशन, टेक्स्ट का अनुवाद करने के लिए टेक्स्ट की पहचान कर सकते हैं. उदाहरण के लिए, रेस्टोरेंट मेन्यू.
मौजूदा स्थिति
| चरण | स्थिति |
|---|---|
| 1. जानकारी बनाएं | पूरा हुआ |
| 2. खास जानकारी का शुरुआती ड्राफ़्ट बनाएं | पूरा हुआ |
| 3. लोगों की राय जानें और डिज़ाइन को बेहतर बनाएं | प्रोसेस जारी है |
| 4. ऑरिजिन ट्रायल | पूरा हुआ |
| 5. लॉन्च करना | बारकोड की पहचान पूरी हो गई |
| चेहरे की पहचान जारी है | |
| टेक्स्ट की पहचान की जा रही है |
आकार पहचान 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);
}
सुविधा की पहचान करने की सुविधा
शेप डिटेक्शन एपीआई का पता लगाने के लिए, सिर्फ़ कंस्ट्रक्टर की मौजूदगी की जांच करना काफ़ी नहीं है. इंटरफ़ेस होने से आपको यह पता नहीं चलता कि दिया गया प्लैटफ़ॉर्म, सुविधा के साथ काम करता है या नहीं. यह उम्मीद के मुताबिक काम कर रहा है. इसलिए, हम सुविधा की इस तरह से पहचान करने की सुविधा का इस्तेमाल करके, सुरक्षा से जुड़ी प्रोग्रामिंग अपनाने का सुझाव देते हैं:
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 टीम और वेब मानकों वाला समुदाय, शेप डिटेक्शन एपीआई के साथ आपके अनुभवों के बारे में जानना चाहता है.
हमें इस एपीआई के डिज़ाइन के बारे में बताएं
क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या अपना आइडिया लागू करने के लिए, ज़रूरी तरीके या प्रॉपर्टी मौजूद नहीं हैं? सुरक्षा मॉडल के बारे में आपका कोई सवाल या टिप्पणी है?
- शेप डिटेक्शन एपीआई GitHub के रेपो में, खास जानकारी से जुड़ी कोई समस्या दर्ज करें या किसी मौजूदा समस्या पर अपने विचार जोड़ें.
क्या लागू करने में कोई समस्या है?
क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका खास जानकारी से अलग है?
- https://new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी, गड़बड़ी को फिर से बनाने के आसान निर्देश, और कॉम्पोनेंट को
Blink>ImageCaptureपर सेट करना न भूलें. Glitch की मदद से, तेज़ी से और आसानी से तैयार किए गए तरीकों को शेयर किया जा सकता है.
क्या आपको इस एपीआई का इस्तेमाल करना है?
क्या आपको अपनी साइट पर शेप डिटेक्शन एपीआई का इस्तेमाल करना है? आपकी सार्वजनिक मदद से, हमें सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, अन्य ब्राउज़र वेंडर को पता चलता है कि उनकी मदद करना कितना ज़रूरी है.
- WICG चर्चा थ्रेड पर बताएं कि आपको इसे कैसे इस्तेमाल करना है.
- हैशटैग
#ShapeDetectionइस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.
मददगार लिंक
- सार्वजनिक तौर पर जानकारी देने वाला वीडियो
- एपीआई डेमो | एपीआई डेमो सोर्स
- गड़बड़ी को ट्रैक करना
- ChromeStatus.com एंट्री
- ब्लिंक कॉम्पोनेंट:
Blink>ImageCapture