কীবোর্ড লক API দিয়ে কীগুলি ক্যাপচার করুন৷

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

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

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

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

উবুন্টু লিনাক্স ম্যাকওএস ক্রোমের একটি ব্রাউজার ট্যাবে স্ট্রিম করা হয়েছে (এখনও পূর্ণ স্ক্রিন মোডে চলছে না)।
সমস্যা: একটি স্ট্রিম করা উবুন্টু লিনাক্স রিমোট ডেস্কটপ পূর্ণ স্ক্রিন মোডে চলছে না এবং সক্রিয় কীবোর্ড লক ছাড়াই , তাই সিস্টেম কীগুলি এখনও macOS হোস্ট অপারেটিং সিস্টেম দ্বারা ক্যাপচার করা হয় এবং অভিজ্ঞতা এখনও নিমজ্জিত নয় ।

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

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

পূর্বশর্ত

আধুনিক ব্রাউজারগুলিতে দুই ধরণের পূর্ণ স্ক্রিন পাওয়া যায়: ফুলস্ক্রিন API এর মাধ্যমে জাভাস্ক্রিপ্ট-ইনিশিয়েটেড এবং কীবোর্ড শর্টকাটের মাধ্যমে ব্যবহারকারী-ইনিশিয়েটেড। জাভাস্ক্রিপ্ট-ইনিশিয়েটেড পূর্ণ স্ক্রিন সক্রিয় থাকলেই কেবল কীবোর্ড লক 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 কীগুলি ক্যাপচার করে। কী টিপে কোন মডিফায়ার ব্যবহার করা হোক না কেন, এটি এই কীগুলি ক্যাপচার করে। একটি US 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() কল করে।

ডেমো

এই ডেমোটি চালিয়ে আপনি কীবোর্ড লক API পরীক্ষা করতে পারেন। সোর্স কোডটি অবশ্যই দেখে নিন । নীচের Enter full screen বোতামটি ক্লিক করলে ডেমোটি একটি নতুন উইন্ডোতে চালু হবে যাতে এটি পূর্ণ স্ক্রিন মোডে প্রবেশ করতে পারে।

নিরাপত্তা বিবেচ্য বিষয়গুলি

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

স্বীকৃতি

এই প্রবন্ধটি পর্যালোচনা করেছেন জো মেডলি এবং কেইস বাস্কস । কীবোর্ড লক স্পেকটি লিখেছেন গ্যারি ক্যাকমারসিক এবং জেমি ওয়ালচ ।