Capturer des touches avec l'API Keyboard Lock

Offrez une expérience immersive en plein écran pour divers cas d'utilisation, y compris les sites Web interactifs, les jeux, et le streaming d'applications ou de bureaux à distance.

Thomas Steiner

Les utilisateurs passent de plus en plus de temps dans un navigateur. C'est pourquoi nous nous efforçons d'offrir une expérience immersive en plein écran pour les sites Web, les jeux, le streaming sur ordinateur de bureau à distance et le streaming d'applications hautement interactifs. Pour ce faire, les sites doivent avoir accès à des touches et raccourcis clavier spéciaux lorsqu'ils sont en mode plein écran, afin de pouvoir être utilisés pour la navigation, les menus ou les jeux. Voici quelques exemples de touches qui peuvent être requises : Échap, Alt+Tabulation, Cmd+` et Ctrl+N.

Par défaut, ces clés ne sont pas disponibles pour l'application Web, car elles sont capturées par le navigateur ou le système d'exploitation sous-jacent. L'API Keyboard Lock permet aux sites Web d'utiliser toutes les touches disponibles autorisées par le système d'exploitation hôte (voir la section Compatibilité du navigateur).

<ph type="x-smartling-placeholder">
</ph> Ubuntu Linux est diffusé dans un onglet du navigateur Chrome sous macOS (pas encore en mode plein écran). <ph type="x-smartling-placeholder">
</ph> Le problème: un bureau à distance Linux Ubuntu qui s'exécute pas en mode plein écran et sans verrouillage du clavier actif. Les clés système sont donc toujours capturées par le système d'exploitation hôte macOS, et l'expérience n'est pas encore immersive.

Utiliser l'API Keyboard Lock

L'interface Keyboard de l'API Keyboard fournit des fonctions qui permettent d'activer ou de désactiver la capture des pressions sur les touches du clavier physique et d'obtenir des informations sur la disposition du clavier de l'utilisateur.

Conditions préalables

Deux types d'affichage en plein écran sont disponibles dans les navigateurs récents: JavaScript déclenché via l'API Fullscreen et celui déclenché par l'utilisateur à l'aide d'un raccourci clavier. L'API Keyboard Lock n'est disponible que lorsque le mode plein écran déclenché par JavaScript est actif. Voici un exemple de mode plein écran déclenché par JavaScript:

await document.documentElement.requestFullscreen();

Détection de caractéristiques

Vous pouvez utiliser le schéma suivant pour vérifier si l'API Keyboard Lock est prise en charge:

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

Verrouillage du clavier

La méthode lock() de l'interface Keyboard renvoie une promesse après avoir activé la capture des pressions sur les touches pour tout ou partie des touches du clavier physique. Cette méthode ne peut capturer que les clés auxquelles l'accès est accordé par le système d'exploitation sous-jacent. La méthode lock() utilise un tableau d'un ou de plusieurs codes de touche à verrouiller. Si aucun code de clé n'est fourni, toutes les clés seront verrouillées. Une liste des valeurs de code de touche valides est disponible dans la spécification UI Events KeyboardEvent code Values (Valeurs du code des événements d'interface utilisateur KeyboardEvent).

Capture de toutes les clés...

L'exemple suivant capture toutes les pressions sur les touches.

navigator.keyboard.lock();

Capturer des clés spécifiques

L'exemple suivant capture les touches W, A, S et D. Il capture ces touches quels que soient les modificateurs utilisés lorsque l'utilisateur appuie sur une touche. Avec une disposition QWERTY américaine, l'enregistrement de "KeyW" garantit que W, Maj + W, Ctrl + W, Ctrl + Maj + W et toutes les autres combinaisons de touches de modification avec W sont envoyées à l'application. Il en va de même pour "KeyA", "KeyS" et "KeyD".

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

Vous pouvez répondre aux pressions sur les touches enregistrées à l'aide des événements de clavier. Par exemple, ce code utilise l'événement 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.
  }
});

Déverrouiller le clavier

La méthode unlock() déverrouille toutes les clés capturées par la méthode lock() et renvoie un résultat de manière synchrone.

navigator.keyboard.unlock();

Lorsqu'un document est fermé, le navigateur appelle toujours implicitement unlock().

Démo

Vous pouvez tester l'API Keyboard Lock en exécutant la démonstration sur Glitch. N'oubliez pas de consulter le code source. Cliquez sur le bouton "Activer le mode plein écran" ci-dessous pour lancer la démo dans une nouvelle fenêtre et passer en mode plein écran.

Considérations de sécurité

L'un des problèmes de cette API est qu'elle pourrait être utilisée pour saisir toutes les clés et, en association avec l'API Fullscreen et l'API PointerLock, empêcher l'utilisateur de quitter la page Web. Pour éviter cela, la spécification exige que le navigateur permette à l'utilisateur de quitter le verrouillage du clavier, même si toutes les touches sont demandées par l'API. Dans Chrome, il s'agit d'un appui prolongé sur la touche Échap (deux secondes) permettant de quitter le verrouillage du clavier.

Remerciements

Cet article a été lu par Joe Medley et Kayce Basques. La spécification de verrouillage du clavier a été développée par Gary Kacmarcik et Jamie Walch. Image héros de Ken Suarez sur Unsplash.