Con las tecnologías que cambian rápidamente, los desarrolladores cuentan con nuevas herramientas y API increíbles . Pero se ha visto que de las más de 100 API , solo el 5% de ellas son utilizadas activamente por los desarrolladores.

¡Echemos un vistazo a algunas de las API web útiles que pueden ayudarlo a llevar su sitio web a la luna!

1. API de captura de pantalla

La API de captura de pantalla , como sugiere el nombre, le permite capturar el contenido de una pantalla, lo que hace que el proceso de creación de una grabadora de pantalla sea pan comido.

Necesita un elemento de video para mostrar la pantalla capturada. El botón de inicio iniciará la captura de pantalla .

<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);

La Web Share API le permite compartir texto , enlaces e incluso archivos desde una página web a otras aplicaciones instaladas en el dispositivo.

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

3. API del observador de intersecciones

La API Intersection Observer le permite detectar cuándo un elemento entra o sale de la ventana gráfica . Esto es excepcionalmente útil para implementar scroll infinito .

NOTA: La demostración usa React debido a mi preferencia personal, pero puede usar cualquier marco o JavaScript estándar .

4. API del portapapeles

La API del portapapeles le permite leer y escribir datos en el portapapeles . Esto es útil para implementar la funcionalidad de copiar al portapapeles .

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

¿Alguna vez se preguntó cómo YouTube evita que la pantalla se apague mientras se reproduce el video? Bueno, eso se debe a la API Screen Wake Lock .

let wakeLock = null;

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

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

6. API de orientación de pantalla

La API de orientación de pantalla le permite verificar la orientación actual de la pantalla e incluso bloquearla en una orientación específica.

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

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

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

      
                

                    
                    
                
            

La API de pantalla completa le permite mostrar un elemento o la página completa en pantalla completa .

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

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

¡Sígueme para conocer novedades quincenales sobre el dominio de la tecnología !

¿ Necesita un freelancer de desarrollo front-end mejor calificado para eliminar sus problemas de desarrollo? Contáctame en Upwork

¿Quieres ver en qué estoy trabajando? Consulta mi sitio web personal y GitHub

¿Quieres conectarte? Ponte en contacto conmigo en LinkedIn

Soy un Nómada Digital y ocasionalmente viajo. Sígueme en Instagram para ver lo que estoy haciendo.