Panduan komprehensif untuk menggunakan filter perangkat WebHID dalam pengembangan web frontend. Pelajari cara meminta dan memilih Perangkat Antarmuka Manusia (HID) tertentu untuk aplikasi web tingkat lanjut.
Filter Perangkat WebHID Frontend: Penjelasan Seleksi Perangkat Antarmuka Manusia
API WebHID membuka dunia kemungkinan baru untuk aplikasi web, memungkinkan mereka berinteraksi langsung dengan Perangkat Antarmuka Manusia (HID) seperti gamepad, perangkat input khusus, dan lainnya. Bagian penting dari penggunaan WebHID secara efektif adalah memahami filter perangkat. Panduan komprehensif ini akan memandu Anda melalui seluk-beluk filter perangkat WebHID, memberdayakan Anda untuk menciptakan pengalaman web yang kuat dan menarik.
Apa itu WebHID?
WebHID adalah API web yang memungkinkan aplikasi web berkomunikasi dengan perangkat HID yang terhubung ke komputer atau perangkat seluler pengguna. Berbeda dengan API web tradisional yang bergantung pada driver perangkat tertentu, WebHID menyediakan antarmuka generik untuk berinteraksi dengan berbagai macam perangkat, selama pengguna memberikan izin. Ini membuatnya ideal untuk perangkat yang tidak memiliki dukungan browser bawaan atau memerlukan penanganan input kustom.
Mengapa Menggunakan WebHID?
- Akses Perangkat Langsung: Berkomunikasi langsung dengan perangkat HID tanpa bergantung pada driver khusus browser.
- Penanganan Input Kustom: Mengimplementasikan pemetaan dan pemrosesan input kustom untuk perangkat khusus.
- Dukungan Perangkat Luas: Mendukung jangkauan perangkat yang lebih luas, termasuk gamepad, instrumen ilmiah, dan pengontrol industri.
- Pengalaman Pengguna yang Ditingkatkan: Menciptakan pengalaman web yang lebih imersif dan interaktif.
Memahami Filter Perangkat WebHID
Filter perangkat sangat penting untuk meminta akses ke perangkat HID tertentu. Saat aplikasi web Anda memanggil navigator.hid.requestDevice(), browser akan menampilkan pemilih perangkat, yang memungkinkan pengguna untuk memilih perangkat. Filter perangkat memungkinkan Anda untuk mempersempit daftar perangkat yang disajikan kepada pengguna, sehingga memudahkan mereka menemukan yang benar.
Filter perangkat adalah objek JavaScript yang menentukan kriteria untuk mencocokkan perangkat HID. Anda dapat menentukan beberapa filter dalam panggilan requestDevice(), dan browser hanya akan menampilkan perangkat yang cocok dengan setidaknya salah satu filter.
Properti Filter Perangkat
Properti berikut dapat digunakan dalam filter perangkat WebHID:vendorId(opsional): ID Vendor USB dari perangkat. Ini adalah angka 16-bit yang mengidentifikasi produsen perangkat.productId(opsional): ID Produk USB dari perangkat. Ini adalah angka 16-bit yang mengidentifikasi model spesifik dari perangkat.usagePage(opsional): Halaman Penggunaan (Usage Page) HID dari perangkat. Ini mengidentifikasi kategori perangkat (misalnya, Kontrol Desktop Generik, Kontrol Game).usage(opsional): Penggunaan (Usage) HID dari perangkat. Ini mengidentifikasi fungsi spesifik perangkat dalam halaman penggunaan (misalnya, Joystick, Gamepad).
Anda dapat menggunakan kombinasi properti ini untuk membuat filter yang sangat spesifik. Misalnya, Anda mungkin menyaring perangkat dengan vendorId dan productId tertentu untuk menargetkan model gamepad tertentu.
Contoh Praktis Filter Perangkat
Mari kita lihat beberapa contoh praktis tentang cara menggunakan filter perangkat di aplikasi web Anda.
Contoh 1: Menyaring untuk Gamepad Tertentu
Misalkan Anda ingin menargetkan gamepad tertentu dengan vendorId dan productId yang diketahui. Anda dapat menggunakan filter berikut:
const filters = [
{
vendorId: 0x045e, // Microsoft
productId: 0x028e, // Pengontrol Xbox 360
},
];
navigator.hid.requestDevice({ filters })
.then((devices) => {
// Tangani perangkat yang dipilih
})
.catch((error) => {
// Tangani kesalahan
});
Dalam contoh ini, filter hanya akan cocok dengan perangkat yang memiliki vendorId 0x045e (Microsoft) dan productId 0x028e (Pengontrol Xbox 360). Ganti ini dengan ID Vendor dan ID Produk yang sesuai dari perangkat yang Anda targetkan.
Contoh 2: Menyaring untuk Gamepad Apa Pun
Jika Anda ingin mengizinkan pengguna untuk memilih gamepad apa pun, Anda dapat menggunakan filter yang menentukan usagePage dan usage untuk gamepad:
const filters = [
{
usagePage: 0x01, // Kontrol Desktop Generik
usage: 0x05, // Gamepad
},
];
navigator.hid.requestDevice({ filters })
.then((devices) => {
// Tangani perangkat yang dipilih
})
.catch((error) => {
// Tangani kesalahan
});
Filter ini akan cocok dengan perangkat HID apa pun yang mengidentifikasi dirinya sebagai gamepad menggunakan kode penggunaan HID standar.
Contoh 3: Menggabungkan Filter
Anda dapat menggabungkan beberapa filter untuk memberikan lebih banyak fleksibilitas. Misalnya, Anda mungkin ingin mengizinkan pengguna untuk memilih model gamepad tertentu atau gamepad apa pun:
const filters = [
{
vendorId: 0x045e, // Microsoft
productId: 0x028e, // Pengontrol Xbox 360
},
{
usagePage: 0x01, // Kontrol Desktop Generik
usage: 0x05, // Gamepad
},
];
navigator.hid.requestDevice({ filters })
.then((devices) => {
// Tangani perangkat yang dipilih
})
.catch((error) => {
// Tangani kesalahan
});
Dalam kasus ini, pemilih perangkat akan menampilkan Pengontrol Xbox 360 tertentu (jika terhubung) dan perangkat lain yang mengidentifikasi dirinya sebagai gamepad.
Contoh 4: Menyaring untuk jenis keyboard tertentu pada sistem
Beberapa keyboard khusus memerlukan kode HID tertentu untuk diinisialisasi dengan benar. Contoh berikut mengasumsikan Anda mengetahui ID vendor, ID produk, halaman penggunaan, dan penggunaan untuk keyboard tersebut. Anda biasanya dapat menemukan informasi ini dari dokumentasi produsen, atau menggunakan alat daftar perangkat yang tersedia di sebagian besar sistem operasi.
const filters = [
{
vendorId: 0x1234, // Ganti dengan ID vendor Anda
productId: 0x5678, // Ganti dengan ID produk Anda
usagePage: 0x07, // Ganti dengan halaman penggunaan Anda (misalnya, Keyboard/Keypad)
usage: 0x01 // Ganti dengan penggunaan Anda (misalnya, Keyboard)
}
];
navigator.hid.requestDevice({ filters })
.then((devices) => {
// Tangani perangkat yang dipilih
})
.catch((error) => {
// Tangani kesalahan
});
Mendapatkan Informasi Perangkat
Setelah pengguna memilih perangkat, Anda dapat mengakses informasinya menggunakan objek HIDDevice.
Properti HIDDevice
vendorId: ID Vendor USB dari perangkat.productId: ID Produk USB dari perangkat.productName: Nama perangkat.collections: Array objekHIDCollectionyang mewakili deskriptor laporan HID dari perangkat.
Anda dapat menggunakan informasi ini untuk mengidentifikasi perangkat dan mengonfigurasi aplikasi Anda sesuai dengan itu.
Menangani Laporan HID
Setelah Anda mendapatkan HIDDevice, Anda perlu membukanya dan mulai mendengarkan laporan HID. Laporan HID adalah data mentah yang dikirim oleh perangkat ke aplikasi Anda.
Membuka Perangkat
device.open()
.then(() => {
console.log('Perangkat dibuka');
// Mulai mendengarkan laporan input
device.addEventListener('inputreport', (event) => {
const { data, reportId } = event;
// Proses laporan input
console.log(`Menerima laporan input dengan ID ${reportId}:`, data);
});
})
.catch((error) => {
console.error('Gagal membuka perangkat:', error);
});
Memproses Laporan Input
Laporan input diterima sebagai objek DataView. Struktur data tergantung pada deskriptor laporan HID perangkat. Anda perlu merujuk pada dokumentasi perangkat untuk memahami cara menafsirkan data tersebut.
Berikut adalah contoh sederhana tentang cara memproses laporan input:
device.addEventListener('inputreport', (event) => {
const { data, reportId } = event;
// Mengasumsikan byte pertama dari laporan mewakili status tombol
const buttonState = data.getUint8(0);
// Proses status tombol
if (buttonState & 0x01) {
console.log('Tombol 1 ditekan');
}
if (buttonState & 0x02) {
console.log('Tombol 2 ditekan');
}
});
Ini adalah contoh yang sangat dasar. Perangkat HID di dunia nyata seringkali memiliki struktur laporan yang lebih kompleks. Rekayasa balik Laporan HID bisa menjadi proses yang rumit; namun, tersedia alat yang membantu proses penguraian.
Penanganan Kesalahan
Penting untuk menangani kesalahan dengan baik saat bekerja dengan WebHID. Berikut adalah beberapa kesalahan umum yang mungkin Anda temui:
SecurityError: Pengguna telah menolak izin untuk mengakses perangkat HID.NotFoundError: Tidak ada perangkat yang cocok yang ditemukan.InvalidStateError: Perangkat sudah terbuka.- Kesalahan lainnya: Kesalahan USB, pemutusan perangkat yang tidak terduga.
Selalu bungkus kode WebHID Anda dalam blok try...catch dan berikan pesan kesalahan yang informatif kepada pengguna.
Praktik Terbaik untuk Pengembangan WebHID
- Gunakan Filter Perangkat: Selalu gunakan filter perangkat untuk mempersempit daftar perangkat yang disajikan kepada pengguna.
- Berikan Instruksi yang Jelas: Pandu pengguna tentang cara menghubungkan dan mengotorisasi perangkat, jika perangkat tidak muncul, jelaskan kepada pengguna di mana menemukan ID Vendor dan ID Produk untuk perangkat umum.
- Tangani Kesalahan dengan Baik: Terapkan penanganan kesalahan yang kuat untuk memberikan pengalaman pengguna yang lancar.
- Rujuk Dokumentasi Perangkat: Merujuk pada dokumentasi perangkat untuk memahami deskriptor laporan HID-nya.
- Uji di Berbagai Platform: Uji aplikasi Anda di berbagai browser dan sistem operasi untuk memastikan kompatibilitas.
- Pertimbangkan Keamanan: Waspadai implikasi keamanan saat bekerja dengan input pengguna. Sanitasi data dan hindari mengeksekusi kode yang tidak tepercaya.
- Sediakan Opsi Cadangan: Jika WebHID tidak didukung atau pengguna menolak izin, sediakan metode input alternatif.
Teknik Tingkat Lanjut
Laporan Fitur (Feature Reports)
Selain laporan input, perangkat HID juga dapat mengirim dan menerima laporan fitur. Laporan fitur digunakan untuk mengonfigurasi perangkat atau mengambil statusnya.
Untuk mengirim laporan fitur, gunakan metode device.sendFeatureReport().
const reportId = 0x01;
const data = new Uint8Array([0x01, 0x02, 0x03]); // Contoh data
device.sendFeatureReport(reportId, data)
.then(() => {
console.log('Laporan fitur berhasil dikirim');
})
.catch((error) => {
console.error('Gagal mengirim laporan fitur:', error);
});
Untuk menerima laporan fitur, gunakan metode device.getFeatureReport().
const reportId = 0x01;
device.getFeatureReport(reportId)
.then((data) => {
console.log('Menerima laporan fitur:', data);
})
.catch((error) => {
console.error('Gagal mendapatkan laporan fitur:', error);
});
Laporan Output (Output Reports)
WebHID juga mendukung laporan output, yang memungkinkan Anda mengirim data *ke* perangkat. Misalnya, Anda mungkin menggunakan laporan output untuk mengontrol LED atau aktuator lain pada perangkat.
Untuk mengirim laporan output, gunakan metode device.sendReport().
const reportId = 0x01;
const data = new Uint8Array([0x01, 0x02, 0x03]); // Contoh data
device.sendReport(reportId, data)
.then(() => {
console.log('Laporan output berhasil dikirim');
})
.catch((error) => {
console.error('Gagal mengirim laporan output:', error);
});
Pertimbangan Keamanan
Akses WebHID memerlukan izin pengguna, yang membantu mengurangi beberapa risiko keamanan. Namun, penting untuk tetap waspada terhadap potensi kerentanan.
- Sanitasi Data: Selalu sanitasi data yang diterima dari perangkat HID untuk mencegah injeksi kode atau serangan lainnya.
- Pembatasan Asal (Origin): WebHID tunduk pada kebijakan asal yang sama (same-origin policy), yang mencegah akses lintas-asal ke perangkat HID.
- Kesadaran Pengguna: Edukasi pengguna tentang risiko memberikan akses ke perangkat HID dan dorong mereka untuk hanya memberikan izin ke situs web tepercaya.
Perspektif dan Contoh Global
API WebHID memiliki implikasi global, memungkinkan pengembang untuk membuat aplikasi web yang mendukung berbagai perangkat dari berbagai produsen dan wilayah. Pertimbangkan contoh-contoh ini:
- Game: Mendukung gamepad dari berbagai produsen di berbagai negara (misalnya, pengontrol Sony PlayStation, pengontrol Microsoft Xbox, Pengontrol Pro Nintendo Switch, dan merek kurang terkenal dari Asia dan Eropa).
- Aksesibilitas: Membuat perangkat input khusus untuk pengguna dengan disabilitas, dengan mempertimbangkan standar dan preferensi aksesibilitas regional yang berbeda. Misalnya, keyboard khusus atau antarmuka sakelar yang dirancang untuk kebutuhan spesifik dan tersedia dalam tata letak yang berbeda.
- Otomatisasi Industri: Berinteraksi dengan pengontrol dan sensor industri yang digunakan di pabrik-pabrik di seluruh dunia, mendukung berbagai protokol komunikasi dan format data.
- Penelitian Ilmiah: Terhubung ke instrumen ilmiah yang digunakan di laboratorium penelitian secara global, memungkinkan peneliti untuk mengumpulkan dan menganalisis data langsung di aplikasi web. Bayangkan mengendalikan peralatan laboratorium di universitas di Tokyo dari laptop seorang peneliti di London.
- Pendidikan: Mendukung robot pendidikan dan perangkat interaktif yang digunakan di ruang kelas di seluruh dunia, memberikan siswa pengalaman belajar langsung. Ini bisa termasuk robot pengkodean yang diproduksi di Cina yang digunakan di ruang kelas di Brasil.
WebHID vs. API Web Lainnya
Perlu dicatat bagaimana WebHID dibandingkan dengan API web lain yang terkait dengan interaksi perangkat:
- API Gamepad: API Gamepad menyediakan antarmuka tingkat lebih tinggi khusus untuk gamepad. WebHID menawarkan lebih banyak fleksibilitas dan kontrol tetapi memerlukan penanganan data perangkat yang lebih manual. API Gamepad sangat cocok untuk gamepad umum, sementara WebHID dapat mendukung perangkat input yang lebih eksotis atau khusus.
- API WebUSB: WebUSB memungkinkan aplikasi web berkomunikasi dengan perangkat USB secara langsung. WebHID dirancang khusus untuk Perangkat Antarmuka Manusia, sementara WebUSB dapat digunakan untuk jangkauan perangkat USB yang lebih luas. WebUSB mungkin digunakan untuk instrumen ilmiah khusus yang terhubung melalui USB, sedangkan WebHID akan digunakan untuk keyboard atau mouse kustom.
- API Web Serial: Web Serial memungkinkan komunikasi melalui port serial. Ini berguna untuk berinteraksi dengan sistem tertanam dan perangkat lain yang berkomunikasi melalui koneksi serial. Mikrokontroler yang mengirim data melalui koneksi serial dapat menggunakan Web Serial, sementara joystick yang dibuat khusus akan menggunakan WebHID.
Masa Depan WebHID
API WebHID terus berkembang, dengan upaya berkelanjutan untuk meningkatkan keamanan, kinerja, dan kemudahan penggunaannya. Seiring semakin banyaknya perangkat yang mengadopsi standar HID, WebHID akan menjadi alat yang semakin penting bagi pengembang web. Harapkan untuk melihat fitur yang lebih canggih dan dukungan browser yang lebih baik di masa depan.
Kesimpulan
WebHID adalah API yang kuat yang membuka berbagai kemungkinan untuk aplikasi web. Dengan memahami filter perangkat dan cara menangani laporan HID, Anda dapat menciptakan pengalaman web yang menarik dan interaktif yang memanfaatkan potensi penuh Perangkat Antarmuka Manusia. Baik Anda sedang membangun game, alat aksesibilitas, atau sistem kontrol industri, WebHID dapat membantu Anda menghubungkan aplikasi web Anda dengan dunia fisik. Ingatlah untuk memprioritaskan pengalaman pengguna, keamanan, dan kompatibilitas lintas platform untuk menciptakan aplikasi WebHID yang sukses dan dapat diakses secara global.