Leg sleutels vast met de Keyboard Lock API

Bied een meeslepende ervaring op volledig scherm voor een verscheidenheid aan gebruiksscenario's, waaronder interactieve websites, games en externe desktop- of applicatiestreaming.

Thomas Steiner

Nu steeds meer gebruikers het grootste deel van hun tijd in de browser doorbrengen, streven rijkelijk interactieve websites, games, externe desktopstreaming en applicatiestreaming ernaar om een ​​meeslepende ervaring op volledig scherm te bieden. Om dit te bereiken hebben sites toegang nodig tot speciale toetsen en sneltoetsen terwijl ze zich in de modus Volledig scherm bevinden, zodat ze kunnen worden gebruikt voor navigatie, menu's of gamen. Enkele voorbeelden van de toetsen die mogelijk vereist zijn, zijn Esc , Alt + Tab , Cmd + ` en Ctrl + N.

Standaard zijn deze sleutels niet beschikbaar voor de webapplicatie, omdat ze worden vastgelegd door de browser of het onderliggende besturingssysteem. Met de Keyboard Lock API kunnen websites alle beschikbare toetsen gebruiken die door het host-besturingssysteem zijn toegestaan ​​(zie Browsercompatibiliteit ).

Ubuntu Linux gestreamd naar een browsertabblad in macOS Chrome (nog niet actief in volledig schermmodus).
Het probleem: een gestreamde Ubuntu Linux externe desktop draait niet op volledig scherm en zonder actieve toetsenbordvergrendeling, dus systeemtoetsen worden nog steeds vastgelegd door het macOS-hostbesturingssysteem en de ervaring is nog niet meeslepend.

Met behulp van de Keyboard Lock-API

De Keyboard van de toetsenbord-API biedt functies waarmee u kunt schakelen tussen het vastleggen van toetsaanslagen vanaf het fysieke toetsenbord en het verkrijgen van informatie over de toetsenbordindeling van de gebruiker.

Voorwaarde

Er zijn twee soorten volledig scherm beschikbaar in moderne browsers: door JavaScript geïnitieerd via de Fullscreen API en door de gebruiker gestart via een sneltoets. De Keyboard Lock API is alleen beschikbaar als het door JavaScript geïnitieerde volledige scherm actief is. Hier is een voorbeeld van een door JavaScript geïnitieerd volledig scherm:

await document.documentElement.requestFullscreen();

Functiedetectie

U kunt het volgende patroon gebruiken om te controleren of de Keyboard Lock API wordt ondersteund:

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

Het toetsenbord vergrendelen

De lock() methode van de Keyboard retourneert een belofte nadat het vastleggen van toetsaanslagen voor een of alle toetsen op het fysieke toetsenbord is ingeschakeld. Deze methode kan alleen sleutels vastleggen waarvoor toegang is verleend door het onderliggende besturingssysteem. De lock() methode gebruikt een array van een of meer sleutelcodes om te vergrendelen. Als er geen sleutelcodes worden opgegeven, worden alle sleutels vergrendeld. Een lijst met geldige sleutelcodewaarden is beschikbaar in de UI Events KeyboardEvent code Values- specificatie.

Alle sleutels vastleggen

In het volgende voorbeeld worden alle toetsaanslagen vastgelegd.

navigator.keyboard.lock();

Vastleggen van specifieke sleutels

In het volgende voorbeeld worden de W- , A- , S- en D -toetsen vastgelegd. Het legt deze toetsen vast, ongeacht welke modificatoren worden gebruikt bij de toetsaanslag. Uitgaande van een Amerikaanse QWERTY-indeling, zorgt het registreren van "KeyW" ervoor dat W , Shift + W , Control + W , Control + Shift + W en alle andere toetsaanpassingscombinaties met W naar de app worden verzonden. Hetzelfde geldt voor "KeyA" , "KeyS" en "KeyD" .

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

U kunt reageren op vastgelegde toetsaanslagen met behulp van toetsenbordgebeurtenissen. Deze code gebruikt bijvoorbeeld de onkeydown gebeurtenis:

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

Het toetsenbord ontgrendelen

De methode unlock() ontgrendelt alle sleutels die zijn vastgelegd door de methode lock() en keert synchroon terug.

navigator.keyboard.unlock();

Wanneer een document wordt gesloten, roept de browser altijd impliciet unlock() aan.

Demo

Je kunt de Keyboard Lock API testen door de demo op Glitch uit te voeren. Zorg ervoor dat u de broncode bekijkt . Als u op de knop Volledig scherm hieronder klikt, wordt de demo in een nieuw venster gestart, zodat deze naar de modus Volledig scherm kan gaan.

Beveiligingsoverwegingen

Een probleem met deze API is dat deze kan worden gebruikt om alle sleutels te bemachtigen en (in combinatie met de Fullscreen API en de PointerLock API ) te voorkomen dat de gebruiker de webpagina verlaat. Om dit te voorkomen, vereist de specificatie dat de browser de gebruiker een manier biedt om de toetsenbordvergrendeling af te sluiten, zelfs als alle sleutels door de API worden opgevraagd. In Chrome bestaat dit ontsnappingsluik uit een lange (twee seconden) druk op de Esc- toets om het afsluiten van Toetsenbordvergrendeling te activeren.

Dankbetuigingen

Dit artikel is beoordeeld door Joe Medley en Kayce Basques . De Keyboard Lock-specificatie is geschreven door Gary Kacmarcik en Jamie Walch . Heldenafbeelding door Ken Suarez op Unsplash .