Фронтенд изброяване на WebHID устройства: Откриване на свързани устройства с JavaScript

WebHID API отключва потенциала на уеб приложенията да комуникират директно с широк кръг устройства с човешки интерфейс (HID), които обикновено са достъпни само за нативни приложения. Това открива вълнуващи възможности за създаване на иновативни уеб изживявания, които взаимодействат със специализиран хардуер като гейм контролери, персонализирани входни устройства, научни инструменти и др. Това подробно ръководство се гмурка в основната концепция за изброяване на устройства, което е решаващата първа стъпка в установяването на връзка с желаното HID устройство.

Какво е WebHID API?

WebHID API позволява на уеб приложенията да имат достъп до устройства с човешки интерфейс. Тези устройства обхващат широка категория, включително:

• Гейм контролери: Джойстици, геймпадове, състезателни волани
• Входни устройства: Клавиатури, мишки, тракболи
• Индустриални контроли: Специализирани контролни панели, сензорни интерфейси
• Научни инструменти: Устройства за събиране на данни, измервателни инструменти
• Персонализиран хардуер: Устройства за въвеждане по поръчка, създадени за специфични цели

За разлика от по-старите API-та на браузърите, които предлагаха ограничена HID поддръжка, WebHID API осигурява директен достъп до HID устройства, което позволява на разработчиците да създават по-богати и по-интерактивни уеб приложения. Представете си как управлявате роботизирана ръка в отдалечена лаборатория, манипулирате 3D модел с персонализирано входно устройство или получавате данни от сензори директно в уеб-базирано табло за управление - всичко това в браузъра.

Разбиране на изброяването на HID устройства

Преди да можете да взаимодействате с HID устройство, вашето уеб приложение трябва да открие кои устройства са свързани към системата на потребителя. Този процес се нарича изброяване на устройства. WebHID API предоставя механизъм за заявка на достъп до конкретни HID устройства въз основа на идентификатор на доставчик (VID) и идентификатор на продукт (PID) или чрез използване на по-широк филтър.

Процесът обикновено включва следните стъпки:

1. Заявка за достъп до устройство: Уеб приложението подканва потребителя да избере HID устройство чрез navigator.hid.requestDevice().
2. Филтриране на устройства: Можете да зададете филтри, за да стесните списъка с устройства, представени на потребителя. Тези филтри се основават на VID и PID на устройството.
3. Обработка на избора на устройство: Потребителят избира устройство от списъка.
4. Отваряне на устройството: Приложението отваря връзка с избраното устройство.
5. Прехвърляне на данни: След като връзката е установена, приложението може да изпраща и получава данни от устройството.

Стъпка по стъпка ръководство за изброяване на устройства

1. Заявка за достъп до устройство с филтри

Методът navigator.hid.requestDevice() е входната точка за заявка на достъп до HID устройства. Той приема незадължителен аргумент filters, който е масив от обекти, указващи VID и PID на устройствата, които искате да намерите.

Ето пример как да заявите достъп до устройство с конкретни VID и PID:

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // Replace with your device's Vendor ID
          productId: 0x5678 // Replace with your device's Product ID
        },
        // Add more filters for other devices if needed
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // Use the first selected device
      console.log("HID Device Found:", device);
      // Open the device and start communication
      await openHIDDevice(device);
    } else {
      console.log("No HID device selected.");
    }
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

// Example usage (e.g., triggered by a button click):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

Важни съображения:

• Идентификатор на доставчик (VID) и Идентификатор на продукт (PID): Това са уникални идентификатори, присвоени на USB и Bluetooth устройства. Ще трябва да получите VID и PID на вашето целево устройство от документацията на производителя или като използвате системни инструменти (напр. Device Manager в Windows, System Information в macOS или lsusb в Linux).
• Съгласие на потребителя: Методът requestDevice() показва контролирано от браузъра съобщение за разрешение на потребителя, което му позволява да избере до кои HID устройства да предостави достъп. Това е решаваща мярка за сигурност, за да се предотврати достъпът на злонамерени уебсайтове до чувствителен хардуер без съгласието на потребителя.
• Множество филтри: Можете да включите няколко филтъра в масива filters, за да заявите достъп до устройства с различни VID и PID. Това е полезно, ако вашето приложение поддържа множество хардуерни конфигурации.

2. Получаване на информация за устройството

След като потребителят е избрал устройство, методът requestDevice() връща масив от обекти HIDDevice. Всеки обект HIDDevice съдържа информация за устройството, като неговите VID, PID, usagePage, usage и collections. Можете да използвате тази информация за по-нататъшно идентифициране и конфигуриране на устройството.

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

    // Listen for input reports
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`Received input report ${reportId}:`, uint8Array);
      // Process the input report data
    });

    device.addEventListener("disconnect", event => {
      console.log("HID Device Disconnected:", device.productName);
      // Handle device disconnection
    });

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

Свойства на устройството:

• vendorId: Идентификаторът на доставчика на устройството.
• productId: Идентификаторът на продукта на устройството.
• productName: Човешко-четимото име на продукта.
• collections: Масив от обекти HIDCollectionInfo, описващи HID колекциите на устройството (отчети, функции и др.). Това може да бъде много сложно и е необходимо само за сложни устройства.

3. Обработка на свързване и прекъсване на връзката с устройството

WebHID API предоставя събития, за да уведоми вашето приложение, когато устройство се свърже или прекъсне връзката. Можете да слушате за събитията connect и disconnect на обекта navigator.hid.

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID Device Connected:", device);
  // Handle device connection (e.g., re-open the device)
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID Device Disconnected:", device);
  // Handle device disconnection (e.g., clean up resources)
});

Най-добри практики за управление на връзките:

• Повторно изброяване при свързване: Когато устройство се свърже, често е добра практика да се извърши повторно изброяване на устройствата, за да се гарантира, че вашето приложение има актуален списък.
• Почистване на ресурси при прекъсване на връзката: Когато устройство прекъсне връзката, освободете всички ресурси, свързани с него (напр. затворете връзката с устройството, премахнете слушателите на събития).
• Обработка на грешки: Внедрете стабилна обработка на грешки, за да се справяте елегантно със ситуации, в които устройството не успее да се свърже или прекъсне връзката неочаквано.

Разширени техники за филтриране на устройства

Освен основното филтриране по VID и PID, WebHID API предлага по-напреднали техники за насочване към конкретни устройства. Това е особено полезно при работа с устройства, които имат множество интерфейси или функционалности.

1. Филтриране по страница на употреба (Usage Page) и употреба (Usage)

HID устройствата са организирани в *страници на употреба* (usage pages) и *употреби* (usages), които определят типа функционалност, която устройството предоставя. Например, клавиатурата принадлежи към страницата на употреба "Generic Desktop" и има употреба "Keyboard". Можете да филтрирате устройства въз основа на тяхната страница на употреба и употреба, за да се насочите към конкретни типове устройства.

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

    // ... (rest of the code to handle the device)
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

Намиране на стойности за страница на употреба и употреба:

• HID таблици на употреба: Официалните HID таблици на употреба (публикувани от USB Implementers Forum) определят стандартизираните страници на употреба и употреби за различни типове устройства.
• Документация на устройството: Документацията на производителя на устройството може да посочва стойностите за страница на употреба и употреба за тяхното устройство.
• HID дескриптори на отчети: За напреднали сценарии можете да анализирате HID дескриптора на отчета на устройството, за да определите поддържаните от него страници на употреба и употреби.

2. Работа с множество интерфейси

Някои HID устройства предоставят множество интерфейси, всеки със собствен набор от функционалности. WebHID API третира всеки интерфейс като отделно HID устройство. За да получите достъп до конкретен интерфейс, може да се наложи да комбинирате филтриране по VID/PID с филтриране по страница на употреба/употреба, за да се насочите към желания интерфейс.

Практически примери и случаи на употреба

1. Изграждане на персонализиран интерфейс за гейм контролер

Представете си, че създавате уеб-базирана игра и искате да поддържате персонализиран гейм контролер. Можете да използвате WebHID API, за да четете директно входни данни от бутоните, джойстиците и другите контроли на контролера. Това ви позволява да създадете силно отзивчиво и потапящо гейминг изживяване.

2. Създаване на уеб-базиран MIDI контролер

Музиканти и аудио инженери могат да се възползват от уеб-базирани MIDI контролери, които взаимодействат с цифрови аудио работни станции (DAW) или синтезатори. WebHID API ви позволява да изграждате персонализирани MIDI контролери, които изпращат и получават MIDI съобщения директно в браузъра.

3. Взаимодействие с научни инструменти

Изследователи и учени могат да използват WebHID API, за да се свързват с научни инструменти, като устройства за събиране на данни, сензори и измервателни инструменти. Това им позволява да събират и анализират данни директно в уеб-базирано табло за управление или инструмент за анализ.

4. Приложения за достъпност

WebHID предоставя възможности за създаване на помощни технологии. Например, специализирани входни устройства за потребители с двигателни увреждания могат да бъдат интегрирани директно в уеб приложения, осигурявайки по-персонализирани и достъпни изживявания. Глобалните примери могат да включват интегриране на специализирани устройства за проследяване на очите за навигация без ръце или персонализирани масиви от бутони за достъп с един превключвател за различни езици и методи за въвеждане.

Съвместимост между браузъри и съображения за сигурност

1. Поддръжка от браузъри

Понастоящем WebHID API се поддържа в браузъри, базирани на Chromium (Chrome, Edge, Opera) и е в процес на разработка за други браузъри. Преди да внедрите WebHID API във вашето приложение, е важно да проверите съвместимостта на браузърите и да предоставите резервни механизми за браузъри, които не поддържат API-то.

2. Съображения за сигурност

WebHID API е проектиран с мисъл за сигурността. Браузърът иска разрешение от потребителя, преди да позволи на уеб приложение да получи достъп до HID устройство. Това предпазва злонамерени уебсайтове от достъп до чувствителен хардуер без съгласието на потребителя. Освен това, WebHID API работи в рамките на пясъчника за сигурност на браузъра, ограничавайки достъпа на приложението до системни ресурси.

• Само HTTPS: WebHID, подобно на други мощни уеб API-та, изисква сигурен контекст (HTTPS), за да работи.
• Потребителски жестове: Заявката за достъп до устройство обикновено изисква потребителски жест (напр. кликване на бутон), за да се предотвратят непоискани заявки за достъп.
• Permissions API: Permissions API може да се използва за запитване и управление на WebHID разрешения.

Отстраняване на често срещани проблеми

1. Устройството не е намерено

Ако вашето приложение не може да намери HID устройството, проверете отново VID и PID. Уверете се, че те съответстват на действителните идентификатори на устройството. Също така, проверете дали устройството е правилно свързано и разпознато от операционната система.

2. Разрешението е отказано

Ако потребителят откаже разрешение за достъп до HID устройството, вашето приложение няма да може да комуникира с него. Обработете този сценарий елегантно, като покажете съобщение на потребителя и обясните защо е необходим достъп. Обмислете предоставянето на алтернативни начини за взаимодействие на потребителя с вашето приложение.

3. Проблеми с формата на данните

HID устройствата често използват персонализирани формати на данни за изпращане и получаване на данни. Ще трябва да разберете формата на данните на устройството и да внедрите съответната логика за анализ и сериализация във вашето приложение. Консултирайте се с документацията на производителя на устройството за информация относно формата на данните.

Заключение

WebHID API дава възможност на уеб разработчиците да създават иновативни и интерактивни уеб приложения, които комуникират директно с устройства с човешки интерфейс. Като разбирате принципите на изброяване на устройства, филтриране и управление на връзките, можете да отключите пълния потенциал на WebHID API и да създадете завладяващи потребителски изживявания. Прегърнете силата на WebHID, за да свържете уеба с физическия свят, насърчавайки нови възможности за творчество, производителност и достъпност по целия свят.

Допълнителни ресурси

• Спецификация на WebHID API
• WebHID API в Chrome Developers
• USB Implementers Forum (HID информация)