WEB-API HARDWARE-INTERACTION JAVASCRIPT BROWSER WEB-DEVELOPMENT DEVICE-CONTROL IOT SECURITY PRIVACY MODERN-WEB

WebHID API: Mengendalikan Perangkat Kustom Langsung dari Browser Anda

⏱️ 7 menit baca
👨‍💻

WebHID API: Mengendalikan Perangkat Kustom Langsung dari Browser Anda

1. Pendahuluan

Pernahkah Anda membayangkan bisa mengontrol perangkat keras khusus, seperti gamepad unik atau alat medis sederhana, langsung dari aplikasi web di browser Anda? Selama bertahun-tahun, interaksi antara browser dan perangkat fisik terbatas pada keyboard, mouse, dan beberapa periferal standar lainnya. Untuk sesuatu yang lebih spesifik, developer biasanya harus membuat aplikasi desktop native atau ekstensi browser yang kompleks.

Namun, era tersebut kini mulai berubah berkat WebHID API. WebHID, kependekan dari Human Interface Device, adalah API modern yang memungkinkan aplikasi web Anda berkomunikasi dengan perangkat HID kustom. Ini membuka peluang baru yang menarik untuk menciptakan pengalaman web yang lebih kaya, interaktif, dan terintegrasi dengan dunia fisik.

Artikel ini akan membawa Anda menyelami WebHID API, mulai dari apa itu HID, bagaimana WebHID bekerja, hingga contoh praktis dan pertimbangan keamanan. Bersiaplah untuk membawa aplikasi web Anda ke level interaksi hardware yang belum pernah ada sebelumnya!

2. Memahami Human Interface Device (HID)

Sebelum kita membahas WebHID, mari kita pahami dulu apa itu HID. Human Interface Device (HID) adalah protokol standar yang dirancang untuk menyederhanakan komunikasi antara komputer (host) dan perangkat input/output yang digunakan manusia. Contoh paling umum dari perangkat HID adalah keyboard dan mouse Anda. Mereka adalah “standar” dan diakui secara universal oleh sistem operasi tanpa perlu driver khusus.

Namun, ada juga banyak perangkat HID “kustom” atau “non-standar”. Ini bisa berupa:

💡 Mengapa WebHID, bukan WebUSB atau Web Bluetooth?

Anda mungkin bertanya, “Bukankah sudah ada WebUSB dan Web Bluetooth API untuk interaksi hardware?” Betul sekali! Namun, WebHID mengisi celah penting:

Singkatnya, WebHID memungkinkan browser berinteraksi dengan perangkat HID yang, karena alasan keamanan atau implementasi khusus, tidak dapat diakses oleh driver sistem operasi generik atau API web lainnya.

3. Cara Kerja WebHID API

WebHID API bekerja dengan memungkinkan aplikasi web untuk:

  1. Mendeteksi dan meminta akses ke perangkat HID yang terhubung ke sistem pengguna.
  2. Membuka koneksi ke perangkat yang dipilih.
  3. Mengirim dan menerima data (disebut “reports”) dari perangkat tersebut.

Mari kita bedah komponen utamanya:

Model Keamanan WebHID

Keamanan adalah prioritas utama untuk API yang berinteraksi dengan hardware. WebHID API menerapkan beberapa lapisan keamanan:

Objek Kunci dalam WebHID

Setiap perangkat HID memiliki “Report Descriptor” yang menjelaskan struktur data yang dikirim dan diterima. WebHID API menyederhanakan ini dengan menggunakan konsep reportId dan reportType untuk mengidentifikasi jenis data.

4. Langkah-langkah Praktis Menggunakan WebHID API

Mari kita lihat bagaimana Anda bisa mulai menggunakan WebHID API dengan contoh kode sederhana.

Langkah 1: Meminta Akses Perangkat

Langkah pertama adalah meminta pengguna untuk memilih dan memberikan akses ke perangkat HID. Ini dilakukan dengan navigator.hid.requestDevice(). Anda dapat menyertakan filters untuk membatasi perangkat yang ditampilkan.

async function requestHidDevice() {
  try {
    // Filter untuk mencari perangkat dengan Vendor ID dan Product ID tertentu
    // Ganti dengan VID/PID perangkat Anda
    const devices = await navigator.hid.requestDevice({
      filters: [{ vendorId: 0xABCD, productId: 0xEFGH }]
    });

    if (devices.length === 0) {
      console.log('Tidak ada perangkat HID yang dipilih.');
      return null;
    }

    const device = devices[0];
    console.log(`Perangkat HID dipilih: ${device.productName}`);
    return device;

  } catch (error) {
    console.error('Gagal meminta akses perangkat HID:', error);
    return null;
  }
}

📌 Catatan: vendorId dan productId adalah nilai heksadesimal yang unik untuk setiap jenis perangkat. Anda bisa menemukan ini melalui Device Manager di Windows, lsusb -v di Linux, atau System Information di macOS.

Langkah 2: Membuka dan Mendengarkan Data dari Perangkat

Setelah mendapatkan objek HIDDevice, Anda perlu membukanya dan mendengarkan event inputreport untuk menerima data.

async function connectToDevice(device) {
  if (!device.opened) {
    await device.open();
    console.log('Koneksi ke perangkat HID berhasil dibuka.');
  }

  device.oninputreport = event => {
    const { data, device, reportId } = event;
    console.log(`Menerima laporan dari ${device.productName} (Report ID: ${reportId}):`);
    console.log(new Uint8Array(data.buffer)); // Tampilkan data sebagai array byte

    // Di sini Anda bisa memproses data yang diterima
    // Misalnya, membaca nilai sensor atau status tombol
  };

  // Mendengarkan saat perangkat dicabut
  navigator.hid.ondisconnect = event => {
    console.log(`Perangkat ${event.device.productName} telah dicabut.`);
    // Lakukan cleanup atau tampilkan pesan ke pengguna
  };
}

Langkah 3: Mengirim Data ke Perangkat (Output Report)

Jika perangkat HID Anda juga menerima perintah, Anda bisa mengirim data menggunakan device.sendReport().

async function sendCommandToDevice(device, reportId, dataBytes) {
  try {
    // reportId adalah ID dari output report yang ingin Anda kirim (seringkali 0)
    // dataBytes adalah Uint8Array yang berisi data yang akan dikirim
    await device.sendReport(reportId, dataBytes);
    console.log(`Perintah berhasil dikirim ke ${device.productName}.`);
  } catch (error) {
    console.error('Gagal mengirim perintah ke perangkat HID:', error);
  }
}

// Contoh penggunaan:
// const myDevice = await requestHidDevice();
// if (myDevice) {
//   await connectToDevice(myDevice);
//   // Kirim byte 0x01 sebagai perintah ke report ID 0
//   await sendCommandToDevice(myDevice, 0, new Uint8Array([0x01]));
// }

✅ Tips: reportId seringkali 0 jika perangkat hanya memiliki satu jenis report untuk input/output. Namun, perangkat yang lebih kompleks mungkin menggunakan ID yang berbeda, yang harus Anda ketahui dari dokumentasi perangkat atau Report Descriptor-nya.

5. Use Cases Nyata WebHID

Potensi WebHID API sangat luas. Berikut beberapa skenario di mana WebHID dapat menjadi game-changer:

🎯 Contoh Konkret: Bayangkan Anda memiliki sebuah