CÓMO HACER CAPTURAS LA PANTALLA CON JAVASCRIPT

Se puede solicitar capturar y grabar la pantalla, una ventana o una pestaña directamente desde el navegador sin necesidad de extensiones ni software adicional con la API "MediaDevices.getDisplayMedia()", que lo hace posible de forma nativa y sencilla.
Esta funcionalidad forma parte de la WebRTC y está disponible en la mayoría de los navegadores modernos. Permite a las aplicaciones web solicitar acceso a la pantalla del usuario para compartirla, grabarla o procesarla en tiempo real.

¿Qué es getDisplayMedia()?

La API "navigator.mediaDevices.getDisplayMedia()" solicita al usuario permiso para capturar la pantalla completa, una ventana concreta o una pestaña del navegador. Si el usuario acepta, el navegador devuelve un MediaStream de vídeo que se puede utilizar directamente en un elemento "video", enviarlo por WebRTC o grabarlo con la MediaRecorder API.

Ejemplo básico

// Capturar pantalla
navigator.mediaDevices.getDisplayMedia({
  video: true,   // obligatorio
  audio: false   // opcional: capturar también el audio del sistema
})
.then(stream => {
  // Usar el stream de vídeo
  const video = document.querySelector('video');
  video.srcObject = stream;
})
.catch(err => {
  console.error('Error al capturar la pantalla:', err);
});
La llamada se basa en promesas y requiere que el usuario conceda el permiso de forma explícita. El navegador muestra un diálogo de confirmación donde el usuario elige qué quiere compartir, como pantalla completa, ventana o pestaña.

Pasos para implementarlo

  1. Preparar el evento: Definir la función dentro de un evento del usuario, normalmente un clic en un botón. Los navegadores solo permiten llamar a "getDisplayMedia()" desde una interacción del usuario por motivos de seguridad.
  2. Llamar a la API: Invocar "navigator.mediaDevices.getDisplayMedia()" con las opciones deseadas y maneja el MediaStream que recibe la promesa.
  3. Completar la acción: Una vez obtenido el stream, asígnarlo a un elemento "video" para previsualizarlo, graba4lo o enviarlo a otro usuario mediante WebRTC.

Ejemplo completo y práctico

const btnCompartir = document.getElementById('btn-compartir');
const videoPreview = document.getElementById('preview');

btnCompartir.addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: 'always' // muestra el cursor
      },
      audio: true // captura el audio del sistema (si el navegador lo permite)
    });

    videoPreview.srcObject = stream;

    // Detener la captura cuando el usuario deje de compartir
    stream.getVideoTracks()[0].addEventListener('ended', () => {
      console.log('El usuario ha dejado de compartir la pantalla');
      videoPreview.srcObject = null;
    });

  } catch (err) {
    console.error('No se pudo capturar la pantalla:', err.name, err.message);
  }
});

Consideraciones importantes

  • Permisos: El usuario siempre debe aceptar el diálogo del navegador. No se puede forzar la captura.
  • Seguridad: Solo funciona en contextos seguros como HTTPS o localhost.
  • Compatibilidad: Disponible en todos los navegadores modernos. En Safari tiene algunas limitaciones con el audio del sistema.
  • Opciones útiles: Se puede indicar si se quiere incluir el cursor, restringir la resolución o solicitar audio.
  • Finalización: Cuando el usuario pulsa “Dejar de compartir”, el "track" de vídeo emite el evento "ended". Es buena práctica "escucharlo" para limpiar recursos.