Mengambil Kunci dengan Keyboard Lock API

Menyediakan pengalaman layar penuh yang imersif untuk berbagai kasus penggunaan, termasuk situs interaktif, game, dan streaming desktop atau aplikasi jarak jauh.

Thomas Steiner

Dengan makin banyaknya pengguna yang menghabiskan sebagian besar waktu mereka di browser, situs, game, streaming desktop jarak jauh, dan streaming aplikasi yang sangat interaktif berupaya memberikan pengalaman layar penuh yang imersif. Untuk melakukannya, situs memerlukan akses ke tombol khusus dan pintasan keyboard saat berada dalam mode layar penuh, sehingga dapat digunakan untuk navigasi, menu, atau bermain game. Beberapa contoh tombol yang mungkin diperlukan adalah Esc, Alt + Tab, Cmd + `, dan Ctrl + N.

Secara default, tombol ini tidak tersedia untuk aplikasi web karena tombol tersebut diambil oleh browser atau sistem operasi yang mendasarinya. Keyboard Lock API memungkinkan situs menggunakan semua tombol yang tersedia dan diizinkan oleh OS host (lihat Kompatibilitas browser).

Ubuntu Linux di-streaming ke tab browser di Chrome macOS (belum berjalan dalam mode layar penuh).
Masalahnya: desktop jarak jauh Ubuntu Linux yang di-streaming tidak berjalan dalam mode layar penuh dan tanpa penguncian keyboard aktif, sehingga tombol sistem masih diambil oleh sistem operasi host macOS dan pengalaman yang didapatkan belum imersif.

Menggunakan Keyboard Lock API

Antarmuka Keyboard Keyboard API menyediakan fungsi yang mengalihkan pengambilan penekanan tombol dari keyboard fisik serta mendapatkan informasi tentang tata letak keyboard pengguna.

Prasyarat

Ada dua jenis layar penuh yang tersedia di browser modern: yang dimulai JavaScript melalui Fullscreen API dan yang dimulai pengguna melalui pintasan keyboard. Keyboard Lock API hanya tersedia jika layar penuh yang dimulai JavaScript aktif. Berikut contoh layar penuh yang dimulai JavaScript:

await document.documentElement.requestFullscreen();

Deteksi fitur

Anda dapat menggunakan pola berikut untuk memeriksa apakah Keyboard Lock API didukung:

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

Mengunci keyboard

Metode lock() dari antarmuka Keyboard menampilkan promise setelah mengaktifkan pengambilan penekanan tombol untuk tombol apa pun atau semua tombol di keyboard fisik. Metode ini hanya dapat mengambil kunci yang diberi akses oleh sistem operasi yang mendasarinya. Metode lock() menggunakan array yang berisi satu atau beberapa kode kunci untuk dikunci. Jika tidak ada kode kunci yang diberikan, semua kunci akan dikunci. Daftar nilai kode tombol yang valid tersedia dalam spesifikasi Nilai kode KeyboardEvent Peristiwa UI.

Merekam semua tombol

Contoh berikut merekam semua penekanan tombol.

navigator.keyboard.lock();

Mendeteksi tombol tertentu

Contoh berikut merekam tombol W, A, S, dan D. Tombol ini merekam kunci ini, terlepas dari pengubah mana yang digunakan dengan penekanan tombol. Dengan asumsi tata letak QWERTY AS, pendaftaran "KeyW" memastikan bahwa W, Shift + W, Control + W, Control + Shift + W, dan semua kombinasi pengubah tombol lainnya dengan W dikirim ke aplikasi. Hal yang sama berlaku untuk "KeyA", "KeyS", dan "KeyD".

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

Anda dapat merespons penekanan tombol yang direkam menggunakan peristiwa keyboard. Misalnya, kode ini menggunakan peristiwa 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.
  }
});

Membuka kunci keyboard

Metode unlock() membuka kunci semua kunci yang diambil oleh metode lock() dan ditampilkan secara sinkron.

navigator.keyboard.unlock();

Saat dokumen ditutup, browser selalu memanggil unlock() secara implisit.

Demo

Anda dapat menguji Keyboard Lock API dengan menjalankan demo ini. Pastikan untuk melihat kode sumbernya. Mengklik tombol Masuk ke layar penuh di bawah akan meluncurkan demo di jendela baru sehingga dapat masuk ke mode layar penuh.

Pertimbangan Keamanan

Salah satu masalah dengan API ini adalah bahwa API ini dapat digunakan untuk mengambil semua kunci dan (bersama dengan Fullscreen API dan PointerLock API) mencegah pengguna keluar dari halaman web. Untuk mencegah hal ini, spesifikasi mengharuskan browser menyediakan cara bagi pengguna untuk keluar dari kunci keyboard meskipun semua tombol diminta oleh API. Di Chrome, jalan keluar ini adalah penekanan tombol Esc yang lama (dua detik) untuk memicu keluar dari Kunci Keyboard.

Ucapan terima kasih

Artikel ini ditinjau oleh Joe Medley dan Kayce Basques. Spesifikasi Kunci Keyboard ditulis oleh Gary Kacmarcik dan Jamie Walch. Gambar banner besar oleh Ken Suarez di Unsplash.