Выберите подходящий 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 NFC читайте и записывайте данные на это устройство, когда оно находится в непосредственной близости от устройства пользователя (обычно 5–10 см (2–4 дюйма). Такие инструменты, как NFC TagInfo от NXP, позволяют просматривать содержимое этого устройства в целях обратного проектирования.
С помощью Web Bluetooth подключитесь к этому устройству через соединение Bluetooth с низким энергопотреблением. С ним должно быть довольно легко общаться, когда он использует стандартизированные службы Bluetooth GATT (например, службу батареи), поскольку их поведение хорошо документировано . Если нет, то на этом этапе вам придется либо найти документацию по аппаратному обеспечению для этого устройства, либо провести его реверс-инжиниринг. Для этого вы можете использовать внешние инструменты, такие как nRF Connect для мобильных устройств, и встроенные инструменты браузера, такие как внутренняя страница
about://bluetooth-internalsв браузерах на базе Chromium. Посмотрите реверс-инжиниринг лампочки Bluetooth от Ури Шакеда. Обратите внимание, что устройства Bluetooth также могут использовать HID или последовательные протоколы.
Если вы подключены, проверьте эти API в следующем порядке:
При использовании WebHID понимание отчетов HID и дескрипторов отчетов через коллекции является ключом к пониманию работы этого устройства. Это может быть затруднительно без документации поставщика для этого устройства. Такие инструменты, как Wireshark, могут помочь вам провести реверс-инжиниринг. Вы также можете использовать веб-приложение HID Explorer для вывода информации об устройствах HID в удобочитаемый формат.
С Web Serial , без документации производителя для этого устройства и того, какие команды поддерживает это устройство, это сложно, но все же возможно, если удачно догадаться. Реверс-инжиниринг этого устройства можно выполнить путем захвата необработанного USB-трафика с помощью таких инструментов, как Wireshark . Вы также можете использовать веб-приложение Serial Terminal , чтобы поэкспериментировать с этим устройством, если оно использует удобочитаемый протокол.
С WebUSB без четкой документации на это устройство и без того, какие USB-команды поддерживает это устройство, это сложно, но все же возможно, если удачно догадаться. Посмотрите фильм «Исследование WebUSB и его захватывающий потенциал» от Сьюз Хинтон. Вы также можете провести реверс-инжиниринг этого устройства, перехватив необработанный USB-трафик и проверив дескрипторы USB с помощью внешних инструментов, таких как Wireshark, и встроенных инструментов браузера, таких как внутренняя страница
about://usb-internalsв браузерах на базе Chromium.
Благодарности
Спасибо Рейли Гранту , Томасу Штайнеру и Кейси Баскес за рецензирование этой статьи.
Фото Дарьи Трифановой на Unsplash .