Add Live Streaming Captioning

This tutorial is for users wishing to integrate Shabad OS captions with their live stream software. This tutorial shows how to add a browser to popular live streaming applications.

Concept

Shabad OS provides an Overlay URL which displays parts of the currently activated line. To show this on a livestream, one has to add a browser element to the livestream program/software and point it to the aforementioned URL. For more information on setting up the Overlay, please see how to Get started with Overlays. This tutorial will show how to integrate the Shabad OS Overlay with popular livestream softwares.

Practical

Step 1: Find the Overlay URL for Shabad OS

Copying this should be as easy as clicking the Overlay URL in Shabad OS > Settings > Overlay. If there is no URL there, please read URL Endpoints.

settings overlay url
Figure 1. Find the Overlay URL in Settings

Step 2: Configure the Livestream Software

Add a browser, point it to the Overlay URL, and size it to match the live stream resolution.

For clear and crisp fonts, match the browser size to the resolution of the live stream. Avoid zooming or resizing the browser element to incorrect proportions.
Any software which allows adding a browser URL will work. Popular applications like OBS Studio, vMix, and Wirecast can work. See Examples below.

Examples

List of Examples

OBS Studio

  1. Add a browser to OBS Studio’s scene by clicking the "+" button in Sources. For ease of use we recommend naming this source "Shabad OS Captions" instead of simply "Browser".

  2. Focus on the URL, Width, Height, and Custom CSS fields.

    1. URL should be the URL from Step 1.

    2. Width and Height should match the Base Canvas Resolution found in Settings > Video (e.g. 1920x1080 would mean 1920 for the width and 1080 for the height).

    3. Custom CSS should be empty.

OBS Studio
Figure 2. Adding a browser source to OBS Studio

vMix

  1. Add a web browser input to vMix’s mixer by clicking Add Input > More > Web Browser.

  2. Focus on the URL, Width, and Height fields.

    1. URL should be the URL from Step 1.

    2. Width and Height should match the Output Size found in Settings > Display (e.g. 1920x1080 would mean 1920 for the width and 1080 for the height).

vMix
Figure 3. Adding a browser source to vMix

Wirecast

  1. Add a web page shot layer to Wirecast’s master layer. There may be a prompt to install Flash, which can be ignored as Shabad OS does not require it.

vMix
Figure 4. Adding a web page shot layer to Wirecast
  1. Set the name to something familiar (e.g. "Shabad OS Overlay").

  2. Focus on the Address, Video Width, and Video Height fields.

    1. Address should be the URL from Step 1.

    2. Video Width and Video Height should match the Canvas Size found in Output > Canvas Size (e.g. "Auto (1280x720)" would mean 1280 for the width and 720 for the height).

vMix
Figure 5. Configuring the Source Properties in Wirecast
  1. Set scale of the shot layer to 100%.

vMix
Figure 6. 100% Scale used for the Shot Layer Properties in Wirecast