VideosCapturasSelecciónde área
Tu pantalla.A tu manera.
Videos y capturas en un solo lugar.
Graba la pantalla y hace capturas con nombre y carpeta.
- Electron 28
- JavaScript
- FFmpeg
- HTML e CSS
Grabación de videoCaptura de pantallasSelección de áreaTu pantalla.A tu manera.
Videos y capturas en un solo lugar.
- Electron 28
- JavaScript
- FFmpeg
- HTML e CSS
Graba la pantalla y hace capturas con nombre y carpeta.
- Electron 28
- JavaScript
- FFmpeg
- HTML e CSS
Qué capturar
¿Depende del monitor en que estás? Ya no.
Con más de un monitor, la captura por defecto es la del monitor donde está el cursor, toca o pasa el mouse por el escritorio y mira cuál se enciende. También se puede fijar un monitor, una ventana o un área. Captura con el botón o con la tecla F9 de verdad: antes de la foto, el programa se aparta para no salir en la captura.
O pulsa F9 con esta parte en pantalla.
Las capturas, ya con nombre
Todavía no hay capturas.
Los cinco objetivos
Los objetivos, el predeterminado y la espera de 300 ms son los del código (screenshot.js). En pantallas con escala, la captura sale en el tamaño real de los píxeles, no reducida.
El nombre
Cada captura sale con nombre y lugar.
Ponle nombre al grupo y el programa hace el resto: quita lo que Windows no acepta, cambia espacios por guiones, evita los nombres reservados y sigue la numeración desde donde quedó la carpeta, incluso después de cerrar el programa. Escribe un nombre y mira.
Prohibido en Windows: desaparece. Espacio: se vuelve guion.
El nombre que va al discovitrine
Prints/vitrine/
- vitrine-001.png
- vitrine-002.png
- vitrine-007.png
- Próximo archivovitrine-008.png
Las reglas son las del código (limparNome y proximoNumero): la numeración lee la carpeta y sigue desde el número más alto, en la carpeta de ejemplo hay un vitrine-007, así que el próximo es el 008, no el 003.
Tú eliges el encuadre.
Pantalla completa, ventana o área, con atajos para cada paso.
Pantalla, ventanao áreaAudio y
micrófonoCalidad
configurable
En la grabación, cada opción del programa está aquí: elige la fuente, el audio, la calidad y dónde va la cámara, la vista previa obedece. Activa el resaltado y toca o pasa el mouse por la vista previa; después inicia, pausa y detén.
Fuente
Audio
Resolución
Cuadros por segundo
Formato
Cámara
Cuenta antes de grabar
Resaltado del cursor
Alt+R inicia · Alt+S detiene · Alt+P pausa o reanuda
Las opciones y los atajos son los de la pantalla del programa. La grabación sale en VP9 (o VP8 si el sistema no tiene VP9); el audio del sistema y el del micrófono se mezclan en uno. Aquí la vista previa es simulada: no se graba nada.
La grabación larga
Una hora de video sin llenar la memoria.
En lugar de guardar el video entero en la memoria hasta el final, el programa manda cada segundo grabado directo a un archivo en el disco. Al detenerse, cierra el archivo: en WebM, escribe la duración que el navegador deja fuera; en MP4, convierte. Graba seis segundos y elige.
temp_1760641620000.webm0 pedazos · ≈ 0 MBestimado por la tasa de la resolución elegida
El pedazo de 1 segundo, la corrección de la duración en JavaScript puro (sin proceso externo), las opciones de FFmpeg y el respaldo en WebM son los del código (main.js y webm-duracao.js). Los tamaños son una estimación por la tasa objetivo de cada resolución.
Los atajos
La tecla solo vale cuando llega.
El sistema responde que la tecla se registró incluso cuando nunca llega al programa. Por eso el programa tiene una prueba: la pulsas y él confirma. Haz clic en el campo y pulsa cualquier tecla, la prueba ocurre aquí.
La prueba de la tecla
Haz clic aquí y pulsa una tecla (F9, Scroll Lock, Alt+R…).
- Hacer una capturaF9Si se rechaza:F8F7Alt+Shift+PCtrl+Shift+1
- Empezar un grupo nuevoScroll LockSi se rechaza:Alt+Shift+GCtrl+Shift+2F10Alt+Shift+N
- Grabar videoAlt+RAlt+SAlt+P
En Windows 11, la tecla Imprimir Pantalla abre la Herramienta Recortes por defecto, un programa externo solo la recibe si esa opción se desactiva. Por eso el predeterminado aquí es F9, con respaldos que el sistema disputa menos.
Las teclas, los respaldos y el motivo de la prueba son los del código (hotkeys.js). En la selección de área, Esc cancela y Enter confirma, solo mientras está abierta.
De la idea a la aplicación.
Interfaz propia. Archivos locales.
Captura organizadaCapturas en gruposDesarrollo propioLa galería del programa no tiene carpetas de mentira: crear una carpeta la crea en el disco, arrastrar una captura mueve el archivo, y la carpeta elegida pasa a ser el destino de las próximas capturas. Borrar manda a la papelera, una captura borrada por error no puede ser irreversible. Pruébalo.
vitrineArrastra una captura a una carpeta o a la papelera.
Las pantallas del programa
Todo en las carpetas del programa es un archivo de verdad (screenshot.js): la carpeta aparece en el Explorador, y la galería se actualiza sola cuando algo cambia afuera. Las miniaturas aquí son las pantallas del propio programa.
Las tecnologías
De qué está hecho, pieza por pieza
Un programa de escritorio hecho con tecnología de navegador: Electron da la ventana, la bandeja y las teclas globales; el propio Chromium graba la pantalla y fotografía los monitores; y FFmpeg entra solo cuando el video tiene que volverse MP4. Elige una pieza para ver qué hace aquí y en qué archivo está.
10tecnologías, en 3 capas
Ventana
Pantalla
Archivos
Aplicaciones de escritorioWorkBench