Web HID API: En omfattende guide til tilgang til Human Interface Device

Web HID API er et kraftig web-API som lar webapplikasjoner kommunisere direkte med Human Interface Devices (HID-er). HID-enheter omfatter et bredt spekter av periferiutstyr, inkludert tastaturer, mus, spillkontrollere, spesialiserte inndataenheter som strekkodeskannere, og til og med industrielle kontrollsystemer. Denne evnen åpner for spennende muligheter for webbaserte applikasjoner til å samhandle med den fysiske verden på nye og innovative måter.

Hva er Web HID API?

Web HID API gir et standardisert grensesnitt for nettlesere for å få tilgang til og kommunisere med HID-enheter. Før Web HID API var webapplikasjoner i stor grad begrenset til å samhandle med standard nettleserhendelser (f.eks. museklikk, tastaturinndata). Tilgang til mer spesialisert maskinvare krevde nettleserutvidelser eller native applikasjoner, noe som introduserte kompleksitet i utvikling, distribusjon og sikkerhet.

Web HID API adresserer disse begrensningene ved å tilby en sikker og standardisert måte for webapplikasjoner å:

• Enumerere HID-enheter: Oppdage HID-enheter som er koblet til brukerens system.
• Be om tilgang: Få brukertillatelse til å få tilgang til spesifikke HID-enheter.
• Sende og motta data: Utveksle data med HID-enheter ved hjelp av rapporter.

Fordeler med Web HID API

Web HID API tilbyr flere overbevisende fordeler for utviklere og brukere:

• Direkte maskinvareinteraksjon: Tillater webapplikasjoner å direkte kontrollere og motta data fra et bredt utvalg av HID-enheter, og utvider mulighetene for webbaserte applikasjoner.
• Forbedret brukeropplevelse: Muliggjør mer oppslukende og interaktive opplevelser ved å utnytte egenskapene til spesialisert maskinvare. Tenk deg en webbasert musikkproduksjonsapplikasjon som samhandler direkte med et MIDI-keyboard eller et webbasert spill som bruker avanserte gamepad-funksjoner.
• Kryssplattformkompatibilitet: Designet for å være plattformuavhengig, slik at webapplikasjoner kan fungere konsekvent på tvers av forskjellige operativsystemer og nettlesere som støtter API-et.
• Forbedret sikkerhet: Implementerer robuste sikkerhetstiltak, inkludert brukertillatelsesmeldinger og opprinnelsesbaserte begrensninger, for å beskytte brukernes personvern og forhindre ondsinnet tilgang til HID-enheter.
• Forenklet utvikling: Gir et relativt enkelt JavaScript API for å samhandle med HID-enheter, noe som reduserer kompleksiteten ved å utvikle maskinvaregrensesnitt for webapplikasjoner.

Sikkerhetshensyn

Web HID API inneholder flere sikkerhetsmekanismer for å beskytte brukere mot ondsinnede webapplikasjoner:

• Brukertillatelse: Før en webapplikasjon kan få tilgang til en HID-enhet, må brukeren eksplisitt gi tillatelse. Nettleseren vil vise en melding som ber brukeren om å godkjenne tilgang til den spesifikke enheten.
• Opprinnelsesbaserte begrensninger: Tilgang til HID-enheter er begrenset til opprinnelsen (domenet) til webapplikasjonen. Dette forhindrer at et ondsinnede nettsted får tilgang til HID-enheter som brukes av andre nettsteder.
• HTTPS-krav: Web HID API er bare tilgjengelig for webapplikasjoner som serveres over HTTPS, noe som sikrer at kommunikasjonen mellom nettleseren og serveren er kryptert og beskyttet mot avlytting.
• Begrenset enhetstilgang: API-et begrenser typene HID-enheter som webapplikasjoner kan få tilgang til. Enheter med sensitive funksjoner (f.eks. sikkerhetstokener) er vanligvis ekskludert.

Det er avgjørende for utviklere å følge beste sikkerhetspraksis når de bruker Web HID API for å ytterligere redusere potensielle risikoer. Dette inkluderer nøye validering av data mottatt fra HID-enheter og unngå lagring av sensitiv informasjon.

Hvordan bruke Web HID API

Her er en trinn-for-trinn-guide for å bruke Web HID API i webapplikasjonen din:

Trinn 1: Sjekk for API-støtte

Først må du bekrefte at nettleseren støtter Web HID API:

            if ("hid" in navigator) {
  console.log("Web HID API er støttet!");
} else {
  console.log("Web HID API støttes ikke i denne nettleseren.");
}
            

              
                Copy
              
            
          

Trinn 2: Be om enhetstilgang

Bruk navigator.hid.requestDevice()-metoden for å be brukeren om å velge en HID-enhet. Du kan spesifisere filtre for å begrense listen over enheter basert på leverandør-ID (vendorId) og produkt-ID (productId). Du kan få disse ID-ene fra enhetens dokumentasjon eller ved å bruke systemverktøy.

            async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        { vendorId: 0x1234, productId: 0x5678 }, // Eksempel på leverandør- og produkt-ID
        { usagePage: 0x0001, usage: 0x0006 } // Valgfri usagePage og usage
      ],
    });

    if (devices.length > 0) {
      const device = devices[0];
      console.log("Enhet valgt:", device);
      await connectToDevice(device);
    } else {
      console.log("Ingen enhet valgt.");
    }
  } catch (error) {
    console.error("Feil ved forespørsel om enhet:", error);
  }
}

            

              
                Copy
              
            
          

Viktig: vendorId og productId er avgjørende for å målrette spesifikke enheter. Du må finne disse verdiene for HID-enheten du har tenkt å bruke. Verktøy som lsusb på Linux eller Enhetsbehandling på Windows kan hjelpe deg med å finne dem.

Parameterne usagePage og usage brukes til å ytterligere avgrense enhetsvalget. Disse verdiene tilsvarer HID Usage Tables, som definerer den tiltenkte bruken av enheten. For eksempel indikerer usagePage: 0x0001 og usage: 0x0006 ofte et generisk tastatur.

Trinn 3: Koble til enheten

Når brukeren har valgt en enhet, må du åpne en tilkobling til den:

            async function connectToDevice(device) {
  try {
    await device.open();
    console.log("Enhet tilkoblet.");

    device.addEventListener("inputreport", handleInputReport);

    device.addEventListener("disconnect", () => {
        console.log('Enhet frakoblet.');
    });
  } catch (error) {
    console.error("Feil ved tilkobling til enhet:", error);
  }
}

            

              
                Copy
              
            
          

device.open()-metoden etablerer en tilkobling til HID-enheten. Det er viktig å håndtere potensielle feil under denne prosessen.

Koden setter også opp en hendelseslytter for inputreport-hendelsen. Denne hendelsen utløses når HID-enheten sender data til webapplikasjonen. En annen hendelseslytter legges til for "disconnect"-hendelsen for å håndtere enhetsfrakoblinger.

Trinn 4: Håndter inndatarapporter

inputreport-hendelsen gir tilgang til dataene som sendes av HID-enheten. Dataene er vanligvis strukturert som en byte-array.

            function handleInputReport(event) {
  const { data, device, reportId } = event;
  const uint8Array = new Uint8Array(data.buffer);

  console.log("Mottatt inndatarapport:", uint8Array);
  console.log("Rapport-ID:", reportId);

  // Behandle dataene basert på enheten og rapport-ID
  processData(uint8Array, reportId, device);
}

            

              
                Copy
              
            
          

data-egenskapen til hendelsen inneholder en ArrayBuffer som representerer rådataene som er mottatt fra enheten. Du kan konvertere dette til en Uint8Array for enklere manipulering.

reportId er en valgfri identifikator som kan brukes til å skille mellom forskjellige typer rapporter som sendes av samme enhet. Hvis enheten bruker rapport-ID-er, må du håndtere dem på riktig måte i databehandlingslogikken din.

Trinn 5: Send utdatarapporter (valgfritt)

Noen HID-enheter lar deg sende data tilbake til enheten (utdatarapporter). Dette kan brukes til å kontrollere enhetens oppførsel (f.eks. sette LED-er, kontrollere motorer).

            async function sendOutputReport(device, reportId, data) {
  try {
    const uint8Array = new Uint8Array(data);
    await device.sendReport(reportId, uint8Array);
    console.log("Utdatarapport sendt.");
  } catch (error) {
    console.error("Feil ved sending av utdatarapport:", error);
  }
}

            

              
                Copy
              
            
          

device.sendReport()-metoden sender en utdatarapport til enheten. reportId identifiserer den spesifikke rapporten, og data er en byte-array som inneholder dataene som skal sendes.

Trinn 6: Lukk tilkoblingen

Når du er ferdig med å samhandle med enheten, er det viktig å lukke tilkoblingen:

            async function disconnectDevice(device) {
  try {
    await device.close();
    console.log("Enhet frakoblet.");
  } catch (error) {
    console.error("Feil ved frakobling av enhet:", error);
  }
}

            

              
                Copy
              
            
          

device.close()-metoden lukker tilkoblingen til HID-enheten.

Praktiske bruksområder for Web HID API

Web HID API har et bredt spekter av potensielle bruksområder, inkludert:

• Gaming: Utvikle webbaserte spill som støtter avanserte spillkontrollere, joysticker og annet spillutstyr. Tenk deg å spille et racingspill i nettleseren din med full force feedback-støtte fra rattet ditt.
• Musikkproduksjon: Opprette webbaserte musikkproduksjonsapplikasjoner som samhandler med MIDI-keyboard, trommemaskiner og andre musikkinstrumenter. En musiker i Argentina kan samarbeide med en annen i Japan om et spor ved hjelp av den samme MIDI-enheten, kontrollert gjennom en webapp.
• Industriell kontroll: Bygge webbaserte dashbord og kontrollpaneler for industrielt utstyr, slik at operatører kan overvåke og kontrollere maskiner eksternt. For eksempel kan en solcellepanelfarm i den australske villmarken overvåkes og justeres via et webgrensesnitt koblet til kontrollmaskinvaren.
• Tilgjengelighet: Utvikle assisterende teknologier som bruker spesialiserte inndataenheter for å hjelpe personer med nedsatt funksjonsevne til å samhandle med nettet. Et spesialbygd brytergrensesnitt kan brukes til å navigere på et nettsted og skrive inn tekst.
• Vitenskapelig forskning: Grensesnitt mot vitenskapelige instrumenter og datainnsamlingsenheter direkte fra webbaserte forskningsverktøy. En forsker i Sveits kan kontrollere et mikroskop eksternt fra en nettleser og skaffe seg bilder og data.
• Point of Sale (POS)-systemer: Integrere strekkodeskannere, kredittkortlesere og andre POS-enheter i webbaserte salgssteder. En liten bedrift i Ghana kan bruke en webapp til å administrere salg, ved hjelp av en USB-strekkodeskanner koblet direkte til datamaskinen sin.
• Tilpassede inndataenheter: Støtte tilpassede eller nisjeinndataenheter som ikke støttes direkte av nettlesere. Dette inkluderer spesialiserte kontrollere for simuleringer, dataregistreringsterminaler og annen unik maskinvare.

Kodeeksempel: Lese tastaturinndata

Dette eksemplet demonstrerer hvordan du leser tastaturinndata fra et generisk HID-tastatur ved hjelp av Web HID API.

            // Be om HID-enhet
async function requestKeyboard() {
    try {
        const devices = await navigator.hid.requestDevice({
            filters: [{
                usagePage: 0x0001,
                usage: 0x0006
            }]
        });

        if (devices.length > 0) {
            const keyboard = devices[0];
            console.log("Tastatur valgt:", keyboard);
            await connectKeyboard(keyboard);
        } else {
            console.log("Ingen tastatur valgt.");
        }
    } catch (error) {
        console.error("Feil ved forespørsel om tastatur:", error);
    }
}

// Koble til tastaturet
async function connectKeyboard(keyboard) {
    try {
        await keyboard.open();
        console.log("Tastatur tilkoblet.");

        keyboard.addEventListener("inputreport", handleKeyboardInput);

        keyboard.addEventListener("disconnect", () => {
            console.log('Tastatur frakoblet.');
        });

    } catch (error) {
        console.error("Feil ved tilkobling til tastatur:", error);
    }
}

// Håndter tastaturinndata
function handleKeyboardInput(event) {
    const { data, reportId } = event;
    const uint8Array = new Uint8Array(data.buffer);

    // Eksempel: Skriv ut rådataene
    console.log("Tastaturinndata:", uint8Array);

    // TODO: Implementer logikk for parsing av tastekoder
    // Dette er et forenklet eksempel; ekte tastaturdekoding er mer kompleks

    // Grunnleggende eksempel for å tolke enkle tastetrykk basert på råinndata
    if(uint8Array[2] !== 0) {
      console.log("Tast trykket");
      // Ytterligere parsing for å identifisere den faktiske tasten kan utføres her.
    }
}

// Knapp for å utløse enhetsforespørselen
const requestButton = document.createElement('button');
requestButton.textContent = 'Be om tastatur';
requestButton.addEventListener('click', requestKeyboard);
document.body.appendChild(requestButton);

            

              
                Copy
              
            
          

Forklaring:

• Koden ber først om tilgang til HID-enheter som samsvarer med tastaturets bruksprofil (usagePage: 0x0001, usage: 0x0006).
• Den kobler deretter til det valgte tastaturet og lytter etter inputreport-hendelser.
• handleKeyboardInput-funksjonen mottar rådataene fra tastaturet.
• Eksemplet gir en plassholder for logikk for parsing av tastekoder. Dekoding av tastaturinndata kan være kompleks, da det avhenger av tastaturoppsettet og det spesifikke HID-rapportformatet. Du må konsultere tastaturets dokumentasjon eller HID-spesifikasjoner for å implementere riktig dekoding.

Utfordringer og begrensninger

Selv om Web HID API tilbyr betydelige fordeler, har det også noen utfordringer og begrensninger:

• Nettleserstøtte: Web HID API støttes ennå ikke av alle de store nettleserne. Du må sjekke nettleserkompatibilitet før du bruker API-et i applikasjonen din. Per sent 2024 har Chrome og Edge den beste støtten. Firefox-støtte er under utvikling.
• Enhetsdriverkrav: I noen tilfeller kan HID-enheter kreve at spesifikke drivere installeres på brukerens system. Dette kan gjøre distribusjonsprosessen mer kompleks.
• Dataparsingkompleksitet: Parsing av dataene som mottas fra HID-enheter kan være utfordrende, da dataformatet ofte er enhetsspesifikt og kan kreve detaljert kunnskap om HID-protokollen. Du må forstå rapportbeskrivelsen og HID-bruksstabellene.
• Sikkerhetsproblemer: Selv om Web HID API inkluderer sikkerhetstiltak, er det fortsatt viktig å være klar over potensielle sikkerhetsrisikoer. Utviklere må nøye validere data som mottas fra HID-enheter, og unngå å lagre sensitiv informasjon.
• Asynkron natur: Web HID API er asynkront, noe som betyr at du må bruke promises eller async/await for å håndtere de asynkrone operasjonene. Dette kan gjøre koden mer kompleks, spesielt for utviklere som ikke er kjent med asynkron programmering.

Beste praksis for bruk av Web HID API

For å sikre en jevn og sikker opplevelse når du bruker Web HID API, bør du vurdere følgende beste praksis:

• Sjekk alltid for API-støtte: Før du bruker Web HID API, må du bekrefte at nettleseren støtter det.
• Be om enhetstilgang bare når det er nødvendig: Unngå å be om tilgang til HID-enheter med mindre det er absolutt nødvendig.
• Gi klare forklaringer til brukere: Når du ber om enhetstilgang, gi klare og konsise forklaringer til brukere om hvorfor applikasjonen din trenger tilgang til enheten.
• Valider data mottatt fra HID-enheter: Valider nøye alle data som mottas fra HID-enheter for å forhindre sikkerhetssårbarheter.
• Håndter feil på en elegant måte: Implementer robust feilhåndtering for å håndtere potensielle feil under enhetstilkobling, dataoverføring og frakobling på en elegant måte.
• Lukk enhetstilkoblingen når du er ferdig: Lukk alltid tilkoblingen til HID-enheten når du er ferdig med å bruke den.
• Følg beste sikkerhetspraksis: Følg beste sikkerhetspraksis for å beskytte brukernes personvern og forhindre ondsinnet tilgang til HID-enheter.
• Bruk funksjonsdeteksjon: Sjekk om navigator.hid finnes før du prøver å bruke API-et. Gi fallback-mekanismer eller informative meldinger for nettlesere som ikke støtter det.
• Elegant nedgradering: Design applikasjonen din til å fungere, selv om noen HID-funksjoner ikke er tilgjengelige. Gi for eksempel tastatur- og musealternativer hvis en bestemt gamepad ikke støttes.

Fremtiden for Web HID API

Web HID API er fortsatt relativt nytt, men det har potensial til å revolusjonere måten webapplikasjoner samhandler med maskinvare på. Etter hvert som nettleserstøtten forbedres og flere utviklere omfavner API-et, kan vi forvente å se et bredere spekter av innovative webbaserte applikasjoner som utnytter kraften i HID-enheter. Ytterligere standardisering og forbedringer av enhetskompatibilitet forventes også å effektivisere utviklingen og forbedre brukeropplevelsen.

Konklusjon

Web HID API gir webutviklere mulighet til å skape rikere og mer interaktive opplevelser ved å bygge bro over gapet mellom nettet og den fysiske verden. Ved å forstå API-ets evner, sikkerhetshensyn og beste praksis, kan utviklere låse opp en verden av muligheter for webbaserte applikasjoner. Fra spill og musikkproduksjon til industriell kontroll og tilgjengelighet, er Web HID API klar til å drive innovasjon på tvers av ulike bransjer.

Begynn å utforske Web HID API i dag og oppdag det spennende potensialet det har for ditt neste webprosjekt!