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

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

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

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

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

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

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

পূর্বশর্ত

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

await document.documentElement.requestFullscreen();

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

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

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

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

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

সমস্ত কী ক্যাপচার করা হচ্ছে

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

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 পরীক্ষা করতে পারেন। সোর্স কোড চেক আউট করতে ভুলবেন না. নিচের এন্টার পূর্ণ স্ক্রীন বোতামে ক্লিক করলে একটি নতুন উইন্ডোতে ডেমো চালু হয় যাতে এটি পূর্ণ স্ক্রীন মোডে প্রবেশ করতে পারে।

নিরাপত্তা বিবেচনা

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

স্বীকৃতি

এই নিবন্ধটি Joe Medley এবং Kayce Basques দ্বারা পর্যালোচনা করা হয়েছে। কীবোর্ড লক স্পেকটি লিখেছেন গ্যারি কাকমার্কিক এবং জেমি ওয়াল্চআনস্প্ল্যাশে কেন সুয়ারেজের হিরো ছবি।