Live Translation in OBS & vMix

How it works

StartSync's Live Translation module generates a Display URL that shows real-time translated subtitles in a browser window. This URL supports transparent background, which means you can layer it on top of any video source as an overlay.

Both OBS Studio and vMix can load web pages as input sources. The subtitles will render with alpha transparency, appearing directly over your camera, presentation, or any other source.

You get the Display URL from the Translation Control page by clicking "Open Display (OBS / vMix)". Copy the URL from the browser tab that opens.

Before you start

Make sure these settings are configured in the Translation Control page before adding the URL to OBS or vMix:

Open the Display Settings card in the sidebar.
Set Background to "Transparent (alpha)" for overlay use. If you want subtitles on a dedicated screen, pick a solid background instead.
Set Position: "Bottom" for classic TV-style subtitles, "Top" for a news-style lower third inverted, or "Center" for a dedicated translation display.
Set Font Size to 48-64px for 1080p output. For 4K, use 72-96px.
Choose Mode: "Subtitle" for one phrase at a time (appears/disappears), or "Scrolling" for a running transcript that accumulates lines.
Set Max Lines to control how many lines are visible (1-3 for overlay, up to 10 for scrolling on a dedicated screen).

Setup in OBS Studio

Step 1 - Get the Display URL

Open the Translation Control page in StartSync.
In the sidebar, expand "Display Links".
Click "Open Display (OBS / vMix)". A new tab opens with the Display page.
Copy the full URL from the browser's address bar. It looks like: https://startsync.app/translation/display?room=room-xxxx

Step 2 - Add Browser Source in OBS

In OBS, go to the Sources panel and click + (Add).
Select "Browser" and give it a name (e.g., "Live Subtitles").
Paste the Display URL in the URL field.
Set Width to 1920 and Height to 1080 (match your output resolution).
Scroll down to "Custom CSS" and replace the default content with:

body { background: transparent !important; }

Click OK.
Position the source: drag and resize it over your scene. For bottom subtitles, stretch it to full width at the bottom of your canvas.
Right-click the source, go to Transform → Edit Transform to set exact position if needed.

Tips for OBS

The browser source renders with alpha transparency. Transparent background from StartSync displays directly.
If subtitles look too small, increase Font Size in the Translation Control page settings rather than scaling the OBS source.
To refresh the browser source (e.g., after changing settings), right-click the source → Properties → click "Refresh cache".
Works with OBS 28+ on Windows, macOS, and Linux.

Setup in vMix

Step 1 - Get the Display URL

Open the Translation Control page in StartSync.
In the sidebar, expand "Display Links".
Click "Open Display (OBS / vMix)". A new tab opens.
Copy the full URL from the address bar.

Step 2 - Add Web Browser Input in vMix

In vMix, click "Add Input" at the bottom left.
Select "More" → "Web Browser".
Paste the Display URL in the URL field.
Set Width to 1920 and Height to 1080 (match your output resolution).
In the CSS field, paste:

body { background: transparent !important; }

Leave Browser Version as default. You can keep Disable GPU Acceleration unchecked.
Click OK.

Step 3 - Use as Overlay

The web browser input appears in your input list at the bottom of the screen.
On the input, you will see small numbered buttons (1, 2, 3, 4) — these are the Overlay channels.
Click 1 (or any free overlay number). The subtitles will immediately appear transparent on top of your Program output.
To adjust subtitle position, change Position in StartSync's Display Settings (Top / Center / Bottom) rather than moving the input in vMix.

Tips for vMix

The CSS field is what enables alpha transparency. Without it, you will see a black or white background behind the subtitles.
If you change settings in the Translation Control page, the overlay updates in real-time. No need to refresh.
To edit the input later, right-click on the input → Properties (or double-click it) to access URL, resolution, and CSS fields again.
For best performance, set the Web Browser input resolution to match your output (1080p or 4K, not higher).
You can use the same URL in multiple vMix instances if you have a multi-machine setup.
Works with vMix HD, 4K, and Pro editions.

Recommended settings

Setting	Overlay (1080p)	Overlay (4K)	Dedicated Screen
Background	Transparent	Transparent	Solid black or dark
Font Size	48-64px	72-96px	48-80px
Position	Bottom	Bottom	Center
Mode	Subtitle	Subtitle	Scrolling
Max Lines	2	2	5-10
Text Color	White	White	White

Troubleshooting

Subtitles not appearing

Make sure a translation session is active (click "Start Translation" in the Control page).
Verify the URL is correct and includes the ?room= parameter.
Check in a regular browser tab first. If subtitles appear there but not in OBS/vMix, the URL is correct but the source needs to be refreshed.

Background not transparent

In StartSync, confirm Display Settings → Background is set to "Transparent (alpha)".
In OBS, make sure the Custom CSS field contains: body { background: transparent !important; }
In vMix, make sure the CSS field contains: body { background: transparent !important; } — this is what enables alpha transparency.
If you forgot the CSS, double-click the input (or right-click → Properties) to edit it.

Text too small or too large

Adjust the Font Size in StartSync's Display Settings. Do not scale the OBS/vMix source to change text size.
For 1080p, 48-64px works well. For 4K, use 72-96px.

Subtitles lagging behind speech

This is normal. Speech recognition and translation add 1-3 seconds of latency.
Use "Subtitle" mode for the lowest perceived latency (one phrase at a time).
If the stream itself has additional delay (e.g., encoder latency), the subtitles may actually appear slightly ahead of the audio. In that case, add a small delay to the browser source in OBS (Filters → Render Delay).