Step 1: Start Web Captioner
Open a new tab in Google Chrome and go to https://webcaptioner.com/captioner. Click Start Captioning in the corner.
Captions will appear on the page when you speak.
By default, Web Captioner will listen to the default microphone on your computer, but you can make it listen to a different microphone.
Step 2: Open a new Web Captioner window
Open the menu in the bottom right and select New Window. Resize the new window so that it's always visible somewhere on your screen and it won't be covered by another program.
An extra monitor might make this easier
OBS might not capture the window properly if it gets covered by another program. If you use more than one display, you might want to move the window off to your secondary display.
Step 3: Add Web Captioner as a source in OBS
In the OBS source list, click the plus button, and select "Window Capture". Name it something descriptive like "Captions". Click OK.
In the Window list, select "[Google Chrome] Captions (Windowed)". Click OK.
If the Google Chrome window you're capturing appears black in OBS, you might need to temporarily disable hardware acceleration in Google Chrome in order to allow OBS to capture the window. Open Chrome settings, search for "hardware acceleration," disable the "Use hardware acceleration when available" setting, and then relaunch Chrome.
Step 4: Crop and position the caption source in OBS
Select the caption source in OBS. Drag the red grab handles in the corners to resize it. Hold down Alt while dragging a red grab handle on a side to crop out the window title and edges. Position the source where you want it in your live video.
Or, crop using a filter
Alternatively, you can crop the source by right clicking on it in the sources list, selecting "Filters", clicking the + button, adding a "Crop/Pad" filter, and changing the left/top/right/bottom settings.
You now have captions running in OBS Studio.