Mengambil Kunci dengan Keyboard Lock API

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

Thomas Steiner

Dengan semakin banyak pengguna yang menghabiskan sebagian besar waktu mereka di browser, situs yang sangat interaktif, game, streaming desktop jarak jauh, dan streaming aplikasi 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 game. Beberapa contoh tombol yang mungkin diperlukan adalah Esc, Alt + Tab, Cmd + `, dan Ctrl + N.

Secara default, kunci ini tidak tersedia untuk aplikasi web karena diambil oleh browser atau sistem operasi yang mendasarinya. Keyboard Lock API memungkinkan situs menggunakan semua kunci 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).
Masalah: desktop jarak jauh Ubuntu Linux yang di-streaming tidak berjalan dalam mode layar penuh dan tanpa kunci keyboard aktif, sehingga kunci sistem masih diambil oleh sistem operasi host macOS dan pengalamannya 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 adalah 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 salah satu atau semua tombol pada keyboard fisik. Metode ini hanya dapat mengambil kunci yang diberi akses oleh sistem operasi yang mendasarinya. Metode lock() menggunakan array dari satu atau beberapa kode tombol untuk dikunci. Jika tidak ada kode tombol yang disediakan, semua kunci akan dikunci. Daftar nilai kode tombol yang valid tersedia dalam spesifikasi Nilai kode KeyboardEvent Peristiwa UI.

Merekam semua kunci

Contoh berikut menangkap semua penekanan tombol.

navigator.keyboard.lock();

Mengambil kunci tertentu

Contoh berikut menangkap tombol W, A, S, dan D. Fungsi ini menangkap kunci ini terlepas dari pengubah mana yang digunakan dengan penekanan tombol. Dengan asumsi tata letak QWERTY AS, mendaftarkan "KeyW" akan 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 di Glitch. Pastikan untuk memeriksa kode sumbernya. Mengklik tombol Masuk ke layar penuh di bawah akan meluncurkan demo di jendela baru sehingga dapat memasuki mode layar penuh.

Pertimbangan Keamanan

Salah satu masalah dengan API ini adalah 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 mewajibkan browser untuk menyediakan cara bagi pengguna untuk keluar dari kunci keyboard meskipun semua kunci diminta oleh API. Di Chrome, fitur ini berupa tombol Esc yang panjang (dua detik) yang ditekan untuk memicu keluar dari Kunci Keyboard.

Ucapan terima kasih

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