কীবোর্ড লক API-এর সাহায্যে কী ক্যাপচার করা

ইন্ট্যার‍্যাক্টিভ ওয়েবসাইট, গেম ও রিমোট ডেস্কটপ বা অ্যাপ্লিকেশন স্ট্রিমিং সহ বিভিন্ন ব্যবহারের ক্ষেত্রে ইমারসিভ, ফুল স্ক্রিন অভিজ্ঞতা প্রদান করুন।

Thomas Steiner

আরও বেশি সংখ্যক ব্যবহারকারী ব্রাউজারে তাদের বেশিরভাগ সময় ব্যয় করার সাথে সাথে, সমৃদ্ধ ইন্টারেক্টিভ ওয়েবসাইট, গেম, রিমোট ডেস্কটপ স্ট্রিমিং এবং অ্যাপ্লিকেশন স্ট্রিমিং একটি ইমারসিভ, ফুল স্ক্রিন অভিজ্ঞতা প্রদান করার চেষ্টা করে। এটি করার জন্য, সাইটগুলি ফুল-স্ক্রিন মোডে থাকাকালীন বিশেষ কী এবং কীবোর্ড শর্টকাটগুলিতে অ্যাক্সেস প্রয়োজন, যাতে সেগুলি নেভিগেশন, মেনু বা গেমিংয়ের জন্য ব্যবহার করা যেতে পারে। প্রয়োজন হতে পারে এমন কিছু কীয়ের উদাহরণ হল Esc, Alt + Tab, Cmd + ` এবং Ctrl + N।

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

macOS Chrome-এর ব্রাউজার ট্যাবে Ubuntu Linux স্ট্রিম করা হয়েছে (এখনও ফুল স্ক্রিন মোডে চলছে না)।
সমস্যা: স্ট্রিম করা Ubuntu Linux রিমোট ডেস্কটপ ফুল-স্ক্রিন মোডে চলছে না এবং অ্যাক্টিভ কীবোর্ড লক নেই, তাই সিস্টেম কী এখনও macOS হোস্ট অপারেটিং সিস্টেমের মাধ্যমে ক্যাপচার করা হয় এবং অভিজ্ঞতা এখনও ইমারসিভ নয়।

কীবোর্ড লক API ব্যবহার করা

Keyboard API-এর Keyboard ইন্টারফেস এমন ফাংশন প্রদান করে যা ফিজিক্যাল কীবোর্ড থেকে কী প্রেস ক্যাপচার করার সুবিধা টগল করে এবং ব্যবহারকারীর কীবোর্ড লেআউট সম্পর্কে তথ্য প্রদান করে।

পূর্বশর্ত

আধুনিক ব্রাউজারে দুই ধরনের ফুল-স্ক্রিন উপলভ্য: Fullscreen API-এর মাধ্যমে জাভাস্ক্রিপ্ট-ইনিশিয়েটেড এবং কীবোর্ড শর্টকাটের মাধ্যমে ব্যবহারকারী-ইনিশিয়েটেড। JavaScript-এর মাধ্যমে শুরু করা ফুল স্ক্রিন অ্যাক্টিভ থাকলে তবেই কীবোর্ড লক API উপলভ্য হয়। জাভাস্ক্রিপ্ট-ইনিশিয়েটেড ফুল স্ক্রিনের একটি উদাহরণ এখানে দেওয়া হল:

await document.documentElement.requestFullscreen();

ফিচার শনাক্তকরণ

কীবোর্ড লক API কাজ করে কিনা তা চেক করতে আপনি নিম্নলিখিত প্যাটার্ন ব্যবহার করতে পারেন:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

কীবোর্ড লক করা হচ্ছে

Keyboard ইন্টারফেসের lock() পদ্ধতি ফিজিক্যাল কীবোর্ডের যেকোনও বা সব কী প্রেস করার ক্যাপচার চালু করার পরে একটি প্রমিস রিটার্ন করে। এই পদ্ধতিটি শুধুমাত্র সেইসব 'কী' ক্যাপচার করতে পারে যেগুলিকে অন্তর্নিহিত অপারেটিং সিস্টেম অ্যাক্সেস করার অনুমতি দিয়েছে। lock() পদ্ধতিতে লক করার জন্য এক বা একাধিক কী কোডের অ্যারে লাগে। কোনও কী কোড না দেওয়া হলে, সব কী লক করা হবে। সঠিক কী কোড ভ্যালুর তালিকা UI Events KeyboardEvent কোড ভ্যালু স্পেসিফিকেশনে উপলভ্য।

সব 'কী' ক্যাপচার করা হচ্ছে

নিম্নলিখিত উদাহরণে সব 'কী' প্রেস করার তথ্য ক্যাপচার করা হয়।

navigator.keyboard.lock();

নির্দিষ্ট 'কী' ক্যাপচার করা হচ্ছে

নিচের উদাহরণে W, A, S ও D কী ক্যাপচার করা হয়েছে। 'কী' প্রেস করার সময় কোন মডিফায়ার ব্যবহার করা হয়েছে তা নির্বিশেষে এটি এইসব 'কী' ক্যাপচার করে। মার্কিন যুক্তরাষ্ট্রের QWERTY লেআউট অনুযায়ী, "KeyW" রেজিস্টার করলে, W, Shift + W, Control + W, Control + Shift + W এবং W-এর সাথে অন্যান্য সব মডিফায়ার কী-এর কম্বিনেশন অ্যাপে পাঠানো হয়। "KeyA", "KeyS" ও "KeyD"-এর ক্ষেত্রেও একই নিয়ম প্রযোজ্য।

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

আপনি কীবোর্ড ইভেন্ট ব্যবহার করে ক্যাপচার করা কী প্রেসের উত্তর দিতে পারবেন। যেমন, এই কোড onkeydown ইভেন্ট ব্যবহার করে:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

কীবোর্ড আনলক করা হচ্ছে

unlock() পদ্ধতি lock() পদ্ধতির মাধ্যমে ক্যাপচার করা সব 'কী' আনলক করে এবং সিঙ্ক্রোনাসভাবে রিটার্ন করে।

navigator.keyboard.unlock();

কোনও ডকুমেন্ট বন্ধ করা হলে, ব্রাউজার সবসময় unlock() কল করে।

ডেমো

এই ডেমো চালিয়ে আপনি Keyboard Lock API পরীক্ষা করতে পারবেন। সোর্স কোড চেক করতে ভুলবেন না। নিচে 'ফুল স্ক্রিন মোডে যান' বোতামে ক্লিক করলে, নতুন উইন্ডোতে ডেমো চালু হয় যাতে এটি ফুল স্ক্রিন মোডে যেতে পারে।

নিরাপত্তা সংক্রান্ত বিবেচনা

এই API-এর ব্যাপারে একটি উদ্বেগের বিষয় হল, এটি সব কী দখল করতে ব্যবহার করা হতে পারে এবং (ফুলস্ক্রিন API ও PointerLock API-এর সাথে একত্রে) ব্যবহারকারীকে ওয়েব পৃষ্ঠা থেকে বেরিয়ে আসতে বাধা দিতে পারে। এটি প্রতিরোধ করতে, স্পেসিফিকেশনের জন্য ব্রাউজারকে এমন একটি উপায় প্রদান করতে হবে যাতে ব্যবহারকারী কীবোর্ড লক থেকে বেরিয়ে আসতে পারেন, এমনকি API-এর মাধ্যমে সব কী-এর জন্য অনুরোধ করা হলেও। Chrome-এ, এই এস্কেপ হ্যাচ হল কীবোর্ড লক থেকে বেরিয়ে আসার জন্য Esc কী বেশিক্ষণ (দুই সেকেন্ড) প্রেস করা।

স্বীকৃতি

এই নিবন্ধটি জো মেডলি এবং কেসি বাস্ক পর্যালোচনা করেছেন। কীবোর্ড লক স্পেসিফিকেশন Gary Kacmarcik এবং Jamie Walch-এর দ্বারা তৈরি করা হয়েছে।