Frontend WebHID Enumerace zařízení: Zjišťování připojených zařízení pomocí JavaScriptu

WebHID API otevírá potenciál pro webové aplikace komunikovat přímo s širokou škálou Human Interface Devices (HID), které jsou obvykle přístupné pouze nativním aplikacím. To otevírá vzrušující možnosti pro vytváření inovativních webových zážitků, které interagují se specializovaným hardwarem, jako jsou herní ovladače, vlastní vstupní zařízení, vědecké přístroje a další. Tento komplexní průvodce se ponoří do základního konceptu enumerace zařízení, což je klíčový první krok při navazování spojení s požadovaným zařízením HID.

Co je WebHID API?

WebHID API umožňuje webovým aplikacím přistupovat k Human Interface Devices. Tato zařízení zahrnují širokou kategorii, včetně:

• Herní ovladače: Joysticky, gamepady, závodní volanty
• Vstupní zařízení: Klávesnice, myši, trackbally
• Průmyslové ovládací prvky: Specializované ovládací panely, rozhraní senzorů
• Vědecké přístroje: Zařízení pro sběr dat, měřicí nástroje
• Vlastní hardware: Zákazková vstupní zařízení vytvořená pro specifické účely

Na rozdíl od starších API prohlížeče, které nabízely omezenou podporu HID, WebHID API poskytuje přímý přístup k zařízením HID, což umožňuje vývojářům vytvářet bohatší a interaktivnější webové aplikace. Představte si ovládání robotické paže ve vzdálené laboratoři, manipulaci s 3D modelem pomocí vlastního vstupního zařízení nebo příjem dat ze senzorů přímo ve webovém dashboardu – to vše v prohlížeči.

Porozumění enumeraci zařízení HID

Než budete moci interagovat se zařízením HID, vaše webová aplikace musí zjistit, která zařízení jsou připojena k systému uživatele. Tento proces se nazývá enumerace zařízení. WebHID API poskytuje mechanismus pro vyžádání přístupu ke konkrétním zařízením HID na základě ID dodavatele (VID) a ID produktu (PID) nebo pomocí širšího filtru.

Proces obvykle zahrnuje tyto kroky:

1. Vyžádání přístupu k zařízení: Webová aplikace vyzve uživatele, aby vybral zařízení HID pomocí navigator.hid.requestDevice().
2. Filtrování zařízení: Můžete zadat filtry pro zúžení seznamu zařízení prezentovaných uživateli. Tyto filtry jsou založeny na VID a PID zařízení.
3. Zpracování výběru zařízení: Uživatel vybere zařízení ze seznamu.
4. Otevření zařízení: Aplikace otevře připojení k vybranému zařízení.
5. Přenos dat: Jakmile je připojení navázáno, aplikace může odesílat a přijímat data ze zařízení.

Podrobný průvodce enumerací zařízení

1. Vyžádání přístupu k zařízení pomocí filtrů

Metoda navigator.hid.requestDevice() je vstupním bodem pro vyžádání přístupu k zařízením HID. Přijímá volitelný argument `filters`, což je pole objektů, které specifikují VID a PID zařízení, která chcete najít.

Zde je příklad, jak vyžádat přístup k zařízení s konkrétním VID a PID:

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // Nahraďte ID dodavatele vašeho zařízení
          productId: 0x5678 // Nahraďte ID produktu vašeho zařízení
        },
        // Přidejte další filtry pro jiná zařízení, pokud je to nutné
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // Použijte první vybrané zařízení
      console.log("HID Device Found:", device);
      // Otevřete zařízení a spusťte komunikaci
      await openHIDDevice(device);
    } else {
      console.log("No HID device selected.");
    }
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

// Příklad použití (např. spuštěno kliknutím na tlačítko):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

Důležité aspekty:

• ID dodavatele (VID) a ID produktu (PID): Jedná se o jedinečné identifikátory přiřazené zařízením USB a Bluetooth. Budete muset získat VID a PID cílového zařízení z dokumentace výrobce nebo pomocí systémových nástrojů (např. Správce zařízení ve Windows, Informace o systému v macOS nebo `lsusb` v Linuxu).
• Souhlas uživatele: Metoda requestDevice() zobrazí uživateli výzvu k povolení řízenou prohlížečem, která mu umožní vybrat, kterým zařízením HID udělí přístup. Jedná se o zásadní bezpečnostní opatření, které zabraňuje škodlivým webům v přístupu k citlivému hardwaru bez souhlasu uživatele.
• Více filtrů: Do pole `filters` můžete zahrnout více filtrů pro vyžádání přístupu k zařízením s různými VID a PID. To je užitečné, pokud vaše aplikace podporuje více hardwarových konfigurací.

2. Získání informací o zařízení

Jakmile uživatel vybere zařízení, metoda requestDevice() vrátí pole objektů HIDDevice. Každý objekt HIDDevice obsahuje informace o zařízení, jako je jeho VID, PID, usagePage, usage a collections. Tyto informace můžete použít k další identifikaci a konfiguraci zařízení.

async function openHIDDevice(device) {
  try {
    await device.open();
    console.log("HID Device Opened:", device.productName);

    // Poslouchejte zprávy o vstupu
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`Received input report ${reportId}:`, uint8Array);
      // Zpracujte data zprávy o vstupu
    });

    device.addEventListener("disconnect", event => {
      console.log("HID Device Disconnected:", device.productName);
      // Zpracujte odpojení zařízení
    });

  } catch (error) {
    console.error("Error opening HID device:", error);
  }
}

Vlastnosti zařízení:

• vendorId: ID dodavatele zařízení.
• productId: ID produktu zařízení.
• productName: Čitelný název produktu.
• collections: Pole objektů HIDCollectionInfo popisujících kolekce HID zařízení (hlášení, funkce atd.). Toto může být velmi složité a je potřeba pouze pro složitá zařízení.

3. Zpracování připojení a odpojení zařízení

WebHID API poskytuje události, které upozorní vaši aplikaci, když je zařízení připojeno nebo odpojeno. Můžete poslouchat události connect a disconnect na objektu navigator.hid.

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID Device Connected:", device);
  // Zpracujte připojení zařízení (např. znovu otevřete zařízení)
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID Device Disconnected:", device);
  // Zpracujte odpojení zařízení (např. uvolněte prostředky)
});

Osvědčené postupy pro správu připojení:

• Re-enumerace při připojení: Když se zařízení připojí, je často dobré znovu vyjmenovat zařízení, abyste zajistili, že vaše aplikace má aktuální seznam.
• Vyčištění prostředků při odpojení: Když se zařízení odpojí, uvolněte všechny prostředky s ním spojené (např. zavřete připojení zařízení, odeberte posluchače událostí).
• Zpracování chyb: Implementujte robustní zpracování chyb, abyste elegantně zvládli situace, kdy se zařízení nepodaří připojit nebo se neočekávaně odpojí.

Pokročilé techniky filtrování zařízení

Kromě základního filtrování VID a PID nabízí WebHID API pokročilejší techniky pro cílení na konkrétní zařízení. To je zvláště užitečné při práci se zařízeními, která mají více rozhraní nebo funkcí.

1. Filtrování podle Usage Page a Usage

Zařízení HID jsou uspořádána do *usage pages* a *usages*, které definují typ funkce, kterou zařízení poskytuje. Například klávesnice patří do usage page "Generic Desktop" a má usage "Keyboard". Můžete filtrovat zařízení na základě jejich usage page a usage, abyste se zaměřili na konkrétní typy zařízení.

async function requestSpecificKeyboard() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          usagePage: 0x01, // Generic Desktop Page
          usage: 0x06      // Keyboard Usage
        }
      ]
    });

    // ... (zbytek kódu pro zpracování zařízení)
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

Nalezení hodnot Usage Page a Usage:

• HID Usage Tables: Oficiální tabulky HID usage (publikované USB Implementers Forum) definují standardizované usage pages a usages pro různé typy zařízení.
• Dokumentace zařízení: Dokumentace výrobce zařízení může specifikovat hodnoty usage page a usage pro jeho zařízení.
• HID Report Descriptors: Pro pokročilé scénáře můžete analyzovat HID report descriptor zařízení a určit jeho podporované usage pages a usages.

2. Zpracování více rozhraní

Některá zařízení HID zpřístupňují více rozhraní, z nichž každé má svou vlastní sadu funkcí. WebHID API považuje každé rozhraní za samostatné zařízení HID. Chcete-li získat přístup ke konkrétnímu rozhraní, možná budete muset zkombinovat filtrování VID/PID s filtrováním usage page/usage, abyste se zaměřili na požadované rozhraní.

Praktické příklady a případy použití

1. Vytvoření vlastního rozhraní herního ovladače

Představte si, že vytváříte webovou hru a chcete podporovat vlastní herní ovladač. Pomocí WebHID API můžete přímo číst vstupy z tlačítek ovladače, joysticků a dalších ovládacích prvků. To vám umožní vytvořit vysoce responzivní a pohlcující herní zážitek.

2. Vytvoření webového MIDI kontroleru

Hudebníci a zvukoví inženýři mohou těžit z webových MIDI kontrolerů, které interagují s digitálními audio pracovními stanicemi (DAW) nebo syntezátory. WebHID API vám umožňuje vytvářet vlastní MIDI kontrolery, které odesílají a přijímají zprávy MIDI přímo v prohlížeči.

3. Interakce s vědeckými přístroji

Vědci a výzkumníci mohou používat WebHID API k propojení s vědeckými přístroji, jako jsou zařízení pro sběr dat, senzory a měřicí nástroje. To jim umožňuje shromažďovat a analyzovat data přímo ve webovém dashboardu nebo analytickém nástroji.

4. Aplikace pro usnadnění přístupu

WebHID poskytuje příležitosti pro vytváření asistenčních technologií. Například specializovaná vstupní zařízení pro uživatele s motorickým postižením lze integrovat přímo do webových aplikací, což poskytuje přizpůsobenější a přístupnější zážitky. Globální příklady mohou zahrnovat integraci specializovaných zařízení pro sledování očí pro navigaci bez použití rukou nebo přizpůsobitelné sady tlačítek pro přístup pomocí jediného spínače v různých jazycích a metodách vstupu.

Kompatibilita mezi prohlížeči a bezpečnostní aspekty

1. Podpora prohlížečů

WebHID API je v současné době podporováno v prohlížečích založených na Chromiu (Chrome, Edge, Opera) a je ve vývoji pro jiné prohlížeče. Před implementací WebHID API do vaší aplikace je důležité zkontrolovat kompatibilitu prohlížeče a poskytnout mechanismy pro případ, že prohlížeče API nepodporují.

2. Bezpečnostní aspekty

WebHID API je navrženo s ohledem na bezpečnost. Prohlížeč vyzve uživatele k udělení oprávnění předtím, než webové aplikaci umožní přístup k zařízení HID. To zabraňuje škodlivým webům v přístupu k citlivému hardwaru bez souhlasu uživatele. Kromě toho WebHID API funguje v bezpečnostním sandboxu prohlížeče, což omezuje přístup aplikace k systémovým prostředkům.

• Pouze HTTPS: WebHID, stejně jako ostatní výkonná webová API, vyžaduje pro provoz zabezpečený kontext (HTTPS).
• Gesta uživatele: Vyžádání přístupu k zařízení obvykle vyžaduje gesto uživatele (např. kliknutí na tlačítko), aby se zabránilo nevyžádaným žádostem o přístup.
• Permissions API: Permissions API lze použít k dotazování a správě oprávnění WebHID.

Řešení běžných problémů

1. Zařízení nenalezeno

Pokud vaše aplikace nemůže najít zařízení HID, zkontrolujte VID a PID. Ujistěte se, že se shodují se skutečnými identifikátory zařízení. Také ověřte, zda je zařízení správně připojeno a rozpoznáno operačním systémem.

2. Oprávnění odepřeno

Pokud uživatel odepře oprávnění k přístupu k zařízení HID, vaše aplikace s ním nebude moci komunikovat. Zpracujte tento scénář elegantně zobrazením zprávy uživateli a vysvětlením, proč je přístup potřeba. Zvažte poskytnutí alternativních způsobů interakce uživatele s vaší aplikací.

3. Problémy s formátem dat

Zařízení HID často používají vlastní formáty dat pro odesílání a přijímání dat. Budete muset porozumět formátu dat zařízení a implementovat odpovídající logiku parsování a serializace ve vaší aplikaci. Informace o formátu dat naleznete v dokumentaci výrobce zařízení.

Závěr

WebHID API umožňuje webovým vývojářům vytvářet inovativní a interaktivní webové aplikace, které komunikují přímo s Human Interface Devices. Pochopením principů enumerace zařízení, filtrování a správy připojení můžete odemknout plný potenciál WebHID API a vytvářet působivé uživatelské zážitky. Využijte sílu WebHID k propojení webu s fyzickým světem a podpořte nové možnosti pro kreativitu, produktivitu a přístupnost po celém světě.

Další zdroje

• Specifikace WebHID API
• WebHID API na Chrome Developers
• USB Implementers Forum (Informace o HID)