# NDI / Alpha Workflow

## Best workflow: browser source with transparent alpha

Use `output.php` as a browser source in OBS or vMix at `1920x1080`.

Settings to verify:

- Browser source background must stay transparent.
- Do not add a solid background color.
- Use hardware acceleration where stable.
- Keep frame rate at 30 fps or 60 fps depending on the show.
- Route the result to Program through OBS/vMix, then to NDI/HDMI/SDI.

## NDI with alpha

If your NDI sender supports alpha, send the OBS/vMix output as NDI with alpha. This gives the cleanest overlay path.

Recommended route:

`Itahuka output.php -> OBS/vMix Browser Source -> NDI output with alpha -> receiving production device`

## Key/fill fallback

Some systems do not preserve browser alpha over NDI. Use two outputs:

- Fill: `https://yourdomain.com/graphics/output.php`
- Key: `https://yourdomain.com/graphics/output.php?key=1`

The key output renders a white matte on black. Feed Fill and Key as two channels into a production system that supports key/fill compositing.

## Yolobox / TopDirector note

If the device cannot ingest transparent browser overlays directly, use a PC as the overlay compositor:

`Overlay Browser Source -> OBS/vMix -> HDMI/NDI -> Yolobox/TopDirector`

This is more reliable than trying to force a mobile production device to interpret web transparency.