Mengambil Kunci dengan Keyboard Lock API

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

Thomas Steiner

Dengan semakin banyak pengguna yang menghabiskan sebagian besar waktunya di browser, situs web, game, streaming desktop jarak jauh yang sangat interaktif, dan streaming aplikasi berupaya untuk memberikan pengalaman layar penuh yang imersif. Untuk melakukannya, situs memerlukan akses ke tombol khusus dan pintasan keyboard saat berada dalam mode layar penuh, sehingga situs 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 yang diizinkan oleh OS host (lihat Kompatibilitas browser).

Ubuntu Linux di-streaming ke tab browser di macOS Chrome (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 yang aktif, sehingga tombol sistem masih direkam oleh sistem operasi host macOS dan pengalamannya belum imersif.

Menggunakan Keyboard Lock API

Antarmuka Keyboard Keyboard API menyediakan fungsi yang mengalihkan perekaman 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 oleh JavaScript melalui Fullscreen API dan dimulai oleh pengguna melalui pintasan keyboard. Keyboard Lock API hanya tersedia saat 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 menangkap kunci yang diberi akses oleh sistem operasi yang mendasarinya. Metode lock() mengambil array dari satu atau beberapa kode tombol untuk dikunci. Jika kode tombol tidak diberikan, semua kunci akan dikunci. Daftar nilai kode kunci yang valid tersedia di spesifikasi Nilai kode KeyboardEvent Peristiwa UI.

Mengambil semua kunci

Contoh berikut ini mencatat semua penekanan tombol.

navigator.keyboard.lock();

Menangkap kunci tertentu

Contoh berikut menangkap kunci W, A, S, dan D. Metode ini menangkap kunci-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 ditangkap oleh metode lock() dan ditampilkan secara sinkron.

navigator.keyboard.unlock();

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

Demo

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

Pertimbangan Keamanan

Salah satu kekhawatiran 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 tersebut mengharuskan browser menyediakan cara bagi pengguna untuk keluar dari kunci keyboard meskipun semua tombol diminta oleh API. Di Chrome, pintu keluar ini adalah penekanan tombol Esc panjang (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. Banner besar oleh Ken Suarez di Unsplash.