How to Add Subtitles to OBS Using Browser Source (No Plugins)

OBS has a built-in caption feature under Tools → Captions, and there are several older plugins (like obs-websocket-caption-reporter) that attempt to add subtitle functionality. Here's why the browser source approach wins:

• No plugin compatibility issues — OBS plugins break on version updates. A browser source URL works regardless of your OBS version.
• No local software to maintain — Plugins need to be updated, reconfigured, and sometimes reinstalled. A browser source just works.
• Full visual control — You can style subtitles exactly how you want them. Custom fonts, colors, backgrounds, animation — it's all CSS.
• Translation support — No OBS plugin offers real-time translation. Browser source tools like StreamTranslate do.
• Works on Windows, Mac, and Linux — OBS's browser source is cross-platform. Many caption plugins are Windows-only.

1. Create your StreamTranslate account Go to streamtranslate.live and sign up. The free tier gives you access to live captions and translation overlays immediately — card required for the Free Plan; no payment unless you upgrade.
2. Set up your caption overlay In the StreamTranslate dashboard, click "New Overlay". You'll be prompted to:
   • Select your microphone language (e.g., English)
   • Choose a target translation language (optional — leave blank for captions only)
   • Customize font size, text color, background opacity, and position
   💡 You can always change these settings later — the URL stays the same.
3. Copy your overlay URL After saving your overlay settings, StreamTranslate generates a unique URL for your overlay. It looks something like:
   https://overlay.streamtranslate.live/o/abc123xyz
   Copy this URL — you'll paste it into OBS in the next step.
4. Open OBS and go to your scene Launch OBS Studio. In the Sources panel at the bottom of the screen, make sure you're in the scene where you want captions to appear (usually your main streaming scene).
5. Add a Browser Source Click the + button in the Sources panel. Select Browser from the list. Name it something like "StreamTranslate Captions" and click OK.
   🖥️

   OBS Sources panel → + → Browser
   The "Create/Select Source" dialog will appear. Choose "Create new" and name your source.
6. Configure the browser source settings In the Browser Source properties window, enter these settings:

   Setting	Value
   URL	Paste your StreamTranslate overlay URL
   Width	1920
   Height	1080
   Use custom frame rate	Unchecked
   Shutdown source when not visible	Checked
   Refresh browser when scene becomes active	Checked
   Control audio via OBS	Unchecked

   Click OK to add the source.
7. Position the subtitle overlay Your new browser source will appear in the OBS preview. The StreamTranslate overlay is transparent — you'll only see the text area. Drag it to the bottom of your scene (or wherever you want captions to appear). You can also right-click the source and choose Transform → Edit Transform for precise positioning.
   📐

   OBS Canvas — position the browser source
   The overlay is transparent. Drag to position at the bottom of your stream canvas. Captions will appear here in real time.
8. Grant microphone access (first time only) The first time the browser source loads, you may see a permissions prompt in OBS asking for microphone access. This is StreamTranslate requesting access to your audio. Click Allow — without this, the transcription won't work.
   ⚠️ If you don't see the prompt, right-click the source → Interact, and look for any permission dialogs in the embedded browser window.
9. Test before going live Start your stream (or use a test recording). Speak normally into your microphone. Within 1”“2 seconds, you should see your words appear as subtitles on the OBS canvas. If translation is enabled, the translated text will appear alongside or below the original.
10. Go live That's it. Every time you stream, the browser source loads automatically and captions appear in real time. No manual activation, no extra steps — just talk and stream.

StreamTranslate gives you full control over how your captions look. From your dashboard, you can adjust:

• Font size — scale up for easier readability across different screen sizes
• Text color — white works well on most backgrounds; yellow is high-contrast
• Background — semi-transparent dark background behind text improves readability over bright gameplay footage
• Position — top or bottom of screen, horizontal alignment
• Language display — show original language, translated language, or both stacked

Changes take effect the next time the browser source refreshes — which happens automatically when your scene becomes active, or you can force it by right-clicking and selecting Refresh.