В этом блоге я расскажу о 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 поддерживается всеми браузерами и устройствами, но по соображениям безопасности у пользователя запрашивается разрешение сообщить информацию о местоположении, прежде чем ее можно будет использовать.

Ссылки

Надеюсь, это помогло, спасибо за чтение!