Herramienta de Grabación de Pantalla

El grabador de pantalla captura una pantalla completa, una ventana de aplicación o una pestaña del navegador directamente desde el navegador. Según el soporte y los permisos, también puede incluir audio del sistema y entrada de micrófono, lo que resulta útil para tutoriales rápidos, reproducción de errores, demostraciones de producto, fragmentos de clase, revisiones de diseño y explicaciones de soporte sin instalar software adicional. Antes de grabar conviene revisar ventanas privadas, notificaciones, contraseñas, datos de clientes o pestañas ajenas, porque se registra exactamente el área seleccionada. El procesamiento es local y el archivo final se descarga después, aunque calidad y audio dependen del sistema.

La captura comienza con navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }), que devuelve un MediaStream con una pista de video (la pantalla, ventana o pestaña elegida) y opcionalmente una pista de audio cuando el navegador y la fuente lo permiten. El usuario selecciona la superficie en un diálogo nativo del sistema, y el flujo finaliza automáticamente cuando se pulsa el botón del sistema Dejar de compartir, que dispara el evento ended de la pista para que el grabador pueda cerrar el archivo. La salida codificada la produce la API MediaRecorder. La selección de contenedor y códec se realiza mediante MediaRecorder.isTypeSupported() probando candidatos como video/webm;codecs=vp9,opus, video/webm;codecs=vp8,opus y en Safari video/mp4;codecs=avc1. El evento ondataavailable se dispara periódicamente (o al detener), entregando fragmentos Blob que se concatenan en un único Blob con el mimeType negociado. videoBitsPerSecond y audioBitsPerSecond equilibran calidad frente a tamaño de archivo, y una grabación típica de 1080p a 4 Mbps con VP9 ocupa unos 30 MB por minuto. Cuando se solicitan tanto audio del sistema como micrófono, la página construye un AudioContext, envuelve cada MediaStreamTrack en un MediaStreamAudioSourceNode y los mezcla mediante un GainNode en un MediaStreamAudioDestinationNode. La pista de audio combinada reemplaza los flujos originales antes de iniciar MediaRecorder, de modo que el WebM resultante contiene una única pista Opus mezclada en lugar de dos separadas. El soporte del navegador requiere Chrome 72+, Firefox 66+ o Safari 13+; navegadores más antiguos rechazan getDisplayMedia u omiten la restricción de audio.

• API de captura: navigator.mediaDevices.getDisplayMedia({ video, audio }) devuelve un MediaStream; el usuario elige pantalla/ventana/pestaña en un diálogo del sistema
• Codificador: MediaRecorder con isTypeSupported() probando video/webm;codecs=vp9,opus primero, con reserva a vp8 o H.264/AVC1 en MP4
• Salida fragmentada: ondataavailable produce porciones Blob que se concatenan y envuelven en un Blob del mimeType negociado
• Mezcla de audio: AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode combinan el audio del sistema con el micrófono en una única pista Opus
• Disparador de fin de flujo: el evento ended de la pista de video se dispara cuando el usuario pulsa la barra Dejar de compartir del navegador, finalizando la grabación
• Control de tasa de bits: videoBitsPerSecond entre 2,5 y 8 Mbps para 1080p; 4 Mbps con VP9 equivale a unos 30 MB por minuto
• Línea base del navegador: Chrome 72+, Firefox 66+, Safari 13+; la captura de audio de pestaña solo funciona en navegadores basados en Chromium con la casilla Compartir audio de la pestaña