Saltar al contenido principal

Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y escritorio remoto o transmisión de aplicaciones.

Con más y más usuarios que pasan la mayor parte de su tiempo en el navegador, sitios web, juegos, transmisión de escritorio remoto y transmisión de aplicaciones muy interactivos se esfuerzan por brindar una experiencia de pantalla completa inmersiva. Para lograr esto, los sitios necesitan acceso a teclas especiales y atajos de teclado mientras están en modo de pantalla completa, para que puedan usarse para navegación, menús o funciones de juego. Algunos ejemplos de las claves que pueden ser necesarias son Esc, Alt + Lengüeta, Cmd + 'y Ctrl + norte.

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

chrome-remote-desktop-1169814

El problema: un escritorio remoto de Ubuntu Linux transmitido no funcionando en modo de pantalla completa y sin bloqueo de teclado activo, por lo que las teclas del sistema aún son capturadas por el sistema operativo host macOS y la experiencia es no inmersivo todavía.

Uso de la API de bloqueo de teclado

los Keyboard interfaz de la API del teclado proporciona funciones que alternan la captura de pulsaciones de teclas desde el teclado físico, así como la obtención de información sobre el uso Diseño del teclado.

Requisito previo

Hay dos tipos diferentes de pantalla completa disponibles en los navegadores modernos: iniciado por JavaScript a través del API de pantalla completa e iniciado por el usuario a través de un atajo de teclado. La API Keyboard Lock solo está disponible cuando Pantalla completa iniciada por JavaScript está activo. A continuación, se muestra un ejemplo de pantalla completa iniciada por JavaScript:

await document.documentElement.requestFullscreen();

Compatibilidad del navegador

Puede ver la compatibilidad del navegador en Puedo usar. Tenga en cuenta que no todas las claves del sistema se pueden bloquear. Esto varía de un sistema operativo a otro. Por ejemplo, siga crbug.com/855738 para obtener actualizaciones de progreso en el bloqueo del teclado del sistema para macOS.

Detección de características

Puede utilizar el siguiente patrón para comprobar si la API de bloqueo de teclado es compatible:

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

Bloquear el teclado

los lock() método del Keyboard La interfaz devuelve 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 otorga acceso. los lock() El método toma una matriz de uno o más códigos clave para bloquear. Si no se proporcionan códigos de llave, todas las llaves se bloquearán. Una lista de valores de códigos de clave válidos está disponible en el Teclado de eventos de UI Valores de código de evento Especificaciones.

Capturando todas las claves

El siguiente ejemplo captura todas las pulsaciones de teclas.

navigator.keyboard.lock();

Captura de claves específicas

El siguiente ejemplo captura la W, UNA, Sy re llaves. Captura estas teclas independientemente de los modificadores que se utilicen con la pulsación de la tecla. Asumiendo un diseño QWERTY de EE. UU., Registrarse "KeyW" asegura que W, Cambio + W, Controlar + W, Controlar + Cambio + Wy todas las demás combinaciones de modificadores de teclas con W se envían a la aplicación. Lo mismo se aplica a "KeyA", "KeyS"y "KeyD".

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

Puede responder a las pulsaciones de teclas capturadas mediante eventos de teclado. Por ejemplo, este código usa el onkeydown evento:

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

Desbloqueo del teclado

los unlock() El método desbloquea todas las claves capturadas por el lock() método y regresa sincrónicamente.

navigator.keyboard.unlock();

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

Manifestación

Puede probar la API de bloqueo de teclado ejecutando el manifestación en Glitch. Asegúrate de mira el código fuente. Al hacer clic en el botón Ingresar a pantalla completa a continuación, se inicia la demostración en una nueva ventana para que pueda ingresar al modo de pantalla completa.

Consideraciones de Seguridad

Una preocupación con esta API es que podría usarse para obtener todas las claves y (junto con el API de pantalla completa y el API PointerLock) impiden 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 escotilla de escape es un largo (dos segundos) Esc presione la tecla para activar una salida del bloqueo del teclado.

Agradecimientos

Este artículo fue revisado por Joe Medley y Kayce vascos. La especificación de bloqueo del teclado es creada por Gary Kacmarcik y Jamie Walch. Imagen de héroe de Ken Suárez en Unsplash.

R Marketing Digital