JavaScript

Web APIs

Web Components

Son un conjunto de APIs que nos permiten crear nuevas etiquetas HTML con su propia funcionalidad. Por ejemplo, podemos crear la etiqueta <snap-shot> que encapsule la funcionalidad del ejemplo anterior con la webcam. Luego, esta etiqueta se podrá utilizar como cualquier otra del HTML estándar en aquellas páginas que lo necesiten1.

A continuación, se muestra el ejemplo anterior de la webcam pero implementado con este Web Component.

<body>
<div class="card">
  <div class="card-body row">
    <div class="col-12">
      <snap-shot id="snapshot">Cámara no disponible o sin permisos</snapshot>
    </div>
    <div class="col-12 text-center mt-3">
      <button id="foto" type="button" class="btn btn-outline-secondary">
        <i class="bi bi-camera-fill"></i> Foto
      </button>
    </div>
  </div>
</div>
</body>
html { font-size: 50%; padding: 2rem; }
.card { width: 32.2rem;}
// El elemento del web component
const snapshot = document.getElementById("snapshot");
const foto = document.getElementById("foto");
// Para alternar el botón entre foto y descarga
foto.onclick = function() {
  try {
    const modoFoto = foto.textContent.indexOf('Foto') > -1;
    modoFoto ? snapshot.capturePhoto() : snapshot.downloadPhoto();
    foto.innerHTML = modoFoto ? 
      '<i class="bi bi-file-earmark-arrow-down-fill"></i> Descargar' : 
      '<i class="bi bi-camera-fill"></i> Foto';
  } catch(err) {
    foto.disabled = true;
    foto.innerHTML = 
      '<i class="bi bi-exclamation-triangle-fill"></i> Pulsa en "Edit on Codepen"';
  }
};
1

Por ejemplo, en páginas que quieran hacer un login de usuarios basado en reconocimiento facial.