Webcaptioner and Captioning Multiple Sources
Introduction
I created this guide because accessibility is really important for me. Growing up, my family had a lot of friends with various impairments- Hard of Hearing/ Hearing Impairments, Visual Impairments, or limited physical mobility. While I have not experienced any of this for myself, I have been by their sides since I was little, and so learned what kind of things to look for when I thought of them, and how something I experienced would be like for them.
I got into streaming nearly four years ago. From the start, I wanted a way to make my broadcasts not only friendly for hearing impairment, but for those with visual impairments as well. I realize the medium has some limitations, based on what a person may be doing, but I strongly believe captioning, and with both type of impairments and the range they present themselves in to be taken into consideration, to be valuable and worthwhile.
I realize that there are extensions available for people who stream on Twitch to use to caption their broadcasts, and that there are transcription services available for those who want to take the time to caption YouTube videos. But there’s a couple inherent issues when it comes to live broadcasts, and that is a seeming limitation to accessibility. Twitch extensions simply do not allow you to capture audio from more than one source, and as far as I know, there is no such thing for Youtube live, or other streaming platforms.
I am very passionate about Tabletop Roleplaying Games. It was in this space, as a streamer, that I figured out a solution. A way to caption every player in a game, or for a podcaster to caption their guests as well as themselves. It’s taken me some months to figure out how to compile everything together, but here it is: a guide to captioning streams from multiple sources, enabling as many people as possible to enjoy the games you play, the stories you share, and the things you want to talk with your community about.
Webcaptioner first came to my attention via Ashnichrist’s channel. It was fairly new, and initially, you could only use a display capture. The developer, a one-man army, has worked hard to improve it, bringing online the ability to use a link that you can either share with your viewers, or that you can use in broadcasting application as a browser source. They have since expanded into providing an extension on Twitch, and are working on other solutions to streamline the process and make captioning not only something that is easy to set up, but something that people want to implement on their channels. The Share link is just what I had been looking for- a way that I could receive transcribe information from multiple sources, making it possible to caption all the people who participated in Tabletop Roleplaying Games and podcast interviews on my channel.
After some months streamlining the process and working out best practices for setting up captioning in this fashion, I can now say that I have a guide, and I’d like to share it with you.
You will need to open this page in a Chrome browser.
This is what you will see when you first load up the page. To start setup, click either of the blue ‘Start Captioning’ buttons.
This is the next page you will see. It’s empty now, but after you start, it will fill up pretty quickly. For now, click the Menu Icon on the navigation bar. You can find it at the bottom right-hand side of the page.
This is your menu. Clicking the Red trash can icon will erase your current transcript. Clicking the floppy disk icon will save your transcript to Dropbox if you have it connected (more on that later). The middle button, with the copy icon, will copy your entire transcript for you to load into another application.
You may notice a blue button with a toggle switch to the right of the yellow start captioning button. If you don’t, don’t worry- I’ll show you how to enable that feature- this is the feature you need to use captioning if you are sharing it with others.
Once you have the ability to share your captions, this is what the share menu looks like. If you are broadcasting and want multiple outputs, you will need each individual you are captioning to setup captioning on their end, and send you their broadcasting link for you to use in your recording software (I use OBS Studio). I will get more into detail on that later.
Settings
This is the general settings page. Changing these setting affect not only how the captions show up in your broadcasting software, but also how they will initially appear on the viewer link. Here you basic captions behavior, as well as a list of hotkey information.
In order to have access to the viewer share link and the broadcasting link, you will need to navigate to experiments. Initially, it will not show up in your menu. To make it appear, go to https://webcaptioner.com/captioner/settings/experiments . Write in share in the Experiments Name box, then click add. Refresh the page, and that blue box with the toggle button should appear. You may have to restart the browser for this change to take effect.
Appearance is where you can change the font, font size, capitalization options, color, interim color (useful for indicating who is currently speaking when you have multiple sources in your broadcasting software, like for captioned visual podcasts), and background color and opacity. You can also change the alignment and placement of the captions within the page itself.
Finally, we have languages. Selecting the correct dialect is important and will help improve the accuracy of your captioning settings.
Troubleshooting
You’ve got everything set, but it’s not recording what you’re saying. The number one issue when this happens is that either the website is blocked from accessing the microphone, or you have the wrong microphone enabled. Here is how to fix it.
Navigate to settings in your chrome browser. Should be a dropdown menu on the upper right of your window.
These are the base settings you can set up. You’ll need to scroll down to access the Advanced Settings.
Once you have opened the Advanced Settings, navigate to Site Settings, then navigate to Microphone. This should open the dialog for your microphone.
Make sure you have the correct microphone selected. If not, you can change it to the correct one too. Additionally, you can check the allowed site list to see if Webcaptioner has been allowed.
Right click and navigate to ‘Add’. From there, navigate to ‘Browser’.
A couple tips to help improve the quality of Transcriptions:
- Make sure your mic is close to your mouth- 3 to six inches. Further away, and room acoustics will contribute to echo that will confuse the transcription.
- Speak slowly and clearly. The faster you talk, the more errors webcaptioner will have.
- Webcaptioner can punctuate, but only if you name the punctuation. This is best for if you plan on either editing the audio, or simply using captioner to handle transcribing that you will save for later.
Capturing in Broadcast Software
You’ve set up captions for yourself, but now you need to know how to capture it, and how to capture multiple sources.
This can be a bit tricky. There’s a couple factors to keep in mind during this process:
- How many caption sources do you need
- What does your screen economy look like
- Is it also friendly for Visual Impairments
At the end of this chapter I will go over recommendations. For now, let’s get to using Webcaptioner with your broadcasting software. Start by opening your software. For my example, I will be using OBS Studio.
You will start with something similar to this. For my podcast, I only need two captures- one for myself, and one for my guest. This enables me to use a larger font size, and to have the capture area in OBS larger than when I run my TTRPG streams. Here I already have all my standard sources, and captions that I have previously set up. If you're already using OBS, your layout probably looks similar.
Right click and navigate to ‘Add’. From there, navigate to ‘Browser’.
This will open a dialog box where you can name the source. Keep it simple- I have captions and Guest Captions for mine. Click ‘OK’.
You now have this box. Input the broadcasting URL that you copied from Webcaptioner here. If you are trying to capture secondary audio (such as your guest) you will need them to share their broadcasting link with.you when setting up the capture for their captions. You can designate the height and width of the box, and depending on the settings you have in Webcaptioner, it will adjust to the new output size. Click ‘OK’.
Your capture box will appear where you initially clicked. Drag it to the position you want it in. You can turn it off by clicking the eye under scenes next to the name of the source, or keep it where you’ve placed it by clicking the padlock icon so that it is solid black.
Repeat the process for each caption source you need.
Here is what mine looks like in use. You can tell who is talking because the interim text is a separate color, and it is clear and easy to read.
Recommendations
Some best practices when using Webcaptioner:
For single person captures, keep the capture box in the bottom right hand corner of your screen. This makes it easier for those who are Hearing Impaired to read both the captions, and keep up with chat. Interim text is still useful to help keep awareness of when you are actively speaking. It is best to have the text set to white, and the interim text set to yellow, against a black background. This provides the highest contrast, and limits the number of people who are unable to follow along due to vision impairment at the same time. You can set the opacity of the background in webcaptioner, but it is best to keep it at 70% or higher.
For regular broadcasts, I set my captioning parameters to 500px wide by 30px tall, and overlay the bottom portion of my webcam. This creates good screen economy by not taking up any extra space. It is my personal preference to have my webcam in the bottom right hand corner of my capture space when I do not have multiple cams on.
For Broadcasts with multiple people involved, it is best to place caption boxes centered below the corresponding participant. Interim text here is super important as it helps identify who is talking. For these types of broadcasts, you may have to adjust the text setting in Webcaptioner, as well as the width and height of the Browser Source in your broadcasting software. For five player captures, I place my Browser Sources at 700px x 90 px, with a text size of 2 em in Webcaptioner. For more than five participants, I suggest a text size of 1 em to protect screen economy. Following are a few examples of other captioning set ups.
Support
Vanity Links are now available through Webcaptioner's Patreon! These links never expire, making the process of setting up streams with recurring guests simple, and cutting down the amount of time spent inputting new information at the beginning of streams quite a bit. I highly encourage you to support their Patreon for this feature alone. They are also working on being able to integrate multiple caption feeds into one source. You can find their Patreon at https://www.patreon.com/webcaptioner.
Webcaptioner is a one person project. It takes a lot to do the work that they have put in on this and keep it running smoothly, and if you could support them in this, it would make it easier for them to make even more cool things possible- like support for other browsers, longer periods before links time out, and other projects. You can support them by clicking the donate button below!
Feedback
Have questions or constructive criticism on how I could improve this article? Feel free to reach out to me either by email at rpgunltd@gmail.com or use the form below!