10 меньших известных веб-API, которые вы можете использовать

API Это аббревиатура для интерфейса программирования приложений, который определяет взаимодействия между несколькими слоями архитектуры программного обеспечения. Программисты проводят сложные задачи легко с помощью API в разработке программного обеспечения. Без API, жизнь программиста была бы несчастна без подходящего (например, безопасность) доступа к данным, зная ненужные детали низкого уровня и т. Д.

Когда дело доходит до веб-сигналов, существуют чрезвычайно полезные объекты, свойства и функции, доступные для выполнения задач в качестве незначительных, как доступ к доступу до доступа до COM для управления аудизацией, видео, графики и т. Д.

Если вы на фоне веб-разработки, вы уже используете многие из них. Вот список очень известных веб-API.

• Холст
• Принести
• История
• Геолокация
• Домос
• Приставка
• Перетаскивание API

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

Если вы хотите перейти в исходный код или немедленно увидеть демонстрацию, вот быстрые ссылки на них:

• Ссылка на исходный код @Github
• Ссылка на веб-API Demolab
• Вы можете следовать за мной в Twitter @tapasadhikary для обсуждений и обновлений.

Примечание. Web API – это не что иное, как интерфейсы, функции, объекты, свойства, написанные и выставлены с использованием ванильного JavaScript. Однако использование Web API не ограничивается только приложением на основе JavaScript Vanilla. Он очень прост, чтобы использовать их с угловым, реагировать или основными приложениями.

Все примеры, которые я использовал для демонстрации веб-API в этой статье, написан с использованием REVENTJS. Вы можете найти их в ссылке GitHub, упомянутой выше. Пожалуйста, не стесняйтесь вилкой, изменить и использовать!

Большая (боль) точка об использовании веб-API, большинство из них еще не стандартизированы. Это означает, что поддержка веб-API может отличаться от одного поставщика браузера к другому. Например, вы можете найти API, работающую с помощью браузера Chrome, но, не поддерживаемой Firefox или Reake Browsers еще.

Я бы предложил пару способов иметь чек на это,

• Проверьте поддержку веб-API из Могу ли я использовать Веб-сайт, просто набрав имя этого.
• Реализуйте неудачу или обратную связь, если определенная веб-API не поддерживается. Большинство веб-API обеспечивают способ проверки, поддерживается ли API. Вы можете выбрать реализовать отступление, когда он не поддерживается или, по крайней мере, сообщите пользователям, доказывая сообщение о обратной связи.

Хорошо, время начать знать их. Надеюсь, вы также найдете это полезные.

1. 📺. Полноэкранный API

У вас есть необходимость показывать любой из элементов DOM в полноэкранном режиме? Полноэкранный корпус очень требовательный для игровых приложений, онлайн видеоплатформы (например, YouTube) и т. Д.

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

В приведенном ниже примере, мой любимый Санта-Клаус может попасть в полноэкранный режим и с легкостью выходить из него.

В коде ниже, Управление экраном () Функция использует Запрос эффективный экран () API на элементе, который имеет идентификатор, называемый, fs_id Отказ

const manageFullscreen = () => {
   document.getElementById('fs_id').requestFullscreen();
}

Этот элемент с ID, fs_id это Div С дочерним элементом, I.E, образ Santa Clause.

  

    
   

    
            Enter Fullscreen with Santa
    
 

Вы можете проверить, если Полноэкранный API поддерживается браузером,

if (document.fullscreenEnabled) {
   setSupported(true);
} else {
   setSupported(false);
}

Также следите за полезными поедателями, как,

• Onfullscreenchange : Обработчик событий для полноценного события.
• OnfullscreenError : Обработчик событий для полноэкранного события.

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-apis-fullscreen/

2. 📋 Буфер обмена ASYNC API

Что такое буфер обмена в сборе?

Буфер обмена является буфером, который некоторые операционные системы обеспечивают краткосрочное хранение и передачу внутри и между программами приложений.

В основном есть три операции, которые вы можете выполнить с буфером обмена. Они, Скопировать С вырезать и паста Отказ API буфера обмена предоставляет возможность реагировать на эти три операции.

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

Вот простой пример операции копирования-вставки,

Вот как проверить, поддерживается ли функция браузера,

if (navigator.clipboard 
     && navigator.clipboard.read 
     && navigator.clipboard.write) {
   setSupported(true);
} else {
   setSupported(false);
}

Вот функция ASYNC API для написания контента в буфер обмена,

async function performCopy(event) {
   event.preventDefault();
   try {
      await navigator.clipboard.writeText(copyText);
      console.log(`${copyText} copied to clipboard`);
   } catch (err) {
      console.error('Failed to copy: ', err);
   }
}

Функция ASYNC API для прочитанного контента из буфера обмена и сделать что-то с ним,

async function performPaste(event) {
   event.preventDefault();
   try {
       const text = await navigator.clipboard.readText();
       setPastetext(text);
       console.log('Pasted content: ', text);
   } catch (err) {
      console.error('Failed to read clipboard contents: ', err);
   }
}

Примечание: с включением Буфер обмена Async API Вы можете избавиться от использования Document.execcommad () Функция, как это устарело сейчас.

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-apis-clipboard-apis/

3. 🧐 Размерить размер API наблюдателя

Хотите ли вы предпринять некоторые действия, основанные на изменениях в контент или пограничную коробку элемента DOM? Вы думаете о написании обработчика самостоятельно? Что, если я вам скажу, уже есть один, предоставляемый веб-API веб-API?

Вот история о тупой кнопке. Мы используем ползунок диапазона, чтобы изменить размер кнопки. Хотя кнопка изменяется изменяется, мы также хотим контролировать цвет текста, не позволяя кнопке знать много об этом.

Во-первых, создайте кнопку и укажите идентификатор, чтобы мы могли получить доступ к кнопке позже, используя идентификатор.

   I am a Dumb Button

Теперь мы создаем слайдер, используя Диапазон Входной тип из HTML5. А изменить размер () Функция вызывается при изменении значения ползунка.

    resize(event)} 
         type="range" 
         min={minRange} 
         max={maxRange} 
         defaultValue={rangeValue} />

изменить размер () Функция просто устанавливает ширину кнопки в качестве значения диапазона ползунка, чтобы он мог динамически изменяться.

const resize = event => {
   const value = event.target.valueAsNumber;
   setRangeValue(value);
   let dumbBtn = document.getElementById('dumbBtnId');
   dumbBtn.style.width = `${value}px`;
 }

Все идет нормально? Теперь для каждого изменения значения диапазона изменяется, кнопка изменяется. У нас есть Resizobserver Наблюдение за этим изменением и измените цвет текста кнопки.

useEffect(() => {
   try {
            let dumbBtn = document.getElementById('dumbBtnId');
            var resizeObserver = new ResizeObserver(entries => {
                for(const entry of entries) {
                    // Get the button element and color it
                    // based on the range values like this,
                   entry.target.style.color = 'green`;
                }
      });
      resizeObserver.observe(dumbBtn);
   } catch(e) {
            setSupported(false);
            console.log(e);      
   }
}, [rangeValue]);

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-api-resize-observer/

4. 📷 API захвата изображения

Есть несколько прохладных и полезных API вокруг пользовательских носителей, таких как, аудио, видео и т. Д. Я люблю Захват изображения API Что помогает нам захватить изображение или захватить раму из видеоустройств (например, веб-камеру). Не только то, что вы также можете выполнить действия по захвату изображения или захватить кадр.

Сначала получите доступ к Media Access. В этом случае мы получаем доступ веб-камеры.

navigator.mediaDevices.getUserMedia({video: true})
  .then(mediaStream => {
     document.querySelector('video').srcObject = mediaStream;
     const track = mediaStream.getVideoTracks()[0];
     setTrack(track);
  }).catch(error => {
     console.error(` ${error} is not yet supported`);
     setError(error);
});

Также как операция вставки в буфер обмена, разрешение доступа к среде веб-камеры должно быть предоставлено пользователем.

Теперь возьмите кадр и сделайте что-нибудь. В этом примере я просто рисую рамку на холсте.

const imageCapture = new ImageCapture(track);
    imageCapture.grabFrame()
      .then(imageBitmap => {
          const canvas = document.querySelector('#grabFrameCanvas');
          drawCanvas(canvas, imageBitmap);
    }).catch(error => {
          console.log(error);
          setError(error);
});

Я также могу сфотографировать и сделать подобную вещь.

const imageCapture = new ImageCapture(track);
    imageCapture.takePhoto().then(blob => createImageBitmap(blob))
      .then(imageBitmap => {
          const canvas = document.querySelector('#takePhotoCanvas');
          drawCanvas(canvas, imageBitmap);
    }).catch(error => {
          console.log(error);
          setError(error);
});

Чтобы остановить потоковую видео с веб-камеры, просто позвоните ему методом Стоп () на бегущей видео треке.

const videoOff = () => {
   track.stop();
 }

Также следите за методами,

• GetPhotocapBivilities () : Чтобы получить диапазоны доступных вариантов конфигурации.
• GetPhotosettings () : Чтобы получить текущую настройку конфигурации фотографий.

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-apis-image-capture/

5. 📡 API канала вещания

Вещательный канал API Позволяет общаться между контекстами просмотра (Windows, Tabs, iFRames) и работниками на То же самое происхождение Отказ Подумайте об использовании использования, как после выхода из приложения, работающего на вкладке браузера, вы хотите транслировать его в экземпляры приложений, открытых на других вкладках одного и того же браузера.

Вот пример, где отправитель отправляет сообщение для ресивера, и то же самое широко связано на его контекст просмотра (это вкладка в этом случае),

Первый шаг – создать широковещательный канал, предоставив ему уникальное имя. Также определите содержимое (сообщение) Вы хотите транслировать.

 const CHANNEL_NAME = "greenroots_channel";
 const bc = new BroadcastChannel(CHANNEL_NAME);
 const message = 'I am wonderful!';

Транслировать сообщение, позвоните по методу PostMessage () на канале, передавая сообщение.

const sendMessage = () => {
   bc.postMessage(message);
}

На приемном конце кто бы ни слушал трансляцию, будет уведомлен с отправленным сообщением.

 const CHANNEL_NAME = "greenroots_channel";
 const bc = new BroadcastChannel(CHANNEL_NAME);

 bc.addEventListener('message', function(event) {
    console.log(`Received message, "${event.data}", on the channel, "${CHANNEL_NAME}"`);
    const output = document.getElementById('msg');
    output.innerText = event.data;
 });

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-apis-broadcast/

6. ⏱️ интерфейс производительности API

Производительность Интерфейс обеспечивает доступ к трем основным API, I.E,

• Навигация
• Память
• Время

Вот пример использования памяти,

console.log(performance.memory);

Вот еще один пример того, как получить несколько статистик производительности навигации,

const [entry] = performance.getEntriesByType("navigation");
console.table(entry)

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-api-performance/

7. 🔋 API API

Хотите узнать все о батарее вашего ноутбука, ПК или, устройств? Да, также есть веб-API для этого, Состояние батареи API Отказ Эта API помогает узнать всю информацию, батарею заряжается или нет, насколько зарядки остаются, а также обработчики, чтобы обрабатывать изменения, связанные с зарядом состояния.

Вот пример показывает состояние изменений, когда я подключаю и выходите зарядное устройство моего ноутбука,

Ниже приведен код объяснения, как иметь дело с ручками и работать с информацией, связанной с батареей.

navigator.getBattery().then(function (battery) {

   // handle the charging change event
   battery.addEventListener("chargingchange", function () {
      console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
   });

   // handle charge level change
   battery.addEventListener("levelchange", function () {
      console.log("Battery level: " + battery.level * 100 + "%");
   });

   // handle charging time change
   battery.addEventListener("chargingtimechange", function () {
      console.log( "Battery charging time: " + battery.chargingTime + " seconds");
   });

   // handle discharging time change
   battery.addEventListener("dischargingtimechange", function () {
      console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
   });

});

Мне нравится этот API И это весело, используя его. Что не смешно, это API может устареть в будущие дни.

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-apis-battery/

8. 📶 Сетевая информация API

Сетевая информация API Предоставляет информацию о типах сети (например. , «WiFi», «Cellular» и т. Д.), Сохраните режим данных, пропускной способности и многое другое.

console.log(navigator.connection);

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-api-network-info/

9. 📳 Вибрация API

Это еще один пример, где вы можете подключиться к системной аппаратному обеспечению и выполнять операции. Вибрация API Предоставляет способы начать вибрацию устройства (мгновенно или, на время) и остановить его.

useEffect(() => {
   if (start) {
      // vibrate for 2 seconds
      navigator.vibrate(2000);
   } else {
      // stop vibration
      navigator.vibrate(0);
   }
}, [start]);

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-apis-vibration/

10. 🤙 Bluetooth API

Эта веб-API позволяет подключаться к устройствам Bluetooth.

navigator.bluetooth.requestDevice({
   acceptAllDevices: true
}).then(device => {            
   setDeviceName(device.name);
   setDeviceId(device.id)
   setDeviceConnected(device.connected);
}).catch(err => {
   console.log(err);
   setError(true);
})

Прямая ссылка на демонстрацию: https://demo.greenroots.info/web-apis/web-apis-bluetooth/

• Запрос на оплату API : Предоставляет постоянный пользовательский опыт для продавцов, так и для платежей.
• Сенсорные события : Предоставляет относительно низкоуровневые API, которые могут быть использованы для поддержки взаимодействия с утечностью для приложений, таких как жест двух пальца.
• Видимость страницы : Предоставляет события, которые вы можете посмотреть, чтобы узнать, когда документ становится видимым или скрытым
• Обмен сообщениями канала API : Еще один великий способ отправки сообщений в контексте просмотра. Тем не менее, в отличие от вещания, здесь оно должно отправить 1-к-1 сообщения.

Я буду добавлять примеры для каждого из них к Web API Demolab рано.

• Web API от MDN веб-документы

• Вы можете подписаться на мои будущие статьи из https://blog.greenroots.info/
• Следуй за мной в Twitter @tapasadhikary Для обновлений и технических обсуждений.

Оригинал: “https://dev.to/atapas/10-lesser-known-web-apis-you-may-want-to-use-5g0g”