Przechwytywanie klawiszy przy użyciu interfejsu Keyboard Lock API

Zapewnij immersyjne wrażenia na pełnym ekranie w różnych przypadkach użycia, takich jak interaktywne witryny, gry, zdalny pulpit czy strumieniowe przesyłanie aplikacji.

Thomas Steiner

Coraz więcej użytkowników spędza większość czasu w przeglądarce, dlatego interaktywne witryny, gry, strumieniowe przesyłanie pulpitu zdalnego i aplikacji starają się zapewnić im atrakcyjne wrażenia na pełnym ekranie. Aby to umożliwić, witryny potrzebują dostępu do klawiszy specjalnych i skrótów klawiszowych w trybie pełnoekranowym, aby można było ich używać do nawigacji, menu lub gier. Przykłady klawiszy, które mogą być wymagane: Esc, Alt + Tab, Cmd + ` i Ctrl + N.

Domyślnie te klawisze nie są dostępne dla aplikacji internetowej, ponieważ są przechwytywane przez przeglądarkę lub system operacyjny. Interfejs Keyboard Lock API umożliwia witrynom korzystanie ze wszystkich dostępnych klawiszy dozwolonych przez system operacyjny hosta (patrz Zgodność z przeglądarką).

Ubuntu Linux przesyłany strumieniowo do karty przeglądarki w Chrome na macOS (jeszcze nie działa w trybie pełnego ekranu).
Problem: strumieniowany pulpit zdalny Ubuntu Linux nie działa w trybie pełnoekranowym i nie ma aktywnej blokady klawiatury, więc klawisze systemowe są nadal przechwytywane przez system operacyjny hosta macOS, a wrażenia nie są jeszcze w pełni immersyjne.

Korzystanie z interfejsu Keyboard Lock API

Interfejs Keyboard interfejsu Keyboard API udostępnia funkcje, które przełączają przechwytywanie naciśnięć klawiszy na klawiaturze fizycznej, a także pobierają informacje o układzie klawiatury użytkownika.

Warunek wstępny

W nowoczesnych przeglądarkach dostępne są 2 typy pełnego ekranu: uruchamiany przez JavaScript za pomocą interfejsu Fullscreen API i uruchamiany przez użytkownika za pomocą skrótu klawiszowego. Interfejs Keyboard Lock API jest dostępny tylko wtedy, gdy aktywny jest pełny ekran uruchamiany przez JavaScript. Oto przykład pełnego ekranu zainicjowanego przez JavaScript:

await document.documentElement.requestFullscreen();

Wykrywanie funkcji

Możesz użyć tego wzorca, aby sprawdzić, czy interfejs Keyboard Lock API jest obsługiwany:

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

Blokowanie klawiatury

Metoda lock() interfejsu Keyboard zwraca obietnicę po włączeniu przechwytywania naciśnięć dowolnych lub wszystkich klawiszy na klawiaturze fizycznej. Ta metoda może przechwytywać tylko klawisze, do których dostęp jest przyznany przez system operacyjny. Metoda lock() przyjmuje tablicę zawierającą co najmniej 1 kod klucza do zablokowania. Jeśli nie podasz żadnych kodów klawiszy, wszystkie klawisze zostaną zablokowane. Listę prawidłowych wartości kodów klawiszy znajdziesz w specyfikacji UI Events KeyboardEvent code Values.

Przechwytywanie wszystkich klawiszy

Poniższy przykład rejestruje wszystkie naciśnięcia klawiszy.

navigator.keyboard.lock();

Przechwytywanie określonych klawiszy

Poniższy przykład pokazuje, jak przechwytywać klawisze W, A, S i D. Przechwytuje te klawisze niezależnie od tego, jakie modyfikatory są używane podczas ich naciskania. W przypadku układu klawiatury US QWERTY zarejestrowanie "KeyW" zapewnia, że W, Shift + W, Control + W, Control + Shift + W i wszystkie inne kombinacje klawiszy modyfikujących z W są wysyłane do aplikacji. To samo dotyczy "KeyA", "KeyS" i "KeyD".

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

Możesz reagować na naciśnięcia klawiszy, używając zdarzeń klawiatury. Na przykład ten kod używa zdarzenia onkeydown:

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

Odblokowywanie klawiatury

Metoda unlock() odblokowuje wszystkie klawisze przechwycone przez metodę lock() i zwraca wynik synchronicznie.

navigator.keyboard.unlock();

Gdy dokument jest zamknięty, przeglądarka zawsze wywołuje unlock().

Prezentacja

Możesz przetestować interfejs Keyboard Lock API, uruchamiając tę wersję demonstracyjną. Koniecznie sprawdź kod źródłowy. Kliknięcie przycisku „Włącz tryb pełnoekranowy” poniżej spowoduje uruchomienie wersji demonstracyjnej w nowym oknie, dzięki czemu będzie można włączyć tryb pełnoekranowy.

Bezpieczeństwo

Jednym z problemów związanych z tym interfejsem API jest to, że można go użyć do przechwycenia wszystkich klawiszy i (w połączeniu z interfejsami Fullscreen API i PointerLock API) uniemożliwić użytkownikowi opuszczenie strony internetowej. Aby temu zapobiec, specyfikacja wymaga, aby przeglądarka umożliwiała użytkownikowi wyjście z blokady klawiatury, nawet jeśli interfejs API żąda wszystkich klawiszy. W Chrome tym sposobem jest długie (2 sekundy) naciśnięcie klawisza Esc, które powoduje wyjście z blokady klawiatury.

Podziękowania

Ten artykuł sprawdzili Joe Medley i Kayce Basques. Autorami specyfikacji blokady klawiatury są Gary Kacmarcik i Jamie Walch.