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

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

Thomas Steiner

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

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

Ubuntu Linux को macOS Chrome के ब्राउज़र टैब पर स्ट्रीम किया गया (फ़िलहाल, यह फ़ुल स्क्रीन मोड में नहीं चल रहा है).
समस्या: स्ट्रीम किया गया 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() को कॉल करता है.

डेमो

Glitch पर डेमो चलाकर, कीबोर्ड लॉक एपीआई की जांच की जा सकती है. सोर्स कोड देखना न भूलें. नीचे दिए गए 'फ़ुल स्क्रीन मोड में जाएं' बटन पर क्लिक करने से, डेमो नई विंडो में खुलता है, ताकि वह फ़ुल स्क्रीन मोड में चल सके.

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

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

आभार

इस लेख की समीक्षा जो मेडली और केस बेस्केस ने की है. कीबोर्ड लॉक की खास जानकारी गैरी काकमार्सिक और जेमी वॉल्च ने दी है. Unsplash पर Ken Suarez की हीरो इमेज.