Grabación de Pantalla y Demos
Una grabación scripteada es repetible. Cuando la interfaz cambia, vuelves a ejecutar el script en lugar de volver a grabar manualmente.
Elige el método
| Situación | Método |
|---|---|
| Aplicación web que puedes abrir en un navegador | Grabación scripteada con Playwright |
| Aplicación de escritorio o flujo de trabajo en pantalla completa | Grabador del sistema operativo (OBS Studio, Windows Game Bar, macOS Screenshot) |
| El código fuente de la aplicación está disponible y se desea un resultado pulido y sin fallos | Reconstruir las pantallas como componentes estáticos en Remotion (ver remotion-programmatic-video) |
| CLI | Grabador de terminal (asciinema, VHS) o un componente de terminal animado |
Grabación con Playwright (Python)
pip install playwright && playwright install chromium
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"width": 1920, "height": 1080},
record_video_dir="recordings/",
record_video_size={"width": 1920, "height": 1080},
)
page = ctx.new_page()
page.goto("https://example.com")
page.wait_for_load_state("networkidle")
page.wait_for_timeout(800) # permite que el visulizador lea
page.get_by_role("button", name="Iniciar sesión").click()
page.get_by_label("Correo electrónico").type("[email protected]", delay=60) # escritura visible
page.wait_for_timeout(1200)
ctx.close() # el video se finaliza al cerrar
browser.close()
La salida es WebM. Convierte:
ffmpeg -i recordings/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
Haz que se vea bien
- Datos de demo: usa una cuenta de demo preestablecida con datos realistas y no sensibles. Nunca grabes datos reales de clientes, tokens o correos electrónicos.
- Ventana: viewport fijo de 1920×1080, oculta las barras de marcadores y notificaciones, zoom ligero (110 a 125 por ciento) para que el texto sea legible en un teléfono.
- Ritmo: pausa de 0.5 a 1 segundo después de cada acción. Escribe con un retardo. Evita saltos instantáneos.
- Cursor: Playwright no dibuja un cursor. Inyecta un cursor DOM pequeño, o agrega uno en postproducción (Remotion o una superposición).
- Determinismo: espera con
expect(locator).to_be_visible()en lugar de pausas fijas, luego añade pausas deliberadas para los visulizadores. - Secretos: difumina o enmascara campos en el script de la página (
page.add_style_tag) antes de grabar.
Postproducción
# Recortar tiempo muerto: mantener de 12 s a 41 s
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# Acelerar esperas aburridas (p. ej., 4x de 20 s a 30 s) requiere un corte; lo más simple es cortar, acelerar, reensamblar
# Hacer zoom en una región: recortar y luego escalar (x:y:w:h en píxeles de origen)
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
Para un zoom/pan animado suave que siga el cursor, usa Remotion (interpolate en scale y translate).
Sincronizar con narración
- Escribe primero el guion (
video-planning), graba la voz en off (voiceover-tts). - Graba la pantalla, luego ajusta la velocidad por escena para que cada acción coincida con su frase. Calcula
velocidad = segundos_grabados / segundos_narración. - Usa las recetas de velocidad de
ffmpeg-essentials, o reajusta el tiempo dentro de la composición.
Lista de verificación
- Sin datos personales, claves API ni URLs internas visibles.
- Texto legible a 1080p escalado a una pantalla de teléfono.
- Sin indicadores de carga de más de 1 segundo de duración.
- Audio de la máquina silenciado a menos que se desee.