Spletno naštevanje naprav WebHID: Odkrivanje povezanih naprav z JavaScriptom

API WebHID spletnim aplikacijam odpira potencial za neposredno komunikacijo s širokim naborom naprav s človeškim vmesnikom (HID), ki so običajno dostopne le izvornim aplikacijam. To odpira vznemirljive možnosti za ustvarjanje inovativnih spletnih izkušenj, ki komunicirajo s specializirano strojno opremo, kot so igralni krmilniki, prilagojene vnosne naprave, znanstveni instrumenti in drugo. Ta celovit vodnik se poglobi v osrednji koncept naštevanja naprav, ki je ključni prvi korak pri vzpostavljanju povezave z želeno napravo HID.

Kaj je API WebHID?

API WebHID omogoča spletnim aplikacijam dostop do naprav s človeškim vmesnikom (Human Interface Devices). Te naprave zajemajo široko kategorijo, vključno z:

• Igralni krmilniki: Igralne palice, igralni plošči, volani
• Vnosne naprave: Tipkovnice, miške, sledilne kroglice
• Industrijski krmilniki: Specializirane nadzorne plošče, vmesniki za senzorje
• Znanstveni instrumenti: Naprave za zajem podatkov, merilna orodja
• Strojna oprema po meri: Prilagojene vnosne naprave, ustvarjene za posebne namene

Za razliko od starejših brskalniških API-jev, ki so ponujali omejeno podporo za HID, API WebHID omogoča neposreden dostop do naprav HID, kar razvijalcem omogoča ustvarjanje bogatejših in bolj interaktivnih spletnih aplikacij. Predstavljajte si, da v oddaljenem laboratoriju upravljate robotsko roko, z vnosno napravo po meri manipulirate s 3D-modelom ali prejemate podatke senzorjev neposredno na spletni nadzorni plošči – vse to znotraj brskalnika.

Razumevanje naštevanja naprav HID

Preden lahko komunicirate z napravo HID, mora vaša spletna aplikacija odkriti, katere naprave so povezane z uporabnikovim sistemom. Ta postopek se imenuje naštevanje naprav. API WebHID zagotavlja mehanizem za zahtevanje dostopa do določenih naprav HID na podlagi ID-ja prodajalca (VID) in ID-ja izdelka (PID) ali z uporabo širšega filtra.

Postopek običajno vključuje naslednje korake:

1. Zahtevanje dostopa do naprave: Spletna aplikacija uporabnika pozove, da izbere napravo HID z uporabo navigator.hid.requestDevice().
2. Filtriranje naprav: Določite lahko filtre za zožitev seznama naprav, ki so predstavljene uporabniku. Ti filtri temeljijo na VID in PID naprave.
3. Obravnava izbire naprave: Uporabnik izbere napravo s seznama.
4. Odpiranje naprave: Aplikacija odpre povezavo z izbrano napravo.
5. Prenos podatkov: Ko je povezava vzpostavljena, lahko aplikacija pošilja in prejema podatke od naprave.

Vodič po korakih za naštevanje naprav

1. Zahtevanje dostopa do naprave s filtri

Metoda navigator.hid.requestDevice() je vstopna točka za zahtevanje dostopa do naprav HID. Sprejme neobvezen argument `filters`, ki je polje objektov, ki določajo VID in PID naprav, ki jih želite najti.

Tu je primer, kako zahtevati dostop do naprave z določenim VID in PID:

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // Zamenjajte z ID-jem prodajalca vaše naprave
          productId: 0x5678 // Zamenjajte z ID-jem izdelka vaše naprave
        },
        // Po potrebi dodajte več filtrov za druge naprave
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // Uporabi prvo izbrano napravo
      console.log("HID Device Found:", device);
      // Odpri napravo in začni komunikacijo
      await openHIDDevice(device);
    } else {
      console.log("No HID device selected.");
    }
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

// Primer uporabe (npr. sproženo s klikom na gumb):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

Pomembni premisleki:

• ID prodajalca (VID) in ID izdelka (PID): To sta edinstvena identifikatorja, dodeljena napravam USB in Bluetooth. VID in PID vaše ciljne naprave boste morali pridobiti iz dokumentacije proizvajalca ali z uporabo sistemskih orodij (npr. Upravitelj naprav v sistemu Windows, Sistemske informacije v sistemu macOS ali `lsusb` v sistemu Linux).
• Soglasje uporabnika: Metoda requestDevice() uporabniku prikaže poziv za dovoljenje, ki ga nadzoruje brskalnik, in mu omogoča, da izbere, katerim napravam HID bo odobril dostop. To je ključni varnostni ukrep za preprečevanje zlonamernim spletnim mestom dostopa do občutljive strojne opreme brez soglasja uporabnika.
• Več filtrov: V polje `filters` lahko vključite več filtrov za zahtevanje dostopa do naprav z različnimi VID-i in PID-i. To je uporabno, če vaša aplikacija podpira več konfiguracij strojne opreme.

2. Pridobivanje informacij o napravi

Ko uporabnik izbere napravo, metoda requestDevice() vrne polje objektov HIDDevice. Vsak objekt HIDDevice vsebuje informacije o napravi, kot so njen VID, PID, usagePage, usage in zbirke (collections). Te informacije lahko uporabite za nadaljnjo identifikacijo in konfiguracijo naprave.

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

    // Poslušaj poročila o vnosu
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`Received input report ${reportId}:`, uint8Array);
      // Obdelaj podatke poročila o vnosu
    });

    device.addEventListener("disconnect", event => {
      console.log("HID Device Disconnected:", device.productName);
      // Obravnavaj prekinitev povezave z napravo
    });

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

Lastnosti naprave:

• vendorId: ID prodajalca naprave.
• productId: ID izdelka naprave.
• productName: Človeku berljivo ime izdelka.
• collections: Polje objektov HIDCollectionInfo, ki opisujejo HID zbirke naprave (poročila, funkcije itd.). To je lahko zelo zapleteno in je potrebno samo za kompleksne naprave.

3. Obravnavanje povezave in prekinitve povezave z napravo

API WebHID zagotavlja dogodke, ki vašo aplikacijo obvestijo, ko je naprava povezana ali odklopljena. Poslušate lahko dogodka connect in disconnect na objektu navigator.hid.

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID Device Connected:", device);
  // Obravnavaj povezavo z napravo (npr. ponovno odpri napravo)
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID Device Disconnected:", device);
  // Obravnavaj prekinitev povezave z napravo (npr. počisti vire)
});

Najboljše prakse za upravljanje povezav:

• Ponovno naštevanje ob povezavi: Ko se naprava poveže, je pogosto dobra praksa ponovno našteti naprave, da zagotovite, da ima vaša aplikacija posodobljen seznam.
• Čiščenje virov ob prekinitvi povezave: Ko se naprava odklopi, sprostite vse vire, povezane z njo (npr. zaprite povezavo z napravo, odstranite poslušalce dogodkov).
• Obravnavanje napak: Implementirajte robustno obravnavanje napak za elegantno obravnavo situacij, ko se naprava ne uspe povezati ali se nepričakovano odklopi.

Napredne tehnike filtriranja naprav

Poleg osnovnega filtriranja po VID in PID ponuja API WebHID naprednejše tehnike za ciljanje določenih naprav. To je še posebej uporabno pri napravah, ki imajo več vmesnikov ali funkcionalnosti.

1. Filtriranje po strani uporabe (Usage Page) in uporabi (Usage)

Naprave HID so organizirane v strani uporabe (usage pages) in uporabe (usages), ki določajo vrsto funkcionalnosti, ki jo naprava ponuja. Na primer, tipkovnica pripada strani uporabe »Generic Desktop« in ima uporabo »Keyboard«. Naprave lahko filtrirate na podlagi njihove strani uporabe in uporabe, da ciljate na določene vrste naprav.

async function requestSpecificKeyboard() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          usagePage: 0x01, // Stran za splošno namizje (Generic Desktop)
          usage: 0x06      // Uporaba za tipkovnico (Keyboard)
        }
      ]
    });

    // ... (preostala koda za obravnavo naprave)
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

Iskanje vrednosti za stran uporabe in uporabo:

• Tabele uporabe HID (HID Usage Tables): Uradne tabele uporabe HID (ki jih objavlja USB Implementers Forum) določajo standardizirane strani uporabe in uporabe za različne vrste naprav.
• Dokumentacija naprave: Dokumentacija proizvajalca naprave lahko določa vrednosti strani uporabe in uporabe za njihovo napravo.
• Opisniki poročil HID (HID Report Descriptors): V naprednih scenarijih lahko analizirate opisnik poročil HID naprave, da določite njene podprte strani uporabe in uporabe.

2. Obravnavanje več vmesnikov

Nekatere naprave HID imajo več vmesnikov, vsak s svojim naborom funkcionalnosti. API WebHID vsak vmesnik obravnava kot ločeno napravo HID. Za dostop do določenega vmesnika boste morda morali kombinirati filtriranje po VID/PID s filtriranjem po strani uporabe/uporabi, da ciljate na želeni vmesnik.

Praktični primeri in primeri uporabe

1. Izdelava vmesnika za igralni krmilnik po meri

Predstavljajte si, da gradite spletno igro in želite podpreti igralni krmilnik po meri. Z API-jem WebHID lahko neposredno berete vnose z gumbov, igralnih palic in drugih kontrol krmilnika. To vam omogoča ustvarjanje zelo odzivne in poglobljene igralne izkušnje.

2. Ustvarjanje spletnega krmilnika MIDI

Glasbeniki in zvočni inženirji lahko izkoristijo spletne krmilnike MIDI, ki komunicirajo z digitalnimi avdio delovnimi postajami (DAW) ali sintetizatorji. API WebHID vam omogoča izdelavo krmilnikov MIDI po meri, ki pošiljajo in prejemajo sporočila MIDI neposredno v brskalniku.

3. Interakcija z znanstvenimi instrumenti

Raziskovalci in znanstveniki lahko uporabijo API WebHID za povezovanje z znanstvenimi instrumenti, kot so naprave za zajem podatkov, senzorji in merilna orodja. To jim omogoča zbiranje in analizo podatkov neposredno na spletni nadzorni plošči ali v orodju za analizo.

4. Aplikacije za dostopnost

WebHID ponuja priložnosti za ustvarjanje podpornih tehnologij. Na primer, specializirane vnosne naprave za uporabnike z motoričnimi ovirami je mogoče neposredno vključiti v spletne aplikacije, kar zagotavlja bolj prilagojene in dostopne izkušnje. Globalni primeri lahko vključujejo integracijo specializiranih naprav za sledenje očem za prostoročno navigacijo ali prilagodljivih nizov gumbov za dostop z enim stikalom v različnih jezikih in vnosnih metodah.

Združljivost med brskalniki in varnostni vidiki

1. Podpora brskalnikov

API WebHID je trenutno podprt v brskalnikih, ki temeljijo na Chromiumu (Chrome, Edge, Opera), in je v razvoju za druge brskalnike. Pred implementacijo API-ja WebHID v svojo aplikacijo je pomembno preveriti združljivost brskalnikov in zagotoviti nadomestne mehanizme za brskalnike, ki API-ja ne podpirajo.

2. Varnostni vidiki

API WebHID je zasnovan z mislijo na varnost. Brskalnik uporabnika pozove za dovoljenje, preden spletni aplikaciji dovoli dostop do naprave HID. To preprečuje zlonamernim spletnim mestom dostop do občutljive strojne opreme brez soglasja uporabnika. Poleg tega API WebHID deluje znotraj varnostnega peskovnika brskalnika, kar omejuje dostop aplikacije do sistemskih virov.

• Samo HTTPS: WebHID, tako kot drugi močni spletni API-ji, za delovanje zahteva varen kontekst (HTTPS).
• Uporabniške poteze: Zahtevanje dostopa do naprave običajno zahteva uporabniško potezo (npr. klik na gumb), da se preprečijo nezaželene zahteve za dostop.
• API za dovoljenja (Permissions API): API za dovoljenja se lahko uporablja za poizvedovanje in upravljanje dovoljenj za WebHID.

Odpravljanje pogostih težav

1. Naprava ni najdena

Če vaša aplikacija ne najde naprave HID, dvakrat preverite VID in PID. Prepričajte se, da se ujemata z dejanskima identifikatorjema naprave. Prav tako preverite, ali je naprava pravilno povezana in jo operacijski sistem prepozna.

2. Dovoljenje zavrnjeno

Če uporabnik zavrne dovoljenje za dostop do naprave HID, vaša aplikacija ne bo mogla komunicirati z njo. To situacijo obravnavajte elegantno tako, da uporabniku prikažete sporočilo in pojasnite, zakaj je dostop potreben. Razmislite o zagotavljanju alternativnih načinov interakcije uporabnika z vašo aplikacijo.

3. Težave s formatom podatkov

Naprave HID pogosto uporabljajo formate podatkov po meri za pošiljanje in prejemanje podatkov. Morali boste razumeti format podatkov naprave in v svoji aplikaciji implementirati ustrezno logiko za razčlenjevanje in serializacijo. Za informacije o formatu podatkov si oglejte dokumentacijo proizvajalca naprave.

Zaključek

API WebHID opolnomoči spletne razvijalce za ustvarjanje inovativnih in interaktivnih spletnih aplikacij, ki neposredno komunicirajo z napravami s človeškim vmesnikom. Z razumevanjem načel naštevanja naprav, filtriranja in upravljanja povezav lahko sprostite polni potencial API-ja WebHID in ustvarite prepričljive uporabniške izkušnje. Sprejmite moč WebHID-a za povezovanje spleta s fizičnim svetom, s čimer boste spodbujali nove možnosti za ustvarjalnost, produktivnost in dostopnost po vsem svetu.

Dodatni viri

• Specifikacija API-ja WebHID
• API WebHID na strani Chrome Developers
• USB Implementers Forum (Informacije o HID)