HTML

4 · Salida gráfica

Salida HTML

La salida HTML es la forma más directa de llevar los gráficos de Race-G a OBS, vMix o cualquier programa con fuente navegador. Puede ser transparente (con canal alfa) o con croma (fondo de color que se elimina con un filtro). Acá vas a encontrar la dirección de la salida, cómo averiguar la IP de la máquina y cómo cargarla paso a paso.

Transparente y croma La IP de la máquina OBS vMix Problemas frecuentes CasparCG, NDI y placas →

Salida HTML: transparente y croma

Race-G funciona como un pequeño servidor web local. Cada gráfico se dibuja en una página HTML que cualquier programa con “fuente navegador” puede mostrar. Esa página es la salida HTML, y es la forma más directa de llevar tus gráficos a un programa de transmisión.

La dirección de la salida

http://127.0.0.1:5000/layout.html?v=2

🖼️

Falta captura: Screenshots/html-url-salida.pngRecorte de la sección Salida de Race-G mostrando la dirección http://127.0.0.1:5000/layout.html?v=2.

Parte	Qué significa
`http://`	Protocolo web. Es una red local; no sale a internet.
`127.0.0.1`	La IP de “esta misma PC” (localhost). Solo funciona en la máquina donde corre Race-G.
`:5000`	El puerto donde Race-G publica la salida.
`/layout.html?v=2`	La página de gráficos. Copiala tal cual la muestra Race-G.

HTML transparente

La página tiene el fondo totalmente transparente: cada píxel lleva información de opacidad (canal alfa). Cuando OBS o vMix la muestran como fuente, el video de abajo se ve a través de todo lo que no es gráfico. Los bordes suaves, sombras y degradados se integran perfecto. Es la opción recomendada siempre que tu software la soporte.

HTML con croma

En lugar de transparencia, el fondo es un color sólido (típicamente verde). En tu software agregás un filtro Chroma Key que elimina ese color y deja solo el gráfico. Usalo cuando:

tu software o switcher no admite transparencia en la fuente web,
capturás la ventana o la pantalla con otro programa,
tu switcher de hardware tiene chroma key pero no entrada de Key (por ejemplo, un switcher HDMI).

Tip: Elegí un color de croma que no aparezca en tus gráficos (si usás verde, evitá verdes en las tablas). Los bordes pueden verse con un leve halo; ajustá “Similaridad / Suavidad” en el filtro hasta que quede limpio. La transparencia real no tiene este problema.

Cómo se ve el flujo

Race-G (PC) --> http://IP:5000/layout.html?v=2 --> Fuente Navegador (OBS / vMix)
                                                   |--> transparente: se compone directo
                                                   '--> croma: se aplica filtro Chroma Key

La IP de la máquina: qué es y cómo verla

Toda computadora conectada a una red tiene una dirección IP: un número que sirve para encontrarla, como una dirección postal. Si OBS o vMix corren en otra PC distinta a la de Race-G, esa otra PC necesita saber a qué dirección conectarse. Por eso reemplazás 127.0.0.1 por la IP de la máquina donde corre Race-G.

Dirección	Cuándo usarla	Ejemplo
`127.0.0.1` / `localhost`	OBS / vMix están en la misma PC que Race-G	`http://127.0.0.1:5000/layout.html?v=2`
IP de la red local (ej. `192.168.1.50`)	OBS / vMix están en otra PC de la misma red	`http://192.168.1.50:5000/layout.html?v=2`

Cómo ver la IP en Windows

Con el símbolo del sistemaPresioná Win + R, escribí cmd y Enter. Luego escribí ipconfig y buscá “Dirección IPv4”.

Desde ConfiguraciónConfiguración → Red e Internet → Ethernet (o Wi-Fi) → Propiedades. Aparece “Dirección IPv4”.

Desde el Administrador de tareasCtrl + Shift + Esc → Rendimiento → Ethernet / Wi-Fi. La IPv4 se muestra abajo a la derecha.

Con PowerShellEjecutá Get-NetIPAddress -AddressFamily IPv4 para ver todas las IPs de la PC.

C:\> ipconfig

Adaptador de Ethernet Ethernet:
   Dirección IPv4. . . . . . . . . : 192.168.1.50      <-- esta es la que necesitás
   Máscara de subred . . . . . . . : 255.255.255.0
   Puerta de enlace predeterminada : 192.168.1.1

Cómo elegir la IP correcta

Si la PC tiene varias, usá la del adaptador que está conectado a la misma red que la otra computadora (Ethernet o Wi-Fi).
Ignorá las que empiezan con 169.254. (sin red) y las de adaptadores virtuales (“vEthernet”, VirtualBox, VMware, VPN).
Las IPs de red local suelen empezar con 192.168., 10. o 172.16. a 172.31..
Las dos PCs deben estar en la misma red y rango (por ejemplo, ambas 192.168.1.x).
Preferí cable de red (Ethernet) antes que Wi-Fi: es más estable para transmitir.

Que la IP no cambie

Si tu router asigna IPs automáticamente (DHCP), la IP puede cambiar al reiniciar y la fuente dejaría de funcionar. Dos soluciones: reservar la IP de esa PC en el router (reserva DHCP), o configurar una IP fija en Windows (Propiedades del adaptador → IPv4 → Usar la siguiente dirección IP), fuera del rango que reparte el router.

Probar que funciona

🖼️

Falta captura: Screenshots/html-prueba-navegador.pngVentana de Chrome/Edge con la URL con IP cargada y la página de gráficos visible.

Abrí el navegadorEn la otra PC, abrí Chrome o Edge y pegá la URL con la IP, por ejemplo http://192.168.1.50:5000/layout.html?v=2.

Mirá el resultadoSi ves la página de gráficos (aunque esté vacía), la conexión funciona.

Si no cargaVerificá que Race-G esté abierto, que las IPs estén en la misma red y el firewall (ver abajo).

ping 192.168.1.50
Test-NetConnection -ComputerName 192.168.1.50 -Port 5000
netstat -ano | findstr :5000        (en la PC de Race-G: ¿el puerto 5000 está escuchando?)

Firewall: Windows puede mostrar un aviso del firewall la primera vez que Race-G abre el puerto. Permití el acceso en redes privadas. Si lo cerraste, creá una regla de entrada para el puerto TCP 5000 en Firewall de Windows Defender → Configuración avanzada → Reglas de entrada.

Cómo cargar la fuente Navegador en OBS Studio

🖼️

Falta captura: Screenshots/html-obs-fuente.pngPropiedades de la fuente Navegador en OBS: URL, ancho 1920, alto 1080 y FPS.

Agregá la fuenteEn el cuadro Fuentes presioná + y elegí Navegador (Browser). Poné un nombre, por ejemplo “Race-G”.

Pegá la URLEn URL pegá http://127.0.0.1:5000/layout.html?v=2 (o la de la IP de la otra PC). Dejá desmarcado “Archivo local”.

TamañoAncho 1920 y alto 1080 (o la resolución de tu escena). Tiene que coincidir con el lienzo de OBS.

FPSAjustá los FPS al mismo valor que tu escena (por ejemplo 30 o 60).

AceptáLa fuente aparece. Colocala arriba de tus cámaras o video en el orden de fuentes.

Transparente

No hace falta hacer nada más: OBS respeta el fondo transparente de la página. Si ves el fondo negro, revisá que el CSS personalizado no tenga un color de fondo. El valor por defecto de OBS funciona bien:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

Croma

Con la salida en modo croma: clic derecho sobre la fuente → Filtros → Efectos de video (+) → Clave de croma (Chroma Key). Elegí el color correspondiente (verde) y ajustá “Similitud” y “Suavidad” hasta que desaparezca el fondo sin comerse el gráfico.

🖼️

Falta captura: Screenshots/html-obs-croma.pngVentana de filtros de OBS con Clave de croma: color, Similitud y Suavidad.

Gráficos en otra PC: usá la IP de esa PC en la URL (ver La IP de la máquina).
Pantalla en blanco o lenta: probá activar o desactivar la aceleración por hardware del navegador en Ajustes → Avanzado y reiniciá OBS.
Después de un cambio: clic derecho en la fuente → Interactuar, o el botón “Actualizar caché de la página actual” en sus propiedades.
Streamlabs y similares: funcionan igual (fuente “Browser Source”).

Cómo cargar la fuente Navegador en vMix

🖼️

Falta captura: Screenshots/html-vmix-input.pngVentana Add Input de vMix, pestaña Web Browser, con Address, Width 1920 y Height 1080.

Add InputClic en Add Input (abajo a la izquierda) y elegí la pestaña Web Browser.

DirecciónEn Address pegá la URL de Race-G. Si está en otra PC, usá su IP.

ResoluciónConfigurá Width 1920 y Height 1080 (la resolución de tu proyecto) y aceptá con OK.

SuperponéPara ponerlo al aire sobre el video usá los botones Overlay 1-4 del input, o agregalo como capa (Layers) de otro input.

Croma (opcional)Si usás la salida con croma, abrí la configuración del input (engranaje) y activá la opción Chroma Key (sección de color) con el color de la salida.

Tip: El input Web Browser de vMix soporta transparencia, por lo que en modo transparente no necesitás croma. Si cambiás el tamaño del proyecto, actualizá también el tamaño del input. Otros programas: Wirecast (“Web Display”), XSplit (“Web page”) y la mayoría de los programas de transmisión tienen una fuente equivalente.

Problemas frecuentes

Síntoma	Causa probable	Solución
La fuente Navegador se ve en blanco o negro	Race-G cerrado, puerto bloqueado o IP incorrecta	Abrí la URL en un navegador. Revisá la IP, el puerto 5000 y el firewall.
Fondo negro en vez de transparente	CSS personalizado con color, o salida en modo croma	Usá el CSS por defecto de OBS y la salida transparente.
Halos o bordes en el croma	Similitud / suavidad mal ajustadas, o el color de croma está presente en el gráfico	Ajustá el filtro; cambiá el color de croma.
Funciona en la misma PC pero no en otra	Se usó 127.0.0.1, IPs en redes distintas o firewall	Usá la IP de la PC de Race-G, misma red, y permití el puerto 5000.
Dejó de funcionar después de reiniciar	La IP cambió (DHCP)	Reservá la IP en el router o configurá una IP fija.
Imagen con tamaño o posición incorrectos	El ancho y alto de la fuente no coinciden con la escena	Poné 1920×1080 (o la resolución de tu proyecto).

Checklist

Race-G abierto y URL probada en el navegador de la PC de captura.
IP correcta (127.0.0.1 en la misma PC; IP de la red local en otra).
IP fija o reservada, preferentemente por cable de red.
Puerto 5000 permitido en el firewall.
Resolución y FPS de la fuente iguales a los de la escena.
Salida transparente, o croma ajustado sin halos.

Enlaces oficiales

OBS Studio · vMix

¿Querés sacar los gráficos por SDI, HDMI o NDI hacia un switcher? Mirá CasparCG, NDI y placas Blackmagic.