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

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

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

स्वीकार हैं

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