আকৃতি সনাক্তকরণ API: একটি ছবির মূল্য হাজার শব্দ, মুখ এবং বারকোড

শেপ ডিটেকশন এপিআই ছবিগুলিতে মুখ, বারকোড এবং পাঠ্য সনাক্ত করে।

টমাস স্টেইনার

আকৃতি সনাক্তকরণ API কি?

navigator.mediaDevices.getUserMedia এবং Android ফটো পিকারের জন্য Chrome-এর মতো APIগুলির সাথে, ডিভাইস ক্যামেরা থেকে ছবি বা লাইভ ভিডিও ডেটা ক্যাপচার করা, বা স্থানীয় ছবি আপলোড করা মোটামুটি সহজ হয়ে গেছে। এখন পর্যন্ত, এই গতিশীল ইমেজ ডেটা—সেইসাথে একটি পৃষ্ঠার স্ট্যাটিক ইমেজ—কোডের মাধ্যমে অ্যাক্সেসযোগ্য নয়, যদিও ছবিতে আসলে মুখ, বারকোড এবং পাঠ্যের মতো অনেক আকর্ষণীয় বৈশিষ্ট্য থাকতে পারে।

উদাহরণস্বরূপ, অতীতে, যদি বিকাশকারীরা একটি QR কোড রিডার তৈরি করতে ক্লায়েন্টে এই ধরনের বৈশিষ্ট্যগুলি বের করতে চায়, তাহলে তাদের বহিরাগত জাভাস্ক্রিপ্ট লাইব্রেরির উপর নির্ভর করতে হতো। পারফরম্যান্সের দৃষ্টিকোণ থেকে এটি ব্যয়বহুল হতে পারে এবং সামগ্রিক পৃষ্ঠার ওজন বাড়াতে পারে। অন্যদিকে, অ্যান্ড্রয়েড, আইওএস এবং ম্যাকওএস সহ অপারেটিং সিস্টেম, তবে ক্যামেরা মডিউলগুলিতে পাওয়া হার্ডওয়্যার চিপগুলিতে সাধারণত ইতিমধ্যেই পারফরম্যান্ট এবং অত্যন্ত অপ্টিমাইজ করা বৈশিষ্ট্য ডিটেক্টর রয়েছে যেমন অ্যান্ড্রয়েড FaceDetector বা আইওএস জেনেরিক ফিচার ডিটেক্টর, CIDetector ।

আকৃতি সনাক্তকরণ API জাভাস্ক্রিপ্ট ইন্টারফেসের একটি সেটের মাধ্যমে এই বাস্তবায়নগুলিকে প্রকাশ করে। বর্তমানে, সমর্থিত বৈশিষ্ট্যগুলি হল FaceDetector ইন্টারফেসের মাধ্যমে মুখ সনাক্তকরণ, BarcodeDetector ইন্টারফেসের মাধ্যমে বারকোড সনাক্তকরণ এবং TextDetector ইন্টারফেসের মাধ্যমে পাঠ্য সনাক্তকরণ (অপটিক্যাল ক্যারেক্টার রিকগনিশন, (OCR))।

প্রস্তাবিত ব্যবহারের ক্ষেত্রে

উপরে বর্ণিত হিসাবে, আকৃতি সনাক্তকরণ API বর্তমানে মুখ, বারকোড এবং পাঠ্য সনাক্তকরণ সমর্থন করে। নিম্নলিখিত বুলেট তালিকায় তিনটি বৈশিষ্ট্যের জন্য ব্যবহারের ক্ষেত্রে উদাহরণ রয়েছে।

মুখ সনাক্তকরণ

  • অনলাইন সোশ্যাল নেটওয়ার্কিং বা ফটো শেয়ারিং সাইটগুলি সাধারণত তাদের ব্যবহারকারীদের ইমেজে লোকেদের টীকা দিতে দেয়৷ সনাক্ত করা মুখের সীমানা হাইলাইট করে, এই কাজটি সহজতর করা যেতে পারে।
  • বিষয়বস্তু সাইটগুলি অন্যান্য হিউরিস্টিকসের উপর নির্ভর না করে সম্ভাব্য শনাক্ত করা মুখের উপর ভিত্তি করে গতিশীলভাবে চিত্রগুলি ক্রপ করতে পারে, বা গল্পের মতো বিন্যাসে কেন বার্নস -এর মতো প্যানিং এবং জুমিং প্রভাবগুলির সাথে সনাক্ত করা মুখগুলিকে হাইলাইট করতে পারে৷
  • মাল্টিমিডিয়া মেসেজিং সাইটগুলি তাদের ব্যবহারকারীদের সনাক্ত করা মুখের ল্যান্ডমার্কগুলিতে সানগ্লাস বা গোঁফের মতো মজার জিনিসগুলিকে ওভারলে করার অনুমতি দিতে পারে৷

বারকোড সনাক্তকরণ

  • QR কোড পড়া ওয়েব অ্যাপ্লিকেশনগুলি অনলাইন পেমেন্ট বা ওয়েব নেভিগেশনের মতো আকর্ষণীয় ব্যবহারের ক্ষেত্রে আনলক করতে পারে বা মেসেঞ্জার অ্যাপ্লিকেশনগুলিতে সামাজিক সংযোগ স্থাপনের জন্য বারকোড ব্যবহার করতে পারে।
  • শপিং অ্যাপগুলি তাদের ব্যবহারকারীদের অনলাইনে দামের তুলনা করার জন্য একটি ফিজিক্যাল স্টোরে আইটেমের EAN বা UPC বারকোড স্ক্যান করার অনুমতি দিতে পারে।
  • বিমানবন্দরগুলি ওয়েব কিয়স্ক সরবরাহ করতে পারে যেখানে যাত্রীরা তাদের ফ্লাইট সম্পর্কিত ব্যক্তিগতকৃত তথ্য দেখানোর জন্য তাদের বোর্ডিং পাসের অ্যাজটেক কোডগুলি স্ক্যান করতে পারে।

পাঠ্য সনাক্তকরণ

  • অনলাইন সোশ্যাল নেটওয়ার্কিং সাইটগুলি যখন অন্য কোন বিবরণ প্রদান করা হয় না তখন <img> ট্যাগের জন্য alt অ্যাট্রিবিউট হিসেবে শনাক্ত করা টেক্সট যোগ করে ব্যবহারকারী-উত্পাদিত চিত্র সামগ্রীর অ্যাক্সেসযোগ্যতা উন্নত করতে পারে।
  • বিষয়বস্তুর সাইটগুলি টেক্সট সনাক্তকরণ ব্যবহার করতে পারে যাতে নায়কের ছবির উপরে শিরোনাম না রাখা হয়।
  • ওয়েব অ্যাপ্লিকেশনগুলি পাঠ্যকে অনুবাদ করতে পাঠ্য সনাক্তকরণ ব্যবহার করতে পারে যেমন, উদাহরণস্বরূপ, রেস্টুরেন্ট মেনু।

বর্তমান অবস্থা

ধাপ স্ট্যাটাস
1. ব্যাখ্যাকারী তৈরি করুন সম্পূর্ণ
2. স্পেসিফিকেশনের প্রাথমিক খসড়া তৈরি করুন সম্পূর্ণ
3. প্রতিক্রিয়া সংগ্রহ করুন এবং ডিজাইনের উপর পুনরাবৃত্তি করুন চলছে
4. মূল বিচার সম্পূর্ণ
5. লঞ্চ করুন বারকোড সনাক্তকরণ সম্পূর্ণ
মুখ শনাক্তকরণ প্রক্রিয়াধীন
পাঠ্য সনাক্তকরণ প্রক্রিয়াধীন

শেপ ডিটেকশন এপিআই কীভাবে ব্যবহার করবেন

আপনি যদি স্থানীয়ভাবে আকৃতি সনাক্তকরণ 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);
}

বৈশিষ্ট্য সনাক্তকরণ

শেপ ডিটেকশন এপিআই শনাক্ত করার বৈশিষ্ট্যের জন্য কনস্ট্রাক্টরদের অস্তিত্বের জন্য বিশুদ্ধভাবে পরীক্ষা করা যথেষ্ট নয়। একটি ইন্টারফেসের উপস্থিতি আপনাকে বলে না যে অন্তর্নিহিত প্ল্যাটফর্মটি বৈশিষ্ট্যটিকে সমর্থন করে কিনা। এই উদ্দেশ্য হিসাবে কাজ করছে. এই কারণেই আমরা এই মত বৈশিষ্ট্য সনাক্তকরণ করে একটি প্রতিরক্ষামূলক প্রোগ্রামিং পদ্ধতির সুপারিশ করি:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

একটি getSupportedFormats() পদ্ধতি অন্তর্ভুক্ত করার জন্য BarcodeDetector ইন্টারফেস আপডেট করা হয়েছে এবং 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 এ উপলব্ধ। অ্যান্ড্রয়েডে গুগল প্লে পরিষেবা প্রয়োজন।

সর্বোত্তম অনুশীলন

সমস্ত ডিটেক্টর অ্যাসিঙ্ক্রোনাসভাবে কাজ করে, অর্থাৎ, তারা মূল থ্রেডকে ব্লক করে না। তাই রিয়েলটাইম সনাক্তকরণের উপর নির্ভর করবেন না, বরং ডিটেক্টরের কাজ করার জন্য কিছু সময় দিন।

আপনি যদি ওয়েব ওয়ার্কারদের একজন অনুরাগী হন, আপনি জেনে খুশি হবেন যে সেখানেও ডিটেক্টরগুলি উন্মুক্ত করা হয়েছে৷ সনাক্তকরণের ফলাফলগুলি ক্রমানুসারে করা যায় এবং এইভাবে postMessage() মাধ্যমে কর্মী থেকে মূল অ্যাপে প্রেরণ করা যেতে পারে৷ ডেমো কর্ম এটি দেখায়.

সমস্ত প্ল্যাটফর্ম বাস্তবায়ন সমস্ত বৈশিষ্ট্য সমর্থন করে না, তাই সমর্থন পরিস্থিতি সাবধানে পরীক্ষা করতে ভুলবেন না এবং একটি প্রগতিশীল বর্ধন হিসাবে API ব্যবহার করুন৷ উদাহরণ স্বরূপ, কিছু প্ল্যাটফর্ম মুখ শনাক্তকরণকে সমর্থন করতে পারে, কিন্তু মুখের ল্যান্ডমার্ক সনাক্তকরণ (চোখ, নাক, মুখ ইত্যাদি) নয়; অথবা পাঠ্যের অস্তিত্ব এবং অবস্থান স্বীকৃত হতে পারে, কিন্তু পাঠ্য বিষয়বস্তু নয়।

প্রতিক্রিয়া

Chrome টিম এবং ওয়েব স্ট্যান্ডার্ড সম্প্রদায় আকৃতি সনাক্তকরণ API এর সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়৷

API ডিজাইন সম্পর্কে আমাদের বলুন

API সম্পর্কে এমন কিছু আছে যা আপনার প্রত্যাশিত মত কাজ করে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য আপনার প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যগুলি অনুপস্থিত আছে? নিরাপত্তা মডেল সম্পর্কে একটি প্রশ্ন বা মন্তব্য আছে?

বাস্তবায়নে সমস্যা?

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন?

  • https://new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ বিবরণ, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী এবং Blink>ImageCapture এ উপাদান সেট করতে ভুলবেন না। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

API ব্যবহার করার পরিকল্পনা করছেন?

আপনার সাইটে আকৃতি সনাক্তকরণ API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন আমাদের বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷

  • WICG ডিসকোর্স থ্রেডে আপনি কীভাবে এটি ব্যবহার করার পরিকল্পনা করছেন তা শেয়ার করুন।
  • হ্যাশট্যাগ #ShapeDetection ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

সহায়ক লিঙ্ক