Tasten mit der Keyboard Lock API erfassen

Bieten Sie eine immersive Vollbilderfahrung für eine Vielzahl von Anwendungsfällen, einschließlich interaktiver Websites, Spiele und Remote Desktop- oder Anwendungsstreaming.

Thomas Steiner

Da immer mehr Nutzer die meiste Zeit im Browser verbringen, bieten interaktive Websites, Spiele, Remote-Desktop-Streaming und Anwendungsstreaming ein immersives Vollbilderlebnis. Dazu benötigen Websites Zugriff auf spezielle Tasten und Tastenkürzel, während sie sich im Vollbildmodus befinden, damit sie für die Navigation, Menüs oder Spiele verwendet werden können. Beispiele für erforderliche Tasten sind Esc, Alt + Tab, Cmd + ` und Strg + N.

Standardmäßig sind diese Schlüssel für die Webanwendung nicht verfügbar, da sie vom Browser oder dem zugrunde liegenden Betriebssystem erfasst werden. Mit der Keyboard Lock API können Websites alle vom Hostbetriebssystem zulässigen Tasten verwenden (siehe Browserkompatibilität).

Ubuntu Linux wird in macOS Chrome auf einen Browsertab gestreamt (läuft noch nicht im Vollbildmodus).
Das Problem: Ein gestreamter Ubuntu Linux-Remote-Desktop wird nicht im Vollbildmodus und ohne aktive Tastatursperre ausgeführt. Daher werden Systemtasten weiterhin vom macOS-Hostbetriebssystem erfasst und die Nutzung ist noch nicht immersiv.

Keyboard Lock API verwenden

Die Keyboard-Schnittstelle der Keyboard API bietet Funktionen, mit denen sich das Aufzeichnen von Tastendrücken auf der physischen Tastatur aktivieren und deaktivieren sowie Informationen zum Tastaturlayout des Nutzers abrufen lassen.

Vorbereitung

In modernen Browsern stehen zwei Arten von Vollbildanzeigen zur Verfügung: JavaScript, das über die Fullscreen API ausgelöst wird, und eines, das über ein Tastaturkürzel vom Nutzer initiiert wird. Die Keyboard Lock API ist nur verfügbar, wenn der JavaScript-initiierte Vollbildmodus aktiviert ist. Hier ein Beispiel für ein JavaScript-initiiertes Vollbild:

await document.documentElement.requestFullscreen();

Funktionserkennung

Mit dem folgenden Muster können Sie prüfen, ob die Keyboard Lock API unterstützt wird:

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

Tastatur sperren

Die Methode lock() der Keyboard-Benutzeroberfläche gibt ein Versprechen zurück, nachdem die Erfassung von Tastendrücken für eine oder alle Tasten auf der physischen Tastatur aktiviert wurde. Mit dieser Methode können nur Schlüssel erfasst werden, denen vom zugrunde liegenden Betriebssystem Zugriff gewährt wird. Die Methode lock() nimmt ein Array mit einem oder mehreren Schlüsselcodes für die Sperrung an. Wenn keine Schlüsselcodes angegeben werden, werden alle Schlüssel gesperrt. Eine Liste gültiger Tastencodewerte finden Sie in der Spezifikation UI Events KeyboardEvent code Values.

Alle Schlüssel erfassen

Im folgenden Beispiel werden alle Tastendrücke erfasst.

navigator.keyboard.lock();

Bestimmte Tasten erfassen

Im folgenden Beispiel werden die Tasten W, A, S und D erfasst. Diese Tasten werden unabhängig davon erfasst, welche Modifikatoren beim Drücken der Taste verwendet werden. Bei Verwendung eines US-QWERTY-Layouts wird durch die Registrierung von "KeyW" sichergestellt, dass W, Umschalttaste + W, Strg + W, Strg + Umschalttaste + W sowie alle anderen Tastenkombinationen mit W an die App gesendet werden. Dasselbe gilt für "KeyA", "KeyS" und "KeyD".

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

Sie können auf erfasste Tastenanschläge mit Tastaturereignissen reagieren. In diesem Code wird beispielsweise das Ereignis onkeydown verwendet:

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.
  }
});

Tastatur entsperren

Die Methode unlock() entsperrt alle Schlüssel, die mit der Methode lock() erfasst wurden, und gibt synchron zurück.

navigator.keyboard.unlock();

Wenn ein Dokument geschlossen wird, ruft der Browser immer implizit unlock() auf.

Demo

Du kannst die Keyboard Lock API testen, indem du die Demo auf Glitch ausführst. Sehen Sie sich unbedingt den Quellcode an. Wenn Sie unten auf die Schaltfläche „Vollbildmodus“ klicken, wird die Demo in einem neuen Fenster geöffnet, damit der Vollbildmodus aktiviert werden kann.

Sicherheitsaspekte

Ein Problem mit dieser API besteht darin, dass sie verwendet werden könnte, um alle Tasten zu erfassen und (in Verbindung mit der Fullscreen API und der PointerLock API) den Nutzer daran zu hindern, die Webseite zu verlassen. Um dies zu verhindern, muss der Browser gemäß der Spezifikation eine Möglichkeit bieten, die Tastatursperre aufzuheben, auch wenn alle Tasten von der API angefordert werden. In Chrome müssen Sie dazu nur zwei Sekunden lang die Esc-Taste drücken, um die Tastatursperre zu beenden.

Danksagungen

Dieser Artikel wurde von Joe Medley und Kayce Basques gelesen. Die Spezifikation für das Tastaturschloss wurde von Gary Kacmarcik und Jamie Walch verfasst. Hero-Image von Ken Suarez auf Unsplash