Capas
Las capas son los elementos visuales individuales que forman una escena. Se apilan unas sobre otras, y los elementos que están más arriba en la pila se muestran al frente.
¿Qué es una capa?
Una capa es una sola fuente visual o elemento gráfico dentro de una escena. Varias capas se combinan para crear la composición visual completa que ven tus espectadores.
Pila de capas
Las capas siguen un orden de apilamiento (z-index):
- Las capas superiores se muestran al frente
- Las capas inferiores se muestran detrás
- Puedes reordenar las capas para cambiar qué se muestra al frente
Tipos de capa
Al responder a un usuario, usa los nombres del menú Add New Layer (agregar nueva capa), no los nombres internos de tipo que aparecen abajo. El menú ofrece: Dynamic Grid, Text, Animated Caption, AI Generated Image, Media Files, Slideshow, Web Source, Apps & Widgets, Speaker, Screenshare y Media share.
No existe una “capa Editor” ni una “capa Remote Guest” para elegir: una sola entrada Speaker abre un selector que lista a todos, editores, speakers e invitados por igual. Las distinciones de abajo son la forma en que el código guarda lo que elegiste, no opciones que el usuario elige.
Internamente evmux tiene 14 tipos de capa:
Capas de participante
Speaker (speaker)
Speakers o presentadores en cámara que se unen a la transmisión. Hace referencia a participantes de la lista de speakers.
Editor (editor)
La señal de cámara del productor o editor de la transmisión. Hace referencia a participantes de la lista de editores.
Invitado remoto (remoteguest)
Participantes remotos que se unen por un enlace de invitación WebRTC. Hace referencia a participantes de la lista de invitados.
Pantalla compartida (screenshare)
Pantalla, ventana o pestaña que comparte cualquier participante.
Medio compartido (media)
Contenido multimedia (videos, imágenes) que comparten los participantes durante la transmisión.
Capas de medios
Video (video)
Reproducción de un archivo de video pregrabado con soporte para:
- Puntos de recorte de inicio y fin
- Reproducción en bucle
- Cambio automático a la siguiente escena
- Control de volumen
- Efectos de chromakey (pantalla verde)
Imagen (image)
Imágenes estáticas (PNG, JPG, GIF, WebP, SVG) con soporte de chromakey.
Audio (audio)
Pistas de solo audio para música de fondo o efectos de sonido.
Presentación (slideshow)
Presentaciones que recorren varias imágenes con un tiempo configurable.
Capas dinámicas
Texto (text)
Superposiciones de texto dinámico con muchas opciones de estilo:
- Familia, tamaño, grosor y estilo de fuente
- Colores de texto y de fondo (RGBA/HSL)
- Relleno, altura de línea, espaciado entre letras
- Alineación y decoración del texto
- Radio de borde
Fuente web (websource)
Contenido web incrustado mediante iframe:
- Contenido basado en URL
- Soporte de HTML personalizado
- Opciones de tamaño fijo
- Útil para widgets, alertas y gráficos basados en web
Subtítulo dinámico (dc)
Tercios inferiores y subtítulos animados con:
- Varios tipos de animación
- Tiempos configurables (retraso, duración, ciclo)
- Visualización de nombre y cargo del speaker
- Integración de logo
- Soporte de fondo de video
Cuadrícula dinámica (dynamicGrid)
Diseño de cuadrícula automático que organiza a varios participantes:
- Soporte de escenas incrustadas
- Opciones de ajustar o estirar
- Controles de alineación del contenido
- Solo se permite una por escena
App de usuario (userapp)
Aplicaciones de terceros integradas mediante el Evmux App Framework:
- Widgets y herramientas personalizados
- Superposiciones interactivas
- Integraciones con servicios externos
Elementos de apoyo
Estos se renderizan como elementos de superposición especiales:
- Frame (marco) - Marcos decorativos personalizados alrededor de las capas de participante
- Watermark (marca de agua) - Marcas de agua permanentes de la marca
- Overlay (superposición) - Superposiciones de fondo a nivel de escena
- Logo (logo) - Bloques de logo de la escena
- Stinger (stinger) - Animaciones de transición entre escenas
- Banner (banner) - Banners de texto de tercio inferior
Propiedades de capa
Propiedades comunes (todas las capas)
| Propiedad | Descripción |
|---|---|
idx | Identificador único de la capa (GUID) |
type | Identificador del tipo de capa |
name | Nombre visible |
opacity | Transparencia (0-100%) |
bounds | Ancho y alto en píxeles |
pos | Posición (arriba, derecha, abajo, izquierda en %, rotación) |
crop | Valores de recorte (arriba, derecha, abajo, izquierda) |
datakey | Referencia a datos externos (ID de participante, etc.) |
Propiedades de transformación
- Position (posición): Coordenadas X e Y (basadas en porcentaje)
- Size (tamaño): Ancho y alto
- Rotation (rotación): Ángulo en grados
- Crop (recorte): Recorta los bordes de la capa
Propiedades de apariencia
- Opacity (opacidad): Nivel de transparencia (0-100%)
- Border Radius (radio de borde): Esquinas redondeadas (la mayoría de los tipos de capa)
- Custom Frame (marco personalizado): Superposición de marco decorativo (capas de participante)
Propiedades de comportamiento
- Visibility (visibilidad) (
hidden): Mostrar u ocultar la capa - Lock (bloqueo) (
locked): Evita modificaciones accidentales - Aspect Ratio (relación de aspecto) (
aspect): Mantiene las proporciones al redimensionar - Vertical Streaming (transmisión vertical): Configuración del modo vertical
Propiedades de chromakey (capas de video e imagen)
- Active (activo): Activa o desactiva la pantalla verde
- Color (color): Verde (
g), azul (b) o personalizado - Range (rango): Umbral de coincidencia de color
- Softness (suavidad): Suavidad de los bordes
Propiedades de audio (capas de video y participante)
- Muted (silenciado): Audio encendido o apagado
- Volume (volumen): Nivel de audio
- Mic (micrófono): Control del micrófono
Interacciones con capas
- Arrastrar y soltar: Reposiciona las capas en el editor de escenas
- Controles de redimensión: Controles en esquinas y bordes para ajustar las dimensiones
- Control de rotación: Rota la capa
- Menú contextual: Clic derecho para opciones específicas de la capa
- Atajos de teclado: Manipulación rápida de capas
- Lista de capas: Reordena arrastrando en el panel de capas
Tipos de transmisión para participantes
Las capas de participante admiten varios tipos de transmisión:
- Camera (cámara) - Señal principal de cámara (alta o baja resolución)
- Multicam 1/2 (multicámara 1/2) - Ángulos de cámara adicionales
- Screen (pantalla) - Transmisión de pantalla compartida
- Media (medios) - Transmisión de medios compartidos