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

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

Thomas Steiner

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

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

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

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

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

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

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

await document.documentElement.requestFullscreen();

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

कीबोर्ड लॉक एपीआई काम करता है या नहीं, यह देखने के लिए इस पैटर्न का इस्तेमाल किया जा सकता है:

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 को टेस्ट किया जा सकता है. सोर्स कोड ज़रूर देखें. नीचे दिए गए 'फ़ुल स्क्रीन मोड में जाएं' बटन पर क्लिक करने से, डेमो एक नई विंडो में लॉन्च होता है, ताकि वह फ़ुल स्क्रीन मोड में जा सके.

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

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

Acknowledgements

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