Что такое Web USB от Google: как из микроконтроллера сделать джойстик для онлайн-игры

На YouTube-канале блогера Senior Software Vlogger появилось новое видео. В нем автор канала рассказал про малоизвестный стандарт Web USB — или возможность управлять USB-устройствами прямо из браузера.

Highload публикует основное из этого материала

Что такое Web USB

Web USB — это стандарт, изобретенный Google для подключения USB-устройств к браузеру. Он впервые появился в 2016 году в 61 версии браузера Chrome.

Суть стандарта очень простая: Google решил дать доступ к браузеру всем USB-устройствам, которые подключены к компьютеру. Таким образом, браузер может управлять этими устройствами, а устройства могут передавать данные браузеру.

Доступ ко всем устройствам? Звучит не очень безопасно

Так и есть. Поэтому WebUSB есть только в Google Chrome. Но все не так плохо и некоторые ограничения в виду безопасности все же есть: 

• Web USB работает только со страницами, подключенными по протоколу HTTPS.
• Устройство подключается не к браузеру, а к конкретной странице.
• Чтобы подключиться к устройству, нужно выполнить интерактивное действие: нажать на кнопку или тапнуть по экрану, а затем выбрать нужное устройство. То есть просто кодом вызвать подключение не получится.

В само устройство тоже можно вшить адрес веб-страницы. Если это сделать, то, как только вы подключите устройство к компьютеру, браузер вам подскажет, на какой URL перейти. При первом переходе на этот сайт тоже будет кнопка «Подключиться», но при последующих подключение будет осуществляться автоматически.

Тем не менее, если вы перейдете на chrome://device-log, то там увидите список всех USB-устройств, подключенных к компьютеру. То есть Google автоматически читает их, вне зависимости от того, подключали ли вы их к конкретной странице.

Важно! Если браузер не запущен — Google ни о чем не знает.

Как это работает

Google взял уже существующий USB-стандарт и реализовал этот стек в браузере. То есть, если вы программировали USB-устройства на низком уровне, для вас не будет ничего нового. Там будет:

• Device Descriptor. Для выбора устройства.
• Configuration Descriptor. Для выбора конфигурации.
• Interface Descriptor. Для выбора интерфейса. Допустим, если у вас есть принтер и сканер в одном устройстве, и вы можете выбрать интерфейс либо принтера, либо сканера.
• Endpoint Descriptor. То есть конечный пункт информации, с которой вы читаете данные либо в которую пишете данные.

Зачем это вообще нужно

Возможно, вы когда-нибудь видели медицинское оборудование, которое подключено к компьютеру под управлением древней Windows без возможностей ее обновить. Просто потому, что ПО для этого железа не заведется на современной Windows. Web USB мог бы решить эту проблему: агрегат просто подключался бы к ноутбуку через USB.

Другой пример: любое устройство, которое требует настройки до начала использования. Обычно нужен какой-то маленький экранчик, кнопки или даже опознавательные знаки аля «если пищит три раза — то устройство в таком-то режиме». Как было бы здорово, если бы такое устройство можно было бы просто подключить к браузеру и настроить через сайт производителя все, что пожелаешь. А с Web USB это возможно.

Как программисту работать с Web USB

Вам понадобится USB-устройство, контроллер которого имеет полное управление над портом USB. Например, подойдут микроконтроллеры Arduino. Иначе — нужно будет самостоятельно прописывать драйвер.

Для Arduino есть уже готовая высокоуровневая надстройка в репозитории на GitHub. Она выполняет две функции:

1. Распознает девайс как Web USB
2. Реализует протокол Web USB и позволяет «общаться» с устройством

Также она включает JavaScript-библиотеку, в которой прописан бесконечный цикл. Он постоянно читает обновления из USB-порта и уведомляет о новых подключенных устройствах.

Демо использования Web USB

#1 Мигающие светодиоды

На этой демке проще всего показать, как из браузера управлять железом. Более того: мы не только управляем этим светодиодом, но прописываем в коде, чтобы предыдущее состояние светодиода сохранилось. Соответственно, когда мы его подключаем, он светится тем цветом, которым он светился в последний раз.

#2 Виртуальное пианино

Страничка в браузере считывает код нажатой клавиши, трансформирует его в частоту ноты, эту частоту передает по проводу на Arduino, а Arduino уже его воспроизводит.

#3 Контроллер-джойстик

За основу была взята игра-файтинг, которая работает на JavaScript в браузере, и был немного изменен ее код. А из контроллера получился «джойстик», которым можно управлять бойцом.