Выберите подходящий API для связи с выбранным вами аппаратным устройством.
Цель этого руководства — помочь вам выбрать лучший API для связи с аппаратным устройством (например, веб-камерой, микрофоном и т. д.) в Интернете. Под «лучшим» я подразумеваю, что он дает вам все необходимое при минимальном объеме работы. Другими словами, вы знаете общий вариант использования, который хотите решить (например, доступ к видео), но не знаете, какой API использовать, или задаетесь вопросом, есть ли другой способ добиться этого.
Одна из проблем, с которой я обычно сталкиваюсь у веб-разработчиков, — это переход к низкоуровневым API без изучения API более высокого уровня, которые легче реализовать и которые обеспечивают лучший UX. Поэтому в начале данного руководства сначала рекомендуются API более высокого уровня, а также упоминаются API более низкого уровня, если вы определили, что API более высокого уровня не соответствует вашим потребностям.
🕹 Получать события ввода с этого устройства
Попробуйте прослушать события клавиатуры и указателя . Если это устройство является игровым контроллером, используйте API геймпада, чтобы узнать, какие кнопки нажимаются и какие оси перемещаются.
Если ни один из этих вариантов вам не подходит, решением может стать низкоуровневый API. Ознакомьтесь с разделом Узнайте, как связаться с вашим устройством , чтобы начать путешествие.
📸 Доступ к аудио и видео с этого устройства
Используйте MediaDevices.getUserMedia() , чтобы получать прямые аудио- и видеопотоки с этого устройства и узнавать о захвате аудио и видео . Вы также можете управлять панорамированием, наклоном и масштабированием камеры , а также другими настройками камеры, такими как яркость и контрастность , и даже делать фотографии . Веб-аудио можно использовать для добавления эффектов к аудио, создания аудиовизуализации или применения пространственных эффектов (например, панорамирования). Узнайте также , как профилировать производительность приложений веб-аудио в Chrome.
Если ни один из этих вариантов вам не подходит, решением может стать низкоуровневый API. Ознакомьтесь с разделом Узнайте, как связаться с вашим устройством , чтобы начать путешествие.
🖨 Распечатайте на это устройство
Используйте window.print(), чтобы открыть диалоговое окно браузера, которое позволяет пользователю выбрать это устройство в качестве места назначения для печати текущего документа.
Если это не работает для вас, решением может быть низкоуровневый API. Ознакомьтесь с разделом Узнайте, как связаться с вашим устройством , чтобы начать путешествие.
🔐 Авторизуйтесь с помощью этого устройства
Используйте WebAuthn для создания надежных, проверенных учетных данных с открытым ключом на уровне источника с помощью этого аппаратного устройства безопасности для аутентификации пользователей. Он поддерживает использование Bluetooth, NFC и USB-роуминга аутентификаторов U2F или FIDO2, также известных как ключи безопасности, а также аутентификатор платформы, который позволяет пользователям аутентифицироваться с помощью отпечатков пальцев или блокировки экрана. Ознакомьтесь со статьей «Создайте свое первое приложение WebAuthn» .
Если это устройство представляет собой другой тип аппаратного устройства безопасности (например, криптовалютный кошелек), решением может быть низкоуровневый API. Ознакомьтесь с разделом Узнайте, как связаться с вашим устройством , чтобы начать путешествие.
🗄 Доступ к файлам на этом устройстве
Используйте API доступа к файловой системе для чтения и сохранения изменений непосредственно в файлах и папках на устройстве пользователя. Если он недоступен, используйте File API , чтобы попросить пользователя выбрать локальные файлы в диалоговом окне браузера, а затем прочитать содержимое этих файлов.
Если ни один из этих вариантов вам не подходит, решением может стать низкоуровневый API. Ознакомьтесь с информацией о том, как связаться с вашим устройством , чтобы начать путешествие.
🧲 Датчики доступа на этом устройстве
Используйте API-интерфейс Generic Sensor для считывания необработанных значений датчиков с датчиков движения (например, акселерометра или гироскопа) и датчиков окружающей среды (например, окружающего освещения, магнитометра). Если он недоступен, используйте события DeviceMotion и DeviceOrientation, чтобы получить доступ к встроенным акселерометру, гироскопу и компасу в мобильных устройствах.
Если вам это не подходит, решением может стать низкоуровневый API. Ознакомьтесь с информацией о том, как связаться с вашим устройством , чтобы начать путешествие.
🛰 Получите доступ к координатам GPS на этом устройстве.
Используйте API геолокации , чтобы получить широту и долготу текущего положения пользователя на этом устройстве.
Если вам это не подходит, решением может стать низкоуровневый API. Ознакомьтесь с разделом Узнайте, как связаться с вашим устройством , чтобы начать путешествие.
🔋 Проверьте аккумулятор на этом устройстве
Используйте API батареи , чтобы получать информацию хоста об уровне заряда батареи и получать уведомления при изменении уровня заряда батареи или состояния зарядки.
Если вам это не подходит, решением может стать низкоуровневый API. Ознакомьтесь с информацией о том, как связаться с вашим устройством , чтобы начать путешествие.
📞 Общайтесь с этим устройством по сети
В локальной сети используйте API удаленного воспроизведения для трансляции аудио и/или видео на удаленное устройство воспроизведения (например, Smart TV или беспроводной динамик) или используйте API презентации для отображения веб-страницы на втором экране (например, дополнительном дисплей, подключенный с помощью кабеля HDMI, или смарт-телевизор, подключенный по беспроводной сети).
Если это устройство предоставляет веб-сервер, используйте Fetch API и/или WebSockets для получения некоторых данных с этого устройства, обращаясь к соответствующим конечным точкам. Хотя сокеты TCP и UDP недоступны в Интернете, воспользуйтесь WebTransport для обработки интерактивных, двунаправленных и мультиплексированных сетевых подключений. Обратите внимание, что WebRTC также можно использовать для передачи данных в режиме реального времени с другими браузерами с использованием однорангового протокола.
🧱 Узнайте, как общаться с вашим устройством
Решение о том, какой низкоуровневый API вам следует использовать, определяется характером вашего физического подключения к устройству. Если он беспроводной, проверьте Web NFC для беспроводных подключений на очень близком расстоянии и Web Bluetooth или Web Serial для близлежащих беспроводных устройств.
С помощью Web NFC читайте и записывайте данные на это устройство, когда оно находится в непосредственной близости от устройства пользователя (обычно 5–10 см (2–4 дюйма). Такие инструменты, как NFC TagInfo от NXP, позволяют просматривать содержимое этого устройства в целях обратного проектирования.
С помощью Web Bluetooth подключитесь к этому устройству через соединение Bluetooth с низким энергопотреблением. С ним должно быть довольно легко общаться, когда он использует стандартизированные службы Bluetooth GATT (например, службу батареи), поскольку их поведение хорошо документировано . Если нет, то на этом этапе вам придется либо найти документацию по аппаратному обеспечению для этого устройства, либо провести его реверс-инжиниринг. Для этого вы можете использовать внешние инструменты, такие как nRF Connect для мобильных устройств , и встроенные инструменты браузера, такие как внутренняя страница
about://bluetooth-internals
в браузерах на базе Chromium. Посмотрите реверс-инжиниринг лампочки Bluetooth от Ури Шакеда. Обратите внимание, что устройства Bluetooth также могут использовать HID или последовательные протоколы.Благодаря последовательному интерфейсу через Bluetooth можно обмениваться данными со службами RFCOMM на сопряженных устройствах Bluetooth Classic, таких как стандартизированный профиль последовательного порта (SPP). Однако для пользовательских служб на основе RFCOMM вам необходимо обратиться к документации поставщика устройства, чтобы узнать UUID службы, который можно передать в
requestPort()
.
Если вы подключены, проверьте эти API в следующем порядке:
При использовании WebHID понимание отчетов HID и дескрипторов отчетов через коллекции является ключом к пониманию работы этого устройства. Это может быть затруднительно без документации поставщика для этого устройства. Такие инструменты, как Wireshark, могут помочь вам провести реверс-инжиниринг. Вы также можете использовать веб-приложение HID Explorer для вывода информации об устройствах HID в удобочитаемый формат.
С Web Serial , без документации производителя для этого устройства и того, какие команды поддерживает это устройство, это сложно, но все же возможно, если удачно догадаться. Реверс-инжиниринг этого устройства можно выполнить путем захвата необработанного USB-трафика с помощью таких инструментов, как Wireshark . Вы также можете использовать веб-приложение Serial Terminal, чтобы поэкспериментировать с этим устройством, если оно использует удобочитаемый протокол.
С WebUSB без четкой документации на это устройство и без того, какие USB-команды поддерживает это устройство, это сложно, но все же возможно, если удачно догадаться. Посмотрите «Исследование WebUSB и его захватывающий потенциал» от Сьюз Хинтон. Вы также можете выполнить реверс-инжиниринг этого устройства, перехватив необработанный USB-трафик и проверив дескрипторы USB с помощью внешних инструментов, таких как Wireshark, и встроенных инструментов браузера, таких как внутренняя страница
about://usb-internals
в браузерах на основе Chromium.
Благодарности
Спасибо Рейли Гранту , Томасу Штайнеру и Кейси Баскес за рецензирование этой статьи.
Фото Дарьи Трифановой на Unsplash .