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

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

Thomas Steiner

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

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

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

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

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

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

मॉडर्न ब्राउज़र में, फ़ुल स्क्रीन मोड दो तरह के होते हैं: JavaScript को Fullscreen API से शुरू करने और कीबोर्ड शॉर्टकट का इस्तेमाल करके, उपयोगकर्ता से शुरू करने के लिए इस्तेमाल किया जाता है. 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 की हीरो इमेज.