Añade una fuente para empezar

Webcam · Pantalla · Vídeo · Color

Un mezclador de vídeo en el navegador, similar a OBS pero sin instalar nada. Combina varias fuentes en un canvas y las graba o emite en tiempo real a través del servidor.

1. Crea una o varias escenas en el panel izquierdo (p.ej. "Intro", "Clase", "Pantalla completa").
2. En cada escena añade fuentes con el botón +.
3. Arrastra las fuentes en el canvas para posicionarlas. Ajusta tamaño, posición y opacidad en el panel derecho.
4. Pon 🎨 Color sólido en la capa más baja como fondo para evitar negro.
5. Pulsa ⏺ Grabar para guardar en local (WebM), o usa el panel Frameserver para grabar en el servidor con ffmpeg (MP4/WebM).
6. Cambia de escena durante la emisión — la transición se aplica automáticamente.

No son tipos distintos — es una disposición que tú creas:
• Añade Pantalla a tamaño completo (capa inferior) → es la presentación.
• Añade Webcam pequeña en una esquina (capa superior) → eres tú como presentador.
Esto es el clásico picture-in-picture de cualquier canal de docencia o streaming.

El panel 🖥 Frameserver en el panel derecho conecta con frameserver.php en el servidor.
1. Pulsa 🔍 Test para comprobar que ffmpeg está disponible.
2. Elige formato MP4 o WebM.
3. Pulsa ⏺ Grabar en servidor — los frames se envían en tiempo real.
4. Al detener, ffmpeg multiplexará audio y vídeo. Descarga el fichero resultante con el botón que aparece.

• La grabación local genera un .webm descargable al terminar. Al detener, StreamFlow reescribe el contenedor (duración + índice de búsqueda) sin recodificar, para que el archivo se pueda mover por la línea de tiempo de cualquier editor.
• Puedes minimizar o cambiar de ventana mientras grabas: el render usa un reloj de audio que el navegador no congela en segundo plano.
• Para capturar otra aplicación elige Ventana o Pantalla completa en el diálogo del navegador. Ajusta los fps arriba a la derecha: 25–30 para grabación local.
• El servidor usa ffmpeg 7.0.2.
• Las fuentes se procesan en el navegador — el vídeo solo sube al servidor si usas Frameserver.
• 📸 Captura guarda un PNG del frame actual del canvas.