В этом блоге я расскажу о 4 интересных веб-API, которые я использовал, которые могут помочь вам при создании вашего следующего веб-сайта.
1. MediaStream и MediaRecorder API
MediaStream
и MediaRecorder
API используются для захвата звука или видео с микрофона и камеры устройства из браузера. Для этого существует множество вариантов использования, например:
- Программное обеспечение для создания или редактирования видео и аудио
- Захват звука для обнаружения песни (SoundHound, Shazam)
- Голосовые команды и распознавание
Как это использовать
Объект MediaStream
представляет поток медиа-контента. Медиа-поток с камеры и микрофона устройства можно создать с помощью MediaDevices.getUserMedia()
. MediaRecorder
API берет данные из MediaStream
и предоставляет полученные видео- или аудиоданные для использования.
Ограничения браузера и устройства
Этот API поддерживается в Chrome, Edge, Firefox и Safari, но лучше всего работает в Chrome.
2. Полноэкранный API
Это API, который позволяет вам превратить окно браузера в полноэкранный режим. Это полезно, если вы хотите разрешить своим пользователям:
- Воспроизвести видео в полноэкранном режиме
- Просмотр слайд-шоу или презентации в полноэкранном режиме
Как это использовать
Вы можете использовать методы Element::requestFullscreen
и Document::exitFullscreen
для входа в полноэкранный режим и выхода из него. Пользователи также смогут выйти из полноэкранного режима, нажав клавишуesc
.
По соображениям безопасности полноэкранный API может запускаться только с помощью пользовательского жеста, например click
. Если метод requestFullscreen
вызывается программно, браузер выдаст ошибку и не перейдет в полноэкранный режим.
Ограничения браузера и устройства
Полноэкранный API работает во всех браузерах, но не поддерживается на устройствах iOS.
3. API вибрации
Это API, который запускает аппаратную вибрацию на устройствах, у которых она есть. Это отличный способ добавить физическую обратную связь на ваш сайт, например:
- Оповещения или уведомления в мобильном приложении
- Физическая обратная связь для перетаскивания при поднятии элемента
- Спецэффекты в играх - например, вибрация при выигрыше или проигрыше
Как это использовать
Этот API можно вызвать с помощью метода window.navigator.vibrate
. Ознакомьтесь с приведенным ниже примером, чтобы увидеть, как вы можете запускать одиночные вибрации, множественные вибрации и прекращать текущие вибрации.
Ограничения браузера и устройства
Это работает только на устройствах, поддерживающих вибрацию, обычно на мобильных устройствах. Он полностью поддерживает Chrome, Edge и Firefox.
4. API геолокации
API геолокации - это способ определения местоположения пользователя. Вот несколько примеров, когда это может быть полезно:
- Отображение информации для конкретного местоположения, например погоды или новостей
- Отображение местоположения пользователя на карте (Uber, Waze)
Как это использовать
Этот API можно использовать с конечной точкой navigator.geolocation.getCurrentPosition
. В случае успеха он предоставляет объект GeolocationPosition
, который содержит latitude
, longitude
, altitude
и speed
устройства.
Ограничения браузера и устройства
Этот API поддерживается всеми браузерами и устройствами, но по соображениям безопасности у пользователя запрашивается разрешение сообщить информацию о местоположении, прежде чем ее можно будет использовать.
Ссылки
- Полный список веб-API MDN - https://developer.mozilla.org/en-US/docs/Web/API
- MediaStream API - https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
- Полноэкранный API - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
- API геолокации - https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
Надеюсь, это помогло, спасибо за чтение!