Streaming with Captions with Web Captioner Setup Guide
(Created by @SasiahHochle and @ChrisKewlTV)
Products Used:
Web Captioner: https://webcaptioner.com/
Chrome: https://www.google.com/chrome/ (Recommended for best performance)
Chromium: https://chromium.woolyss.com/ (For more information, go to https://www.chromium.org)
Streaming Software:
OBS Studio: http://obsproject.com/ (Completed)
SLOBS: https://streamlabs.com (Completed)
X-Split: https://www.xsplit.com/ (Under Quick Start Guide)
This guide is with the assumption that you already have your preferred streaming software already installed. Also, two different types of browsers will be needed. The reason being is that the Web Captioner will be devoted and if you use two same types of browser, the streaming software will capture the one that is in use and you do not want that, especially if you are using SLOBS or on your dashboard keeping track of your chat. We will be using multiple streaming softwares such as OBS Studio for our first example here. Note: You can use this no problem on one monitor. Two monitors is not required.
If you have any questions or wanted to share tips regarding how to set-up on your streaming software, check the FAQ first. If the FAQ does not help you, please feel free to contact us on Twitter at @SasiahHochle, @ChrisKewlTV, or @Snugibun. If you are encountering problems with Web Captioner, contact them at @WebCaptioner. We’ll add common questions to this section once we have more feedback.
Quick Start Guide
Tip: Do not minimize the captioning browser otherwise it will stop working on the browser.
Tip: Consistency is the key in regards to location and style!
- Open your Stream Broadcaster Software
- Open two Chrome browsers: One set to your platform. The other one in incognito mode directed to WebCaptioner.
- Set up your stream broadcasting layout to reflect WebCaptioner via Browser Source.
- Congratulations, you’re set to stream using captions!
More resources:
Web Captioner Help Center- (https://webcaptioner.com/help/)
Description: Web Captioner has a help center full of information on FAQs as well as video instructions for integrating captions with multiple softwares.
Snugibun’s Captioning Glossary (https://bit.ly/2ycl6mP)
Description: Snugibun’s Captioning Glossary is a helpful guide on how to set up captions appropriately which includes videos and helpful links. It also has a list of Deaf streamers as well as Hearing streamers who uses captions.
BEFORE YOU START
- Open your regular Chrome browser. Click on the vertical 3 dots and go to Settings.
- Scroll all the way down and click on advanced.
- Under System, click on the slider by Use hardware acceleration when available. It should go gray when you turn it off and a relaunch prompt will appear. Click Relaunch. You’re all set! Make sure the slider is gray after relaunching. This photo example is after it relaunched.
Using the Chrome Browser
Using OBS Studio
Part 1: Setting up Chrome with Web Captioner
Open an Incognito Browser by pressing the 3 vertical dots on your Chrome Browser. That will be Browser B while the main Chrome will be Browser A.
Browser A will be devoted to your streaming dashboard. Browser B will be devoted to WebCaptioner.
b.) Go to https://webcaptioner.com/captioner on your incognito browser.
Since I have two monitors, the left side is Browser B. The right side is Browser A. See the difference? Incognito is dark while a regular Chrome Browser is light. You can resize B to any size (after minimizing the window) or put it in the background. The important thing is that the OBS Studio can pick this up.
Hit the + under Sources and select Window Capture.
Put down Web Captioner (or other names if you want) since you don’t want to mistake other browsers for captioning.
Select the browser titled “Web Captioner”. That is your Browser B. Hit OK.
Select “Window title must match” and click OK.
Hold ALT and click on the middle red dots to cut unnecessary areas. Most people using captions prefer to use 2 lines. Also, go to the Web Captioner’s settings on Browser B and play with the text size, alignment, background color, opacity, and more to your satisfaction. Then when you are ready, go to your Browser B and click “Start Captioning” and enjoy!
Using X-Split
WebCaptioner has taken the time to do the XSplit guide. A big thank you to them! The link can be found here: https://webcaptioner.com/help/integrations/add-captions-in-xsplit-broadcaster/ (A printed version is in progress.)
Using SLOBS (Streamlabs OBS)
Click on + by Sources.
Click on Window Capture then click on Add Source on the bottom right.
Enter the name of your Captioning Browser. For this, I used “Web Captioner”. Click on Add New Source.
Select Web Captioner - Google Chrome. That is the incognito browser. For Window Match Priority - select “Window title must match”. Click Done.
Hold ALT and click on the middle red dots to cut unnecessary areas. Most people using captions prefer to use 2 lines. Also, go to the Web Captioner’s settings on Browser B and play with the text size, alignment, background color, opacity, and more to your satisfaction. Then when you are ready, go to your Browser B and click “Start Captioning” and enjoy!
Using the Chromium Browser
Using OBS Studio
Part 1: Setting up Chromium with Web Captioner
1) Open up Chromium (or your browser of your choice for captioning) and go to the Web Captioner link. If you are using Chromium, click on the vertical 3 dots on top right of the window and select Settings.
2) Scroll down, click on Advanced and continue to scroll down until you see the System section. Disable “Use hardware acceleration when available.” Click “Relaunch”. This part is important otherwise the captions will not be visible on your streaming platform.
Part 2: Setting up OBS with Chromium
1) Click on + under Sources and select Window Capture.
.
2) Name your Window Capture. I did “Chromium Capture” on mine. Click OK
3) Click on Window and a dropdown will appear. Select [chrome.exe]: Web Captioner - Chromium
.
4) Now click on Window Match Priority dropdown menu. Select “Window title must match”. Click OK.
5) This should look like the photo below:
6) Hold ALT (on your keyboard) and click on the red circles on the sides you want to cut and move the sides to your desire while holding the ALT. The sides will turn green after you are done.
Reposition to your heart’s desire and enjoy! I personally like the two lines just like it’s shown on TV. Go to the Web Captioner’s settings and play with the text size, alignment, background color, opacity, and more to your satisfaction.
Watching Videos with Web Captioner Setup Guide
Products Used:
Web Captioner: https://webcaptioner.com/captioner
VB_Audio Software: https://www.vb-audio.com/
The VB-CABLE Virtual Audio Device is needed to be successful for listening to the streams or videos on your computer instead of relying on an external input.
1) Go to their website and click on Audio Apps.
2) Select the Virtual Audio Cable tab and click on the orange Download button. Run the zip application when the download completes. Extract to your folder and open VBCABLE_Setup_x64.
3) After the installation is done, right click on the Sound icon on the taskbar and select “Open Sound settings”.
4) Select the dropdown below Input.
5) Select CABLE Input (VB-Audio Virtual Cable)
6) Open your browser. Two browser windows will be required. One should be at the Web Captioner site and one should be at your streaming channel of choice. Mine is Bob Ross just to show an example.
Frequently Asked Questions
Q) The Web Captioner website has a ‘403 Forbidden’ when I try to go to their site.
A) Contact Web Captioner on their website or their Twitter to fix the issue. Prepare to give your external IP address.
Q) I tried to use another browser besides Chrome or Chromium and it didn’t work.
A) Web Captioner was initially designed for Chrome-based browsers, so other browsers may not work. Please try to use Chrome
(recommended) or Chromium.
Q) Web Captioner keeps saying my name wrong.
A) If you use a phrase commonly and it keeps getting mistaken for another word, go into Web Captioner settings and choose “Word Replacements”.
Q) Help, my Web Captioner keeps crashing!
A) This is possibly a RAM issue, try rebooting your PC before your stream. Limit how many tabs you have open at one time.
Q) Can I use Chrome for both streaming dashboard and Web Captioner since Chromium seems not to be working correctly i.e. crashing?
A) Yes! For the best stability and performance, it is recommended that you use Chrome. For captioning, use Chrome Incognito (title
must match) for WebCaptioner to avoid your streaming software being confused on which browser to use.
Q) The captions are not showing up on my streaming platform (OBS / X-Split / SLOBS) - I need help.
A) Yes! It’s included in the instructions. Scroll up to the part where it says, “BEFORE YOU START” on page 3. Originally those instructions
were within the “Using the Chromium Browser” instruction part but people keep missing that so the instruction is now at the start.
Q) Are there more help resources for Web Captioner that this FAQ did not cover?
A) Yes! You can find more resources at https://webcaptioner.com/help/ and if you didn’t find anything there, please contact them.
You’re all set! Enjoy. If you have any questions or wanted to share tips regarding how to set-up on your streaming software, contact us on Twitter at @SasiahHochle, @ChrisKewlTV, or @Snugibun. If you are encountering problems with Web Captioner, contact them at @WebCaptioner. We’ll add common questions to this section once we have more.
Started: 7/15/2018
Revised: 10/17/2018