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

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

Thomas Steiner

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

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

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

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