Skip to main content

How to Overlay SyncWords Roll Up Captions onto your Livestream using OBS Studio

Updated

Please follow the steps below to overlay SyncWords Roll up captions on to your live stream using OBS

 

Step 1 - Create your Event

Create your event in SyncWords Live and grab the Roll up Captions url

 

 

Step 2 - Add Captions to your Livestream using OBS Studio

To add the captions to your livestream using OBS Studio you will need to configure your Roll up captions page. You can see a full list of configuration options on our Roll Up Captions help center page.

1. Configure the background color of the roll up captions page to a chroma key green or blue. To do this, add the configuration "bg_color=(insert color hex value without the pound(#) sign here)" to the Roll Up Captions URL. E.g.: https://live2.syncwords.com/u-demo?bg_color=04f404

NOTE: You can use the hex code for chroma key green like #04F404, #00FF00, #00FF11, #00FF22, #00FF33, #00FF44, #00B140, etc. or chroma key blue like #0047BB, #0033CC, #150DF7, #0080FF80, etc. for the background.

2. Navigate to the Sources panel in OBS Studio. Select the + button in the bottom left and click on Browser. In the modal that pops up, enter the configured Roll Up Captions URL in the URL field. Ensure the custom CSS has body { background-color: rgba(0, 0, 0, 0) in it.

 

3. You should now see a transparent page that you can overlay onto your livestream. When captions are generated, they will appear on the top left of the page.

4. Adjust the size and position of the captions by adjusting the bounding box on OBS Studio.

NOTE: Make sure the Browser Source with the Roll Up caption url in it is set to visible and is on top of your media source.

Related articles