Tasten mit der Keyboard Lock API erfassen

Bieten Sie ein immersives Vollbilderlebnis 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 App-Streaming 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 gibt es zwei Arten von Vollbildmodus: JavaScript-initiiert über die Fullscreen API und vom Nutzer über eine Tastenkombination. Die Keyboard Lock API ist nur verfügbar, wenn der JavaScript-initiierte Vollbildmodus aktiv 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. Wenn Sie davon ausgehen, dass die Tastatur ein US-QWERTY-Layout hat, wird durch die Registrierung von "KeyW" sichergestellt, dass W, Umschalttaste + W, Strg + W, Strg + Umschalttaste + W und 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

Sie können die Keyboard Lock API testen, indem Sie die Demo auf Glitch ausführen. Sehen Sie sich 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 ist dies ein langer (zwei Sekunden) Druck auf die Esc-Taste, um die Tastatursperre aufzuheben.

Danksagungen

Dieser Artikel wurde von Joe Medley und Kayce Basques geprüft. Die Spezifikation für die Tastatursperre wurde von Gary Kacmarcik und Jamie Walch verfasst. Hero-Image von Ken Suarez auf Unsplash