Cómo capturar claves con la API de Keyboard Lock

Proporciona una experiencia de pantalla completa envolvente para una variedad de casos de uso, como sitios web interactivos, juegos y transmisión de aplicaciones o escritorio remoto.

Thomas Steiner

Dado que cada vez más usuarios pasan la mayor parte del tiempo en el navegador, los sitios web altamente interactivos, los juegos, las transmisiones de escritorio remoto y la transmisión de aplicaciones se esfuerzan por ofrecer una experiencia inmersiva en pantalla completa. Para lograr esto, los sitios necesitan acceso a teclas especiales y combinaciones de teclas mientras están en el modo de pantalla completa, para que puedan usarse en la navegación, los menús o los juegos. Algunos ejemplos de las teclas que pueden ser necesarias son Esc, Alt + Tab, Cmd + ` y Ctrl + N.

De forma predeterminada, estas claves no están disponibles para la aplicación web porque las captura el navegador o el sistema operativo subyacente. La API de Teclado de bloqueo permite que los sitios web usen todas las teclas disponibles permitidas por el SO host (consulta Compatibilidad del navegador).

Ubuntu Linux se transmitió a una pestaña del navegador en macOS Chrome (todavía no se ejecuta en modo de pantalla completa).
El problema es que un escritorio remoto de Ubuntu de Linux transmitido no se ejecuta en modo de pantalla completa y sin bloqueo activo del teclado. por lo que el sistema operativo host de macOS todavía captura las teclas del sistema y la experiencia aún no es envolvente.

Cómo usar la API de bloqueo del teclado

La interfaz Keyboard de la API de Teclado proporciona funciones que activan o desactivan la captura de las pulsaciones de teclas desde el teclado físico, así como la obtención de información sobre el diseño del teclado.

Requisitos

Hay dos tipos de pantalla completa disponibles en los navegadores modernos: iniciada por JavaScript a través de la API de Fullscreen y por el usuario con una combinación de teclas. La API de Teclado de bloqueo solo está disponible cuando está activa la pantalla completa iniciada por JavaScript. Este es un ejemplo de pantalla completa iniciada por JavaScript:

await document.documentElement.requestFullscreen();

Detección de funciones

Puedes usar el siguiente patrón para verificar si se admite la API de bloqueo del teclado:

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

Bloqueo del teclado

El método lock() de la interfaz Keyboard muestra una promesa después de habilitar la captura de pulsaciones de teclas para cualquiera o todas las teclas del teclado físico. Este método solo puede capturar claves a las que el sistema operativo subyacente les otorga acceso. El método lock() requiere un array de uno o más códigos de tecla para bloquear. Si no se proporcionan códigos de tecla, se bloquearán todas las claves. Hay una lista de valores de códigos de tecla válidos disponible en la especificación de Valores de código de TecladoEvent de eventos de la IU.

Captura todas las claves

En el siguiente ejemplo, se capturan todas las pulsaciones de teclas.

navigator.keyboard.lock();

Captura claves específicas

En el siguiente ejemplo, se capturan las teclas W, A, S y D. Captura estas teclas independientemente de los modificadores que se usen al presionarlas. En el caso de un diseño QWERTY de EE.UU., registrar "KeyW" garantiza que se envíen a la app W, Mayúsculas + W, Control + W, Control + Mayúsculas + W y todas las demás combinaciones de modificadores de teclas con W. Lo mismo se aplica a "KeyA", "KeyS" y "KeyD".

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

Puedes responder a las pulsaciones de teclas capturadas con eventos del teclado. Por ejemplo, este código usa el evento 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.
  }
});

Cómo desbloquear el teclado

El método unlock() desbloquea todas las claves capturadas por el método lock() y muestra el resultado de forma síncrona.

navigator.keyboard.unlock();

Cuando se cierra un documento, el navegador siempre llama implícitamente a unlock().

Demostración

Para probar la API de bloqueo del teclado, ejecuta la demostración en Glitch. Asegúrate de consultar el código fuente. Si haces clic en el botón para entrar a la pantalla completa que aparece a continuación, se iniciará la demostración en una ventana nueva para que pueda entrar en el modo de pantalla completa.

Consideraciones de seguridad

Una de las preocupaciones de esta API es que podría usarse para obtener todas las claves y (junto con la API de Fullscreen y la API de PointerLock) para evitar que el usuario salga de la página web. Para evitar esto, la especificación requiere que el navegador proporcione una forma para que el usuario salga del bloqueo del teclado incluso si la API solicita todas las teclas. En Chrome, esta salida de escape consiste en mantener presionada la tecla Esc durante dos segundos para activar una salida del bloqueo del teclado.

Agradecimientos

Joe Medley y Kayce Basques revisaron este artículo. Gary Kacmarcik y Jamie Walch crearon la especificación de bloqueo del teclado. Hero image de Ken Suarez en Unsplash.