WebUSB API: интеграция USB-устройств без драйверов

Вы интегрировали дорогой принтер этикеток на склад, но он работает только через нативное приложение под Windows. Каждое обновление — скачивание инсталлятора, каждый новый сотрудник — установка драйверов. Это замедляет процесс развёртывания и увеличивает cost of ownership. Мы решаем эту проблему: подключаем Zebra, Arduino, POS-терминалы и любые USB-устройства напрямую в браузер через WebUSB API. Без драйверов, без дополнительного ПО. Просто открыли Chrome — и устройство готово к работе.

Кейс из практики: для одного логистического центра мы заменили нативное Windows-приложение на веб-интерфейс с WebUSB. Десять принтеров Zebra теперь управляются с любого устройства в локальной сети через браузер. Установка нового рабочего места сократилась с 40 минут до 2 минут. Затраты на сопровождение упали на 70%. Подобный результат мы гарантируем и для вашего оборудования.

Наш опыт: 6+ лет интеграции промышленного оборудования, 30+ успешных проектов с WebUSB. Мы гарантируем совместимость с Chrome 61+. Для начала получите консультацию по вашему устройству — мы оценим возможность подключения за 1 день. Свяжитесь с нами, чтобы обсудить детали.

Какие устройства подходят для WebUSB

WebUSB подходит для устройств, которые не имеют системного драйвера или имеют специальную прошивку. Примеры: принтеры этикеток (Zebra, TSC), Arduino с библиотекой WebUSB, POS-терминалы, сканеры штрих-кодов, светодиодные панели, измерительные приборы. Важное ограничение: устройства HID (клавиатуры, мыши) и mass-storage (флешки) недоступны, так как их драйверы уже заняты ОС.

Почему WebUSB выгоднее нативных решений?

WebUSB даёт выигрыш в скорости развёртывания в 3 раза, а стоимость разработки ниже в 2-3 раза. Экономия на поддержке — до 70%. В отличие от нативных решений, WebUSB не требует установки — достаточно открыть браузер. Это особенно важно для компаний с частой ротацией персонала.

Какие ограничения у WebUSB?

Поддержка: Chrome/Edge 61+ (десктоп и Android). Safari и Firefox — не поддерживают. Только HTTPS. Только user gesture. USB-устройства с активными ядерными USB-драйверами ОС (HID, масс-стораж, принтеры с системными драйверами) — недоступны через WebUSB: браузер не перехватывает их у ОС. Нужен специальный firmware с WebUSB дескрипторами, или устройство без автоматически устанавливаемого драйвера.

Как работает подключение: от запроса до claim?

Техническая реализация

interface USBDeviceInfo { vendorId: number // из документации производителя productId: number } async function requestUSBDevice(filters: USBDeviceInfo[]): Promise<USBDevice> { const device = await navigator.usb.requestDevice({ filters }) return device } async function connectDevice(device: USBDevice): Promise<void> { await device.open() // Если устройство имеет несколько конфигураций — выбираем нужную if (device.configuration === null) { await device.selectConfiguration(1) } // Захватываем интерфейс (нужный номер — из документации или USB descriptor) await device.claimInterface(0) console.log(`Подключено: ${device.manufacturerName} ${device.productName}`) console.log(`USB ${device.usbVersionMajor}.${device.usbVersionMinor}`) } 

Пример: принтер этикеток ZPL (Zebra)

Принтеры Zebra используют ZPL. Команды отправляются как plain text через bulk transfer:

class ZebraPrinter { private device: USBDevice private interfaceNumber = 0 private endpointOut = 1 constructor(device: USBDevice) { this.device = device } async print(zplCommands: string): Promise<void> { const encoder = new TextEncoder() const data = encoder.encode(zplCommands) const result = await this.device.transferOut(this.endpointOut, data) if (result.status !== 'ok') { throw new Error(`Print error: ${result.status}`) } } async printLabel(params: { barcode: string; title: string; price: string; sku: string }): Promise<void> { const zpl = ` ^XA ^CI28 ^FO20,10^A0N,24,24^FD${params.title}^FS ^FO20,40^BY2^BCN,50,Y,N,N^FD${params.barcode}^FS ^FO20,100^A0N,20,20^FDSKU: ${params.sku}^FS ^FO20,125^A0N,28,28^FD${params.price}^FS ^XZ`.trim() await this.print(zpl) } async getStatus(): Promise<string> { await this.print('~HS') const result = await this.device.transferIn(1, 64) const decoder = new TextDecoder() return decoder.decode(result.data!) } } 

Пример: Arduino (двусторонний обмен)

Arduino с кастомной прошивкой через WebUSB библиотеку:

class ArduinoDevice { private device: USBDevice private interfaceNumber = 2 private endpointIn = 5 private endpointOut = 4 private decoder = new TextDecoder() private encoder = new TextEncoder() private readBuffer = '' private isReading = false constructor(device: USBDevice) { this.device = device } async startReading(onData: (line: string) => void) { this.isReading = true while (this.isReading) { try { const result = await this.device.transferIn(this.endpointIn, 64) const chunk = this.decoder.decode(result.data!, { stream: true }) this.readBuffer += chunk const lines = this.readBuffer.split('\n') this.readBuffer = lines.pop()! for (const line of lines) { if (line.trim()) onData(line.trim()) } } catch (err) { if ((err as Error).name === 'NetworkError') break throw err } } } async sendCommand(command: string): Promise<void> { const data = this.encoder.encode(command + '\n') await this.device.transferOut(this.endpointOut, data) } stopReading() { this.isReading = false } } // Использование const arduino = new ArduinoDevice(device) arduino.startReading((line) => { const match = line.match(/TEMP:([\d.]+),HUM:([\d.]+)/) if (match) { setSensorData({ temp: parseFloat(match[1]), humidity: parseFloat(match[2]) }) } }) await arduino.sendCommand('LED:ON') await arduino.sendCommand('SERVO:90') 

React-хук для WebUSB

function useWebUSB() { const [device, setDevice] = useState<USBDevice | null>(null) const [isConnected, setIsConnected] = useState(false) const [isSupported] = useState(() => 'usb' in navigator) useEffect(() => { if (!isSupported) return function onConnect(event: USBConnectionEvent) { console.log('USB подключено:', event.device.productName) } function onDisconnect(event: USBConnectionEvent) { if (event.device === device) { setDevice(null) setIsConnected(false) } } navigator.usb.addEventListener('connect', onConnect) navigator.usb.addEventListener('disconnect', onDisconnect) return () => { navigator.usb.removeEventListener('connect', onConnect) navigator.usb.removeEventListener('disconnect', onDisconnect) } }, [device, isSupported]) async function reconnectPaired() { const devices = await navigator.usb.getDevices() if (devices.length > 0) { const dev = devices[0] await connectDevice(dev) setDevice(dev) setIsConnected(true) } } return { device, isConnected, isSupported, reconnectPaired } } 

Диагностика и реверс-инжиниринг

Как читать USB-дескриптор без документации

function inspectDevice(device: USBDevice) { console.log('Vendor ID:', device.vendorId.toString(16)) console.log('Product ID:', device.productId.toString(16)) device.configuration?.interfaces.forEach((iface) => { console.log(`\nInterface ${iface.interfaceNumber}:`) iface.alternates.forEach((alt) => { alt.endpoints.forEach((ep) => { console.log(` Endpoint ${ep.endpointNumber}: ${ep.direction} ${ep.type}, packet size: ${ep.packetSize}`) }) }) }) } 

Это позволяет найти нужные endpoint-номера без документации.

Типичные проблемы и их решение

Чек-лист диагностики:

1. Проверьте 'usb' in navigator — должно быть true.
2. Убедитесь, что страница открыта по HTTPS (или localhost).
3. Запустите navigator.usb.requestDevice() только после клика пользователя.
4. Если устройство не появляется — откройте DevTools, посмотрите на консоль на ошибки.
5. На Windows попробуйте заменить драйвер устройства на WinUSB через Zadig.

Что входит в интеграцию

• Аналитика: подбор фильтров, изучение протокола, определение endpoint'ов.
• Разработка прототипа: подключение, отправка команд, приём данных, обработка ошибок.
• Тестирование: на целевых ОС (Windows, macOS, Android), проверка отключения и повторного подключения.
• Документация: описание схемы взаимодействия, примеры кода.
• Обучение: инструкция для пользователей, рекомендации по настройке драйверов (WinUSB).

Закажите интеграцию WebUSB под ключ — мы подготовим прототип за 5 дней. Получите консультацию по вашему устройству прямо сейчас.