Mengambil Kunci dengan Keyboard Lock API

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

Thomas Steiner

Dengan semakin banyaknya pengguna yang menghabiskan sebagian besar waktu mereka di browser, situs web, game, streaming desktop jarak jauh, dan streaming aplikasi yang sangat interaktif berupaya memberikan pengalaman layar penuh yang imersif. Untuk mencapai hal ini, situs memerlukan akses ke tombol khusus dan pintasan keyboard saat berada dalam mode layar penuh, agar 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 ditangkap 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 melakukan streaming ke tab browser di macOS Chrome (belum berjalan dalam mode layar penuh).
Masalahnya: desktop jarak jauh Ubuntu Linux yang di-streaming tidak berjalan dalam mode layar penuh dan tanpa kunci keyboard aktif, sehingga tombol sistem masih diambil oleh sistem operasi host macOS dan pengalaman tersebut belum imersif.

Menggunakan Keyboard Lock API

Antarmuka Keyboard Keyboard API menyediakan fungsi yang mengubah 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 dengan 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 dengan 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 perekaman penekanan tombol untuk satu atau semua tombol di 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 di spesifikasi Nilai kode KeyboardEvent UI.

Mengambil semua kunci

Contoh berikut merekam semua penekanan tombol.

navigator.keyboard.lock();

Mengambil kunci tertentu

Contoh berikut menangkap kunci 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" 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 semua kunci yang ditangkap 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. Mengeklik tombol Masuk 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 mengharuskan browser menyediakan cara bagi pengguna untuk keluar dari kunci keyboard meskipun semua tombol diminta oleh API. Di Chrome, fitur ini berupa tombol Esc yang panjang (dua detik) 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.