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

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

Thomas Steiner

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

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

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

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

सभी कुंजियों को कैप्चर किया जा रहा है

नीचे दिए गए उदाहरण में, दबाए गए सभी बटन की जानकारी दी गई है.

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 की जांच की जा सकती है. सोर्स कोड की जांच करना न भूलें. फ़ुल स्क्रीन मोड में नीचे मौजूद 'Enter' बटन पर क्लिक करने से डेमो नई विंडो में खुल जाता है. इससे डेमो, फ़ुल स्क्रीन मोड में जा सकता है.

सुरक्षा के बारे में ध्यान देने वाली बातें

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

स्वीकार की गई

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