Offrez une expérience immersive en plein écran pour une variété de cas d'utilisation, y compris les sites Web interactifs, les jeux et le streaming d'applications ou de postes de travail à distance.
Avec de plus en plus d'utilisateurs passant la plupart de leur temps dans le navigateur, les sites Web hautement interactifs, les jeux, le streaming de bureau à distance et le streaming d'applications s'efforcent tous de fournir une expérience immersive en plein écran. Pour ce faire, les sites doivent accéder à des touches spéciales et à des raccourcis clavier en mode plein écran, afin qu'ils puissent être utilisés pour la navigation, les menus ou les fonctions de jeu. Quelques exemples de clés qui peuvent être nécessaires sont Esc, Alt + Langue, Cmd + 'y Ctrl + Nord.
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 Key Lock permet aux sites Web d'utiliser toutes les clés disponibles autorisées par le système d'exploitation hôte (voir Compatibilité du navigateur).
Le problème: un bureau distant Ubuntu Linux en streaming non fonctionnant en mode plein écran et sans pour autant verrouillage du clavier actif, de sorte que les clés système sont toujours capturées par le système d'exploitation macOS hôte et que l'expérience est non immersif encore.
Utilisation de l'API Key Lock
Les Clavier Interface L'API du clavier fournit des fonctions qui permettent d'alterner la capture de frappes à partir du clavier physique, ainsi que d'obtenir des informations sur l'utilisation. Clavier.
Prérequis
Il existe deux types différents de plein écran disponibles dans les navigateurs modernes: lancé par JavaScript via le API plein écran et démarré par l'utilisateur via un raccourci clavier. L'API de verrouillage du clavier n'est disponible que lorsque Plein écran lancé par JavaScript C'est actif. Voici un exemple de plein écran lancé par JavaScript:
attendre le document . documentElement . requestFullscreen ( ) ;Compatibilité du navigateur
Vous pouvez voir la compatibilité du navigateur sur je peux utiliser. Veuillez noter que toutes les clés système ne peuvent pas être verrouillées. Cela varie d'un système d'exploitation à l'autre. Par exemple, suivez crbug.com/855738 pour obtenir des mises à jour de progression sur le verrouillage du clavier système pour macOS.
Détection des fonctionnalités
Vous pouvez utiliser le modèle suivant pour vérifier si l'API Key Lock est prise en charge:
if ( 'keyboard' dans le navigateur && 'lock' dans le navigateur . keyboard ) {
}Verrouiller le clavier
Les fermer à clé () méthode de Clavier L'interface renvoie une promesse après avoir activé la capture de touches pour une ou toutes les touches du clavier physique. Cette méthode ne peut capturer que les clés auxquelles le système d'exploitation sous-jacent accorde l'accès. Les fermer à clé () La méthode prend un tableau d'un ou plusieurs codes clés à bloquer. Si aucun code clé n'est fourni, toutes les clés seront verrouillées. Une liste des valeurs de code clé valides est disponible dans le Clavier d'événement de l'interface utilisateur Valeurs du code d'événement Spécifications.
Capture de toutes les clés
L'exemple suivant capture toutes les frappes.
navigateur . clavier . verrouiller ( ) ;Capture de clés spécifiques
L'exemple suivant capture le W, ONGLE, Sy ré Clés. Capturez ces touches quels que soient les modificateurs utilisés avec la pression de touche. En supposant une disposition QWERTY américaine, inscrivez-vous "KeyW" s'assure que W, Changement + W, Contrôler + W, Contrôler + Changement + Wet toutes les autres combinaisons de touches de modification avec W sont envoyés à l'application. de même pour "KeyA", "Clés"y "KeyD".
attendre le navigateur . clavier . verrouiller ( [
"KeyW" ,
"KeyA" ,
"KeyS" ,
"KeyD" ,
] ) ;Vous pouvez répondre aux frappes capturées à l'aide d'événements de clavier. Par exemple, ce code utilise le onkeydown un événement:
document . addEventListener ( 'keydown' , ( e ) => {
if ( ( e . code === 'KeyA' ) && ! ( event . ctrlKey || event . metaKey ) ) {
}
} ) ;Déverrouiller le clavier
Les déverrouiller () La méthode déverrouille toutes les clés capturées par le fermer à clé () méthode et retourne de manière synchrone.
navigateur . clavier . déverrouiller ( ) ;Lorsqu'un document est fermé, le navigateur appelle toujours implicitement déverrouiller ().
Manifestation
Vous pouvez tester l'API Key Lock en exécutant le manifestation dans Glitch. Assurez-vous de regardez le code source. Cliquez sur le bouton Entrer en plein écran ci-dessous pour démarrer la démo dans une nouvelle fenêtre afin que vous puissiez entrer en mode plein écran.
Considérations relatives à la sécurité
Une préoccupation avec cette API est qu'elle pourrait être utilisée pour obtenir toutes les clés et (avec le API plein écran et le API PointerLock) empêcher l'utilisateur de quitter le site Web. Pour éviter cela, la spécification exige que le navigateur fournisse à l'utilisateur un moyen de sortir du verrouillage du clavier même si l'API demande toutes les clés. Sur Chrome, cette trappe d'évacuation est longue (deux secondes) Esc appuyez sur la touche pour activer une sortie de verrouillage du clavier.
Liens utiles
Merci
Cet article a été révisé par Joe medley y Kayce Basques. La spécification de verrouillage du clavier est créée par Gary Kacmarcik y Jamie Walch. Image de héros de Ken Suarez au Unsplash.
