Доступ к аппаратным устройствам в интернете

Выберите подходящий API для связи с аппаратным устройством.

François Beaufort

Цель этого руководства – помочь вам выбрать лучший API для связи с аппаратным устройством (например, веб-камерой, микрофоном и т. д.) в интернете. Под "лучшим" я имею в виду, что он дает вам все, что вам нужно, с наименьшим объемом работы. Другими словами, вы знаете, какую задачу хотите решить (например, получить доступ к видео), но не знаете, какой API использовать, или хотите узнать, есть ли другой способ.

Одна из проблем, с которой часто сталкиваются веб-разработчики, – это переход к API низкого уровня без изучения API более высокого уровня, которые проще реализовать и которые обеспечивают лучший UX. Поэтому в этом руководстве сначала рекомендуются API более высокого уровня, но также упоминаются API более низкого уровня на случай, если вы определили, что API более высокого уровня не соответствует вашим потребностям.

🕹 Получать события ввода с этого устройства

Попробуйте отслеживать события клавиатуры и указателя. Если устройство является игровым контроллером, используйте Gamepad API, чтобы узнать, какие кнопки нажимаются и какие оси перемещаются.

Если ни один из этих вариантов вам не подходит, можно использовать низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

📸 Доступ к аудио и видео с этого устройства.

Используйте MediaDevices.getUserMedia(), чтобы получать аудио- и видеопотоки с этого устройства. Подробнее о записи аудио и видео… Вы также можете управлять панорамированием, наклоном и масштабированием камеры, а также другими ее настройками, такими как яркость и контрастность, и даже делать фотографии. Web Audio позволяет добавлять эффекты к аудио, создавать визуализации и применять пространственные эффекты (например, панорамирование). Также узнайте, как профилировать производительность приложений Web Audio в Chrome.

Если ни один из этих вариантов вам не подходит, можно использовать низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

🖨 Печать на этом устройстве

Используйте window.print(), чтобы открыть диалоговое окно браузера, в котором пользователь может выбрать это устройство в качестве места назначения для печати текущего документа.

Если это не работает, решением может быть низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

🔐 Выполните аутентификацию на этом устройстве

Используйте WebAuthn, чтобы создать надежные, подтвержденные и ограниченные источником учетные данные открытого ключа с помощью этого аппаратного устройства безопасности для аутентификации пользователей. Он поддерживает использование аутентификаторов U2F или FIDO2, работающих через Bluetooth, NFC и USB (также известных как электронные ключи), а также аутентификатора платформы, который позволяет пользователям проходить аутентификацию с помощью отпечатков пальцев или блокировки экрана. Ознакомьтесь с руководством Как создать первое приложение WebAuthn.

Если это устройство другого типа (например, криптовалютный кошелек), решением может быть низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

🗄 Доступ к файлам на этом устройстве

Используйте File System Access API, чтобы читать и сохранять изменения непосредственно в файлах и папках на устройстве пользователя. Если он недоступен, используйте File API, чтобы попросить пользователя выбрать локальные файлы в диалоговом окне браузера, а затем прочитать их содержимое.

Если ни один из этих вариантов вам не подходит, можно использовать низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

🧲 Доступ к датчикам на этом устройстве

Используйте Generic Sensor API, чтобы считывать необработанные значения с датчиков движения (например, акселерометра или гироскопа) и датчиков окружающей среды (например, датчика освещенности или магнитометра). Если он недоступен, используйте события DeviceMotion и DeviceOrientation, чтобы получить доступ к встроенному акселерометру, гироскопу и компасу на мобильных устройствах.

Если он вам не подходит, попробуйте низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

🛰️ Доступ к GPS-координатам на этом устройстве.

Используйте Geolocation API, чтобы получить широту и долготу текущего местоположения пользователя на этом устройстве.

Если он вам не подходит, попробуйте низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

🔋 Проверьте заряд батареи на этом устройстве

Используйте Battery API, чтобы получать информацию об уровне заряда батареи и уведомления об изменении уровня заряда или статуса зарядки.

Если он вам не подходит, попробуйте низкоуровневый API. Чтобы начать, прочитайте статью Как общаться с устройством.

📞 Обмениваться данными с этим устройством по сети.

В локальной сети используйте Remote Playback API для трансляции аудио и/или видео на удаленное устройство воспроизведения (например, Smart TV или беспроводную колонку) или Presentation API для отображения веб-страницы на втором экране (например, дополнительном дисплее, подключенном с помощью кабеля HDMI, или Smart TV, подключенном по беспроводной сети).

Если устройство предоставляет веб-сервер, используйте Fetch API и/или WebSockets, чтобы получить данные с устройства, обратившись к соответствующим конечным точкам. Хотя сокеты TCP и UDP недоступны в интернете, ознакомьтесь с WebTransport для обработки интерактивных, двунаправленных и мультиплексированных сетевых подключений. Обратите внимание, что WebRTC также можно использовать для передачи данных в реальном времени в другие браузеры по одноранговому протоколу.

🧱 Узнайте, как взаимодействовать с устройством

Выбор низкоуровневого API зависит от типа физического подключения к устройству. Если устройство беспроводное, используйте Web NFC для беспроводных подключений на очень коротких расстояниях, а Web Bluetooth или Web Serial – для беспроводных устройств поблизости.

• Web NFC позволяет считывать и записывать данные на устройство, когда оно находится в непосредственной близости от устройства пользователя (обычно 5–10 см). Такие инструменты, как NFC TagInfo от NXP, позволяют просматривать контент на устройстве для обратного проектирования.

• Подключитесь к этому устройству по Bluetooth с низким энергопотреблением, используя Web Bluetooth. Если устройство использует стандартные сервисы Bluetooth GATT (например, сервис батареи), то взаимодействовать с ним будет довольно просто, поскольку их поведение хорошо задокументировано. Если нет, то вам придется либо найти документацию по оборудованию для этого устройства, либо провести его обратное проектирование. Для этого можно использовать внешние инструменты, такие как nRF Connect for Mobile, и встроенные инструменты браузера, например внутреннюю страницу about://bluetooth-internals в браузерах на основе Chromium. Посмотрите видео Reverse-Engineering a Bluetooth Lightbulb (Обратное проектирование лампочки с Bluetooth) от Ури Шакеда (Uri Shaked). Обратите внимание, что устройства Bluetooth также могут использовать протоколы HID или последовательного порта.

• Последовательный порт через Bluetooth. Обмен данными с сервисами RFCOMM на подключенных устройствах Bluetooth Classic, например стандартизированный профиль последовательного порта (SPP). Однако для пользовательских сервисов на основе RFCOMM вам потребуется обратиться к документации поставщика устройства, чтобы узнать UUID сервиса, который нужно передать в requestPort().

Если вы используете проводное подключение, проверьте следующие API в указанном порядке:

1. Чтобы понять, как работает устройство, нужно разобраться, как WebHID интерпретирует отчеты HID и дескрипторы отчетов с помощью коллекций. Это может быть сложно без документации поставщика для этого устройства. Для этого можно использовать такие инструменты, как Wireshark. Вы также можете использовать веб-приложение HID Explorer, чтобы создать дамп информации об устройствах HID в человекочитаемом формате.

2. С Web Serial API, даже если у вас нет документации от производителя и вы не знаете, какие команды поддерживает устройство, вы все равно можете попробовать угадать их. Обратное проектирование этого устройства можно выполнить, перехватив необработанный USB-трафик с помощью таких инструментов, как Wireshark. Вы также можете использовать веб-приложение Serial Terminal, чтобы поэкспериментировать с этим устройством, если оно использует человекочитаемый протокол.

3. При использовании WebUSB без четкой документации для устройства и без понимания того, какие USB-команды оно поддерживает, это сложно, но возможно, если вам повезет. Посмотрите видео Exploring WebUSB and its exciting potential (Изучение WebUSB и его захватывающего потенциала) от Сьюз Хинтон (Suz Hinton). Вы также можете выполнить обратное проектирование этого устройства, захватив необработанный USB-трафик и проверив дескрипторы USB с помощью внешних инструментов, таких как Wireshark, и встроенных инструментов браузера, таких как внутренняя страница about://usb-internals в браузерах на основе Chromium.

Благодарности

Благодарим Райли Гранта (Reilly Grant), Томаса Штайнера (Thomas Steiner) и Кейси Баскес (Kayce Basques) за проверку этой статьи.