7 APIs da Web JavaScript para criar sites futuristas que você não conhecia🤯

Com as tecnologias em rápida mudança, os desenvolvedores estão recebendo novas ferramentas e APIs incríveis. Mas foi visto que, das mais de 100 APIs, apenas 5% delas são usadas ativamente pelos desenvolvedores.

Vamos dar uma olhada em algumas das APIs da Web úteis que podem ajudá-lo a disparar seu site para a lua! 🌕🚀

1. API de captura de tela
   A API de captura de tela, como o nome sugere, permite capturar o conteúdo de uma tela, tornando o processo de construção de um gravador de tela um pedaço de bolo.

Você precisa de um elemento de vídeo para exibir a tela capturada. O botão Iniciar iniciará a captura de tela.

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}

startBtn.addEventListener("click", startRecording);

2. API de compartilhamento da Web
   A API de compartilhamento da Web permite que você compartilhe texto, links e até arquivos de uma página da Web com outros aplicativos instalados no dispositivo.

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

NOTA: Para usar a API de Compartilhamento da Web, você precisa de uma interação do usuário. Por exemplo, um clique de botão ou um evento de toque.

3. API do Observador de Interseção
   A API do Observador de Interseção permite detectar quando um elemento entra ou sai do visor. Isso é excepcionalmente útil para implementar rolagem infinita.

NOTA: A demonstração usa o React por causa da minha preferência pessoal, mas você pode usar qualquer framework ou JavaScript baunilha.

4. API da área de transferência
   A API da Área de Transferência permite que você leia e grave dados na área de transferência. Isso é útil para implementar a funcionalidade de cópia para a área de transferência.

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5. API de bloqueio de despertar de tela
   Já se perguntou como o YouTube impede que a tela seja desligada durante a reprodução do vídeo? Bem, isso é por causa da API Screen Wake Lock.

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}

NOTA: Você só pode usar a API Screen Wake Lock se a página já estiver visível na tela. Caso contrário, lançaria um erro.

6. API de orientação da tela
   A API de orientação da tela permite que você verifique a orientação atual da tela e até mesmo bloqueie-a para uma orientação específica.

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}

7. API em tela cheia
   A API de tela cheia permite que você exiba um elemento ou a página inteira em tela cheia.

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}

NOTA: Para usar a API de tela cheia também, você precisa de uma interação do usuário.