Leg sleutels vast met de Keyboard Lock API

Bied een meeslepende ervaring op volledig scherm voor diverse toepassingen, waaronder interactieve websites, games en het streamen van desktops of applicaties op afstand.

Thomas Steiner

Nu steeds meer gebruikers het grootste deel van hun tijd in de browser doorbrengen, streven interactieve websites, games, remote desktop streaming en applicatiestreaming ernaar een meeslepende ervaring op volledig scherm te bieden. Om dit te bereiken, moeten websites toegang hebben tot speciale toetsen en sneltoetsen wanneer ze in de modus voor volledig scherm staan, zodat deze gebruikt kunnen worden voor navigatie, menu's of games. Enkele voorbeelden van toetsen die hiervoor nodig kunnen zijn, zijn Esc , Alt + Tab , Cmd + ` en Ctrl + N.

Standaard zijn deze toetsen niet beschikbaar voor de webapplicatie, omdat ze worden vastgelegd door de browser of het onderliggende besturingssysteem. De Keyboard Lock API stelt websites in staat om alle beschikbare toetsen te gebruiken die door het hostbesturingssysteem zijn toegestaan ​​(zie Browsercompatibiliteit ).

Ubuntu Linux wordt gestreamd naar een browsertabblad in macOS Chrome (draait nog niet in de volledige schermmodus).
Het probleem: een gestreamde Ubuntu Linux-desktop op afstand draait niet in de volledige schermmodus en zonder actieve toetsenbordvergrendeling, waardoor systeemtoetsen nog steeds worden onderschept door het macOS-hostbesturingssysteem en de ervaring nog niet meeslepend is.

De Keyboard Lock API gebruiken

De Keyboard van de Keyboard API biedt functies waarmee toetsaanslagen van het fysieke toetsenbord kunnen worden vastgelegd en waarmee informatie over de toetsenbordindeling van de gebruiker kan worden verkregen.

Voorwaarde

In moderne browsers zijn er twee soorten volledig scherm beschikbaar: via JavaScript met behulp van de Fullscreen API en via een sneltoets die door de gebruiker wordt geactiveerd. De Keyboard Lock API is alleen beschikbaar wanneer het door JavaScript geïnitieerde volledig scherm actief is. Hier is een voorbeeld van een door JavaScript geïnitieerd volledig scherm:

await document.documentElement.requestFullscreen();

Kenmerkdetectie

Je 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 interface retourneert een promise nadat het vastleggen van toetsaanslagen voor één of alle toetsen op het fysieke toetsenbord is ingeschakeld. Deze methode kan alleen toetsen vastleggen waartoe het onderliggende besturingssysteem toegang heeft verleend. De lock() `-methode accepteert een array met één of meer toetsencodes die moeten worden vergrendeld. Als er geen toetsencodes worden opgegeven, worden alle toetsen vergrendeld. Een lijst met geldige toetsencodewaarden is beschikbaar in de specificatie `UI Events KeyboardEvent code Values` .

Alle sleutels vastleggen

Het volgende voorbeeld registreert alle toetsaanslagen.

navigator.keyboard.lock();

Het vastleggen van specifieke sleutels

Het volgende voorbeeld registreert de toetsen W , A , S en D. Deze toetsen worden geregistreerd ongeacht welke modificatietoetsen worden gebruikt bij het indrukken ervan. Uitgaande van een Amerikaanse QWERTY-indeling, zorgt het registreren van "KeyW" ervoor dat W , Shift + W , Control + W , Control + Shift + W en alle andere toetscombinaties met W naar de app worden verzonden. Hetzelfde geldt voor "KeyA" , "KeyS" en "KeyD" .

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

Je 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 unlock() methode ontgrendelt alle sleutels die door de lock() methode zijn vastgelegd en retourneert synchroon.

navigator.keyboard.unlock();

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

Demo

Je kunt de Keyboard Lock API testen door deze demo uit te voeren. Bekijk zeker ook de broncode . Door op de knop 'Volledig scherm' hieronder te klikken, wordt de demo in een nieuw venster geopend, zodat deze in de volledige schermmodus kan worden gezet.

Beveiligingsaspecten

Een mogelijke zorg met deze API is dat deze gebruikt zou kunnen worden om alle toetsen te onderscheppen 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 een manier biedt om de toetsenbordvergrendeling op te heffen, zelfs als alle toetsen door de API worden opgevraagd. In Chrome is deze ontsnappingsmogelijkheid een lange (twee seconden) Esc- toetsdruk om de toetsenbordvergrendeling op te heffen.

Dankbetuigingen

Dit artikel is beoordeeld door Joe Medley en Kayce Basques . De specificatie voor Keyboard Lock is geschreven door Gary Kacmarcik en Jamie Walch .