Lower thirds en OBS: un browser source, todos los gráficos
OBS Studio puede mostrar gráficos HTML5 en vivo de forma nativa: sin plugin, sin capturadora, sin segunda máquina. Esta es la configuración exacta para lower thirds en OBS, marcadores y tickers con un único browser source transparente, con los problemas habituales y su solución.
Por qué browser source y no fuente multimedia
Una fuente multimedia reproduce un archivo. Un browser source ejecuta una página web viva, compuesta sobre tu escena con transparencia completa y actualizada en tiempo real. Esa diferencia lo es todo para los gráficos en directo: la página puede cambiar su contenido mientras está en antena, así que un marcador o un nombre se actualizan sin tocar OBS.
Además, una sola fuente lleva todos los gráficos. Rótulo, marcador y ticker son elementos de la misma página transparente, así que nunca se desalinean y no acabas con una pila de doce fuentes.
Añadir la fuente paso a paso
- Arranca LowerThird Software. Sirve el panel de control y la página de salida desde tu propia máquina.
- En OBS, selecciona la escena que ya tiene tu cámara o captura de juego. Pulsa + en Fuentes y elige Navegador.
- Llámala Gráficos y acepta.
- Pon como URL
http://localhost:5275/output. - Ancho 1920 y alto 1080 — igual que tu lienzo; no redimensiones la fuente en la escena.
- Deja Apagar la fuente cuando no esté visible sin marcar, y marca Actualizar el navegador cuando la escena se active solo si quieres que los gráficos se reinicien en cada cambio de escena.
- Acepta y arrastra la fuente arriba del todo para que quede por encima de la cámara.
Transparencia: no hay nada que configurar
Mucha gente busca un ajuste de transparencia. No existe, y no hace falta: el browser source de OBS ya respeta el canal alfa de la página. Si la página no pinta fondo, OBS compone solo los píxeles dibujados sobre tu escena.
Si ves un rectángulo negro o blanco, es la página la que pinta el fondo, no OBS. El CSS personalizado del diálogo puede arreglar una página de terceros (body { background: transparent !important; }), pero una página hecha para televisión ya debería ser transparente.
Tamaño, escalado y área segura
Crea siempre la fuente a la misma resolución que tu lienzo — normalmente 1920×1080 — y coloca los gráficos dentro de la página en lugar de escalar la fuente en OBS. Escalar un browser source remuestrea el texto y suaviza todos los bordes: es la razón número uno de que los rótulos se vean borrosos.
Si emites a 1280×720, mantén la fuente a 1920×1080 y deja que OBS reduzca todo el lienzo una sola vez al final. Un reescalado limpio es mejor que dos.
Cinco problemas y sus soluciones
- La fuente está en blanco. La aplicación no está arrancada o el puerto es otro. Abre la URL en un navegador normal: si ahí también está vacía, el problema no es OBS.
- Los gráficos no se actualizan. La página está en caché o se cayó el socket. Clic derecho en la fuente → Interactuar, o Actualizar. Una página basada en WebSocket debería reconectarse sola.
- El texto se ve blando. La fuente está escalada. Restablece la transformación (Ctrl+R con la fuente seleccionada) y define el tamaño en las propiedades.
- Todo va a tirones. La aceleración por hardware está desactivada en OBS o hay una animación cara. Prefiere animaciones de transform y opacity, que resuelve la GPU, antes que width, height o sombras.
- El overlay desaparece al cambiar de escena. Está marcado Apagar la fuente cuando no esté visible. Desmárcalo o añade la misma fuente a cada escena como referencia, no como copia.
Trabajar en directo
Ten el panel en un segundo monitor o en una tablet sobre la mesa: es una página web, así que cualquier cosa con navegador en tu red puede manejarlo. Escribe el nombre del siguiente invitado mientras el actual sigue en pantalla y pulsa TAKE cuando cambie el plano.
Como los comandos viajan por WebSocket no hay retardo de sondeo ni recarga: haces clic y la animación empieza en el mismo fotograma.
¿Listo para probarlo en tu escena? Consigue una versión de acceso anticipado, añade un browser source y saca un rótulo en unos cinco minutos.
Solicitar acceso anticipado