Skip to main content

Provide an immersive, full-screen experience for a variety of use cases, including interactive websites, games, and remote desktop or application streaming.

With more and more users spending most of their time in the browser, highly interactive websites, games, remote desktop streaming, and app streaming all strive to deliver an immersive full-screen experience. To achieve this, sites need access to special keys and keyboard shortcuts while in full-screen mode, so that they can be used for navigation, menus, or gaming functions. Some examples of keys that may be required are Esc, Alt + Tongue, Cmd + 'and Ctrl + North.

By default, these keys are not available to the web application because they are captured by the underlying browser or operating system. The Key Lock API allows websites to use all available keys allowed by the host operating system (see Browser compatibility).

chrome-remote-desktop-1169814

The problem: a streamed Ubuntu Linux remote desktop do not running in full screen mode and without active keyboard lock, so the system keys are still captured by the host macOS operating system and the experience is do not immersive yet.

Using the Key Lock API

the Keyboard Interface The Keyboard API provides functions that toggle capturing keystrokes from the physical keyboard, as well as obtaining information about usage Keyboard layout.

Prerequisite

There are two different types of full screen available in modern browsers: JavaScript-initiated through the Full screen API and started by the user via a keyboard shortcut. The Keyboard Lock API is only available when JavaScript-initiated full screen It is active. Here's an example of a JavaScript-initiated full screen:

await document . documentElement . requestFullscreen ( ) ;

Browser compatibility

You can see browser compatibility at I can use. Please note that not all system keys can be locked. This varies from one operating system to another. For example, follow crbug.com/855738 to get progress updates on the system keyboard lock for macOS.

Feature detection

You can use the following pattern to check if the Key Lock API is supported:

if ( 'keyboard' in navigator && 'lock' in navigator . keyboard ) {
}

Lock the keyboard

the lock () method of Keyboard The interface returns a promise after enabling keystroke capture for any or all keys on the physical keyboard. This method can only capture keys that the underlying operating system grants access to. the lock () The method takes an array of one or more key codes to block. If no key codes are provided, all keys will be locked. A list of valid key code values is available in the UI event keyboard Event code values Specifications.

Capturing all keys

The following example captures all keystrokes.

navigator . keyboard . lock ( ) ;

Capture of specific keys

The following example captures the W, A, Sand re keys. Capture these keys regardless of the modifiers used with the key press. Assuming a US QWERTY layout, Register "KeyW" ensures that W, Change + W, Control + W, Control + Change + Wand all other key modifier combinations with W are sent to the application. The same applies to "KeyA", "Keys"and "KeyD".

await navigator . keyboard . lock ( [
"KeyW" ,
"KeyA" ,
"KeyS" ,
"KeyD" ,
] ) ;

You can respond to captured keystrokes using keyboard events. For example, this code uses the onkeydown event:

document . addEventListener ( 'keydown' , ( e ) => {
if ( ( e . code === 'KeyA' ) && ! ( event . ctrlKey || event . metaKey ) ) {
}
} ) ;

Unlocking the keyboard

the unlock () The method unlocks all keys captured by the lock () method and returns synchronously.

navigator . keyboard . unlock ( ) ;

When a document is closed, the browser always calls implicitly unlock ().

Manifestation

You can test the Key Lock API by running the manifestation in Glitch. Be sure to look at the source code. Clicking the Enter Full Screen button below starts the demo in a new window so you can enter full screen mode.

Security Considerations

One concern with this API is that it could be used to get all the keys and (along with the Full screen API and the PointerLock API) prevent the user from leaving the website. To avoid this, the specification requires the browser to provide a way for the user to get out of the keyboard lock even if the API requests all keys. On Chrome this escape hatch is a long (two seconds) Esc press the key to activate a keypad lock output.

Thanks

This article was reviewed by Joe medley and Kayce Basques. The keypad lock specification is created by Gary Kacmarcik and Jamie walch. Hero image of Ken Suarez in Unsplash.

error: Attention: Protected content.