Tasten mit der Keyboard Lock API erfassen

Bieten Sie ein immersives Vollbilderlebnis für eine Vielzahl von Anwendungsfällen, darunter interaktive Websites, Spiele und Remote-Desktop- oder Anwendungsstreaming.

Thomas Steiner

Da immer mehr Nutzer die meiste Zeit im Browser verbringen, versuchen interaktive Websites, Spiele, Remote-Desktop-Streaming und Anwendungsstreaming, ein immersives Vollbilderlebnis zu bieten. Dazu benötigen Websites im Vollbildmodus Zugriff auf spezielle Tasten und Tastenkombinationen, damit diese für die Navigation, Menüs oder Spiele verwendet werden können. Beispiele für Tasten, die möglicherweise erforderlich sind: Esc, Alt + Tab, Cmd + ` und Strg + N.

Standardmäßig sind diese Tasten 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 verfügbaren Tasten verwenden, die vom Host-Betriebssystem zugelassen werden (siehe Browserkompatibilität).

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

Keyboard Lock API verwenden

Die Schnittstelle Keyboard der Keyboard API bietet Funktionen, mit denen das Erfassen von Tastendrücken auf der physischen Tastatur ein- und ausgeschaltet werden kann. Außerdem können Informationen zum Tastaturlayout des Nutzers abgerufen werden.

Voraussetzungen

In modernen Browsern gibt es zwei Arten von Vollbildmodi: JavaScript-initiiert über die Fullscreen API und vom Nutzer über eine Tastenkombination initiiert. Die Keyboard Lock API ist nur verfügbar, wenn der von JavaScript initiierte Vollbildmodus aktiv ist. Hier ein Beispiel für einen durch JavaScript initiierten Vollbildmodus:

await document.documentElement.requestFullscreen();

Feature-Erkennung

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 Schnittstelle Keyboard gibt ein Promise zurück, nachdem die Erfassung von Tastendrücken für einige oder alle Tasten auf der physischen Tastatur aktiviert wurde. Mit dieser Methode können nur Schlüssel erfasst werden, für die das zugrunde liegende Betriebssystem Zugriff gewährt. Die Methode lock() verwendet ein Array mit einem oder mehreren Schlüsselcodes, die gesperrt werden sollen. Wenn keine Schlüsselcodes angegeben sind, werden alle Schlüssel gesperrt. Eine Liste der gültigen Tastencodewerte finden Sie in der Spezifikation UI Events KeyboardEvent code Values.

Alle Tasten werden erfasst

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 mit dem Tastendruck verwendet werden. Wenn Sie ein US-QWERTY-Layout verwenden, werden durch die Registrierung von "KeyW" die Tastenkombinationen W, Umschalttaste + W, Strg + W, Strg + Umschalttaste + W und alle anderen Kombinationen mit W an die App gesendet. Dasselbe gilt für "KeyA", "KeyS" und "KeyD".

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

Sie können auf erfasste Tastendrücke 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 Tasten, die von 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 mit dieser Demo testen. Sehen Sie sich den Quellcode an. Wenn Sie unten auf die Schaltfläche „Vollbildmodus aktivieren“ klicken, wird die Demo in einem neuen Fenster im Vollbildmodus gestartet.

Sicherheitsaspekte

Ein Problem bei dieser API ist, dass sie verwendet werden könnte, um alle Tasten abzufangen 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 laut Spezifikation dem Nutzer eine Möglichkeit bieten, die Tastatursperre aufzuheben, auch wenn alle Tasten von der API angefordert werden. In Chrome wird die Tastatursperre durch langes Drücken (zwei Sekunden) der Esc-Taste beendet.

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.