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 की हीरो इमेज.