Keyboard Lock API की मदद से पासकोड कैप्चर करें

यह सुविधा, कई तरह के इस्तेमाल के उदाहरणों के लिए इमर्सिव और फ़ुल स्क्रीन अनुभव देती है. जैसे, इंटरैक्टिव वेबसाइटें, गेम, रिमोट डेस्कटॉप या ऐप्लिकेशन स्ट्रीमिंग.

Thomas Steiner

ज़्यादा से ज़्यादा लोग अपना ज़्यादातर समय ब्राउज़र पर बिताते हैं. इसलिए, इंटरैक्टिव वेबसाइटें, गेम, रिमोट डेस्कटॉप स्ट्रीमिंग, और ऐप्लिकेशन स्ट्रीमिंग, फ़ुल स्क्रीन में शानदार अनुभव देने की कोशिश करती हैं. इसके लिए, साइटों को फ़ुल स्क्रीन मोड में खास कुंजियों और कीबोर्ड शॉर्टकट का ऐक्सेस चाहिए, ताकि उनका इस्तेमाल नेविगेशन, मेन्यू या गेमिंग के लिए किया जा सके. यहां कुछ कुंजियों के उदाहरण दिए गए हैं जिनकी ज़रूरत पड़ सकती है: Esc, Alt + Tab, Cmd + `, और Ctrl + N.

डिफ़ॉल्ट रूप से, ये कुंजियां वेब ऐप्लिकेशन के लिए उपलब्ध नहीं होती हैं, क्योंकि इन्हें ब्राउज़र या ऑपरेटिंग सिस्टम कैप्चर करता है. कीबोर्ड लॉक करने की सुविधा देने वाला API, वेबसाइटों को होस्ट ओएस की ओर से अनुमति दी गई सभी उपलब्ध कुंजियों का इस्तेमाल करने की सुविधा देता है. इसके बारे में ज़्यादा जानने के लिए, ब्राउज़र के साथ काम करने की सुविधा देखें.

macOS Chrome के ब्राउज़र टैब में Ubuntu Linux स्ट्रीम किया गया है. फ़िलहाल, यह फ़ुल स्क्रीन मोड में नहीं चल रहा है.
समस्या: Ubuntu Linux रिमोट डेस्कटॉप को फ़ुल स्क्रीन मोड में नहीं चलाया जा रहा है. साथ ही, कीबोर्ड लॉक की सुविधा भी चालू नहीं है. इसलिए, सिस्टम की कुंजियों को अब भी macOS होस्ट ऑपरेटिंग सिस्टम कैप्चर कर रहा है. साथ ही, अब तक इमर्सिव अनुभव नहीं मिल रहा है.

Keyboard Lock API का इस्तेमाल करना

Keyboard API का Keyboard इंटरफ़ेस, ऐसे फ़ंक्शन उपलब्ध कराता है जो फ़िज़िकल कीबोर्ड से बटन दबाने की गतिविधि को कैप्चर करने के साथ-साथ, उपयोगकर्ता के कीबोर्ड लेआउट के बारे में जानकारी पाने की सुविधा देते हैं.

पूर्वापेक्षा

मॉडर्न ब्राउज़र में, फ़ुल स्क्रीन मोड दो तरह से उपलब्ध होता है: Fullscreen API के ज़रिए JavaScript से शुरू किया गया मोड और कीबोर्ड शॉर्टकट के ज़रिए उपयोगकर्ता की ओर से शुरू किया गया मोड. Keyboard Lock API सिर्फ़ तब उपलब्ध होता है, जब JavaScript से शुरू किया गया फ़ुल स्क्रीन मोड चालू हो. यहां JavaScript से शुरू की गई फ़ुल स्क्रीन का उदाहरण दिया गया है:

await document.documentElement.requestFullscreen();

सुविधा का पता लगाना

यह देखने के लिए कि Keyboard Lock API काम करता है या नहीं, इस पैटर्न का इस्तेमाल करें:

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

कीबोर्ड लॉक करना

Keyboard इंटरफ़ेस का lock() तरीका, फ़िज़िकल कीबोर्ड पर मौजूद किसी भी या सभी कुंजियों के लिए, कुंजी दबाने की गतिविधि को कैप्चर करने की सुविधा चालू करने के बाद एक प्रॉमिस दिखाता है. इस तरीके से सिर्फ़ उन कुंजियों को कैप्चर किया जा सकता है जिन्हें ऑपरेटिंग सिस्टम ने ऐक्सेस करने की अनुमति दी है. lock() तरीके में, लॉक करने के लिए एक या उससे ज़्यादा कुंजी कोड की एक सरणी ली जाती है. अगर कोई कुंजी कोड नहीं दिया जाता है, तो सभी कुंजियां लॉक हो जाएंगी. यूआई इवेंट के 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 को टेस्ट किया जा सकता है. सोर्स कोड ज़रूर देखें. नीचे मौजूद 'फ़ुल स्क्रीन मोड में जाएं' बटन पर क्लिक करने से, डेमो नई विंडो में लॉन्च होता है, ताकि इसे फ़ुल स्क्रीन मोड में देखा जा सके.

सुरक्षा से जुड़ी बातें

इस एपीआई से जुड़ी एक समस्या यह है कि इसका इस्तेमाल सभी कुंजियों को पाने के लिए किया जा सकता है. साथ ही, Fullscreen API और PointerLock API के साथ मिलकर, उपयोगकर्ता को वेब पेज से बाहर निकलने से रोका जा सकता है. इससे बचने के लिए, स्पेसिफ़िकेशन में ब्राउज़र को यह सुविधा देने के लिए कहा गया है कि उपयोगकर्ता, कीबोर्ड लॉक से बाहर निकल सके. भले ही, एपीआई ने सभी कुंजियों का अनुरोध किया हो. Chrome में, कीबोर्ड लॉक से बाहर निकलने के लिए, Esc बटन को दो सेकंड तक दबाकर रखना होता है.

Acknowledgements

इस लेख की समीक्षा जो मेडली और केसी बास्क ने की है. कीबोर्ड लॉक की खास बातों के बारे में गैरी कैकमार्शिक और जेमी वॉल्श ने लिखा है.