DEV Community: Rachael Wright-Munn

Relicans Summer Camp Week 2: Open Source Week

Rachael Wright-Munn — Tue, 13 Jul 2021 21:25:18 +0000

🏕 Challenge: Submit an open source PR to a repo that you do not own and have it reviewed or commented on by the maintainer.

Why open source?

Open source is a fantastic way to connect with other developers, work on interesting projects, build your portfolio or your library of examples, and learn new skills! In our work lives, we're often told what to build and which tech stack to use. With open source contributions, you can explore an exciting new tech stack and build what you want to see in the world!

How do I find an issue?

Issues are tickets in GitHub that describe a bug, or feature. Open ones haven't been fixed. They're used to track work.

You can find issues by searching GitHub for issues labeled "Good First Issue" or check out sites like Good First Issue and Code Triage. If you are looking at a project on GitHub, you can check to see if it has any good first issues by going to the /contribute URL for the project. For example, if you were looking at the New Relic Ruby Agent repository (https://github.com/newrelic/newrelic-ruby-agent), you could then go to its contribute page here: https://github.com/newrelic/newrelic-ruby-agent/contribute and it will tell you if there are any good first issues waiting to be tackled.

You want to look for issues that are well-scoped, small, and include reproduction steps. Anything with screenshots is going to be a lot easier to solve. You'll be in an unfamiliar codebase, so there's no reason to make your first PR an ambitious one! Extensions to existing features and bugs are great choices and a huge help!

Did you know that theRelicans.com and dev.to are run on an open source platform called Forem? If you can't find a project you like, you could always start there!

How do I claim an issue to work on?

Step 1. Read their contributing guide.

Most open source repositories store their contributing guide in CONTRIBUTING.md or README.md. This is where you'll find information about coding standards, how to set up the codebase, and their issue/review process. Sometimes this guide will link to documentation on the tool, like in Forem's case, or they could require you to sign a waiver.

Step 2. Comment on the issue.

Let the maintainer and other contributors know that you're working on the issue and how you plan to solve it. If you have any questions about the issue or how they'd like it solved, this is a great time to ask.

A maintainer is responsible for merging items into the codebase and releasing new versions. A contributor creates some value for the codebase, through code, documentation, or issues.

How do I set up the codebase locally?

Step 1. Fork the Repository.

A forked repository is a personal copy of a codebase. It only updates when you update it, and you can make as many changes as you want without impacting the upstream repository.

In the upper right of the repo page on GitHub, there is a Fork button.

Click that, and it will walk you through forking your own copy of the repository.

Step 2. Clone the repository locally.

Use git clone <the git url> on your machine to clone the repository locally. This url should be for your forked version of the repository.

Step 3. Set up any dependencies.

Most projects have documentation, often right in their README.md, that provides instructions on how to set up that particular project. It is often in the Development or Contributing section at the bottom of the README.md, or in the separate CONTRIBUTING.md file. It's a good idea to check if they have a docker or vagrant setup. If they do, you can quickly setup the repo without installing the dependencies on your computer, and you can discard the dev environment when you're done working with it.

How do I solve the problem?

Open source is a little different from other work projects, because you're being introduced to the codebase for the first time, and the issues are created by volunteers. The issues sometimes aren't verified, and far less detailed than what a good PM writes.

Step 1. Start the app and run the tests.

The contributing guide from earlier should've told you how to run the application, and run the tests. This is your first hurdle! Once you can start the app and run the tests, you can say your dev environment is successfully set up. Some frameworks, like Rails, don't have an app to start up. That's okay! Just make sure you can run all the test cases, and can confidently verify your changes.

Step 2. Reproduce the issue

Don't make a single change until you've reproduced the issue or original functionality described in the issue! Open source issues are often fixed in other PRs, fall out of date, or are insufficiently described. If you're unable to reproduce the issue, it's time to leave a comment on the issue, and pick up a new one.

Step 3. Make your changes.

This is the part you're good at! Write some tests, make some changes, and follow any style guidelines. And yes, definitely write the tests. Most projects won't accept a PR that doesn't have appropriate tests. They will remind you if you forget to include them, but it's better if you make test writing a regular part of how you work on and deliver PRs. Good tests are always appreciated!

Create the PR

A PR is shorthand for a Pull Request. Maintainers can "pull" code contained in a Pull Request into their repository.

Step 1. Push your changes to your Forked Repository.

Create a new branch (if you haven't already) using git branch -b <name of branch> then push that to your forked repository using git push.

If you git push and see the following error. You are probably trying to push to the parent instead of your forked repo.

ERROR: Permission to <parent repo> denied to <user>.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Step 2. Create a PR.

After pushing your code to your fork on GitHub, if you look at the branch page in GitHub, you will see a Contribute link. This will walk you through creating a pull request. There'll also be a link in the git cli the first time you push to that branch.

Your pull request should describe the issue you are solving, and the changes that you made. Screenshots of any changes are greatly appreciated. You should also link the issue in your PR, (closes #1234). This will automatically close the issue when your PR merges.

Step 3. Point your PR to their main branch on their repo.

This is a matter of selecting the right branches from the dropdown boxes in the form that you are presented with. It should look similar to this:

Most repos use this method, but if the contributing guide says otherwise, follow the contributing guide.

How do I get my PR merged?

Maintainers of large repos are busy folks, and sometimes a PR can go ignored for days, or weeks. Sometimes you get a review in hours. Every repo varies, and it's a good idea to practice patience, and respond quickly to change requests. The contributing guide should tell you what's okay, and if they include a code of conduct, follow it at all times. You're asking someone to include your work in their group project. If it's your first time in a repo, they will probably want changes. But once it merges, be proud! You've helped contribute to making open source a better place, and hopefully learned something during the process!

Next Steps

Wow! Hopefully, you learned a lot about contributing to open source from this blog post. If you have any questions, feel free to ask them in the comments, or we'll be hosting a live workshop 7/13 at 17:00 UTC! When you make your first open source contribution, link the PR in the comments here and post under #RelicansSummerCamp to get your camp badge! We're really excited to see what you do!

The Invisible Zoom Streaming method

Rachael Wright-Munn — Mon, 21 Jun 2021 17:28:20 +0000

Your stream guests know and love zoom, but it doesn’t look very professional to just share a zoom window on your stream. This technique will allow for easily adding guests and sharing screens, without cropping zoom windows.

Hide Zoom

1. Join the zoom call with your camera

The first step is joining a zoom call. You must use the desktop application to follow the rest of these steps. Your video feed will run through zoom. This is much easier, and your guests will see you.

2. Add zoom to OBS

Create a window capture in OBS, and select your zoom window. Exclude the cursor, and only capture the client area to remove any application window styling.

3. Unmirror your video

Inside zoom, your video will display mirrored by default. This only inverts your image on your zoom instance. Now that we’re sharing that instance with the world, you want to unmirror it so text displays normally. Under video settings, ensure “Mirror my Image” is unchecked.

Optional: Slide “Touch up my appearance” all the way into “turn my bags into smokey eyes” territory. No foundation? No problem!

4. Share your visible guests

You can hide everyone who has chosen not to share their video by checking hide non-video participants. This makes it easy to cue up guest changes, and also have a hidden producer running the show. If you have multiple guests, having a producer who can pass messages like “5 minutes left” or communicate with the next guest via zoom chat is really helpful.

While you’re here, optionally uncheck “Always display participant names on their video.

5. Hide the rest of the zoom UI

Uncheck “Always show meeting controls” to have the option of hiding zoom’s buttons.

Alt will cycle through displaying the zoom UI, showing participant names, and hiding everything. If you want to crop zoom’s UI out, that also works. Note that hovering over the zoom UI area will bring it back, so keep your cursor above the bottom third.

Your Zoom window in OBS should look like this.

6. Hide Zoom in OBS

Chromakey works by removing everything of one color. Normally, that color is green, but we can make it Zoom Grey. Chromakey also adds a little variability to catch green shadows, but we can strip all that range out, because zoom doesn’t have lighting or shadows. Add a filter to the Zoom window source in OBS. Use a color key with a custom color of 1a1a1a, and set the similarity and smoothness all the way down to 1.

Place an image beneath the zoom window in OBS, and now you’ve got a pretty great looking setup!

Screenshare in Zoom

All of this is good, but we need screensharing for the real magic of zoom to activate. Don’t worry, we won’t have separate windows and captures. Seamless transitions from a conversation to presentation.

Keep screenshare in one window

By default, when someone shares their screen, Zoom goes full-screen, and moves audience video into a second window, but you can set zoom to share a screen within the current view.

Turn on side-by-side view.

Your presentation will be on the left and your guests can be added and drop on the right!

Now there’s a great looking zoom presentation on an image background. You can sub in speakers without issue, and people can swap between presentations!

Flaws

You cannot screenshare while producing. It will change your whole view. A secondary computer or your guest can screenshare.

Zoom does not resize windows automatically. You will need to adjust the zoom level if the user’s screen is very large or very small.

Don’t forget audio!

Audio is a whole different challenge. When you capture audio from zoom, you will get everyone else’s audio, but not your own. Zoom doesn’t play your own audio back to you. There are two ways to handle this.

Have a producer who’s responsible for communicating with guests, and streaming the zoom, but doesn’t appear on-screen. This has the added benefit of giving you a moderator who’s focused on chat and production.
Stitch your audio together using loopback, voicemeeter, or two audio inputs in OBS. If you use two audio inputs in OBS, then you will have issues captioning, because all captioning plugins that I know of use one audio input as the source.

Summary

This isn’t the greatest and most technically proficient guest setup that has ever existed, but it is a robust, easy solution that uses technology your guests are confident in. It’s a great option for panels or small-scale live conferences and meetups. Let me know if you try this out, or come up with ways to deal with those flaws above!

Sadistic Self-Care Survival Game

Rachael Wright-Munn — Thu, 03 Jun 2021 15:59:59 +0000

Your body has been kind to you. It has tolerated your dehydration, exhaustion, hunger, and lack of exercise without complaint for YEARS. That ends today. This game built using the DragonRuby framework will remind you how generous your body has been with its mistreatment.

This blog post was a companion guide to a Twitch stream on 4/16 at 1500 UTC. The game is now free to play at Itch.io!

Let’s start with the tools. DragonRuby is a game framework built on the Ruby specification. We’ll be joined by one of the creators of that framework, Amir Rajan! It focuses on 2D game design, and the entire game state is stored in an object called args. It supports PC, Mac, Linux, Raspberry Pi, Web (wasm)iOS, Android, Nintendo Switch, XBOX One, and PS4. Let’s target this one at a web release!

NOW IT’S TIME FOR THE GAME! I want to give the player a feeling of desperation as they use self-care techniques to keep their body alive and functioning. I plan to utilize status bars that slowly clutter the screen to help create that desperate feeling. For the first stream I want to focus on building one full core gameplay loop, then adding the rest.

In order to create the simplest version possible, I’d like to focus on the task screen and status bars. The game will start on a laptop screen with a 🍽 food status bar, 🥤 water status bar, and progress bar running on the screen.

The progress bar starts at 0%, and every tick, it increments by the product of all active status bars. If you have a full water and food bar, it increments by 1, but if your food and water are half-full, then it increments by .25. When the progress bar reaches 100, the player receives 💵$50. The time to completion is always displayed above the task.

If any status bar reaches 0, and there are no warnings for this, the character dies, and it’s Game Over for the player. The status bars can be refilled by drinking water from a water bottle or eating a granola bar from the desk.

Drinking water and eating food to keep your status bars up so tasks complete faster is a good start, but it’s meaningless if you run out of food or can’t spend the mokney, so let’s implement a store!

Item	Cost	Description
Pomodoro Timer	$20	Saves task process every 25%
Granola Bar	$2	Increases food by 10 points
Sandwich	$8	Increases food by 40 points, takes 5s to make

We also need to implement some breaks to refill your water bottle, make sandwiches, and do something about all that water you’ve been drinking. I’m not sure if we’ll get to that part though. I’d like to implement additional status bars like 🍺 pee, 💩 waste, 💢 stress, 💫soreness, and 💤tiredness. I think completing tasks should increase stress and soreness, and tiredness should gradually rise! Maybe we can take a break to reduce stress and tiredness, and do some stretches to reduce soreness. I feel a whole system building out of this, but let’s start with hunger and thirst!

Deploying Jekyll with GitHub Actions, not Pages

Rachael Wright-Munn — Sun, 23 May 2021 22:37:23 +0000

I built a Gem that embeds Twitch clips in Jekyll Sites! Unfortunately, I can’t use it, because I’m deploying using github-pages. So let’s change the deploy process. 😏

Why do we have to do this?

GitHub pages is where my site is hosted. They require you to add the gh-pages gem instead of the jekyll gem, and they lock the version of Jekyll at 3.9.0. They would have to rework how gh-pages interacts with GitHub servers to support Jekyll 4.0, and that would break all the 3.9 sites out there. They’ve decided not to upgrade instead.

They also don’t let you add random plugins. Only their allow list, and my baby Jekyll-Twitch isn’t on it.

So, what’s the plan?

Jekyll has shared a guide on deploying using GitHub Actions. We’ll need a github_pages.yml file in .github/workflows. This is going to trigger every time we push to main. It’ll call out to a jekyll-action created by helaili which deploys the static site on the gh-pages branch. The jekyll-action deprecates JEKYLL_PAT, so we should update their docs while we do this.

There’s some additional GitHub configuration necessary. First, the jekyll action needs a github token to push to the gh-pages branch, then GitHub needs to use the gh-pages branch instead of the main branch.

We’ll need to include a secret in our action to store the github token.

This was easier than I thought.

Lending some color to Tokei Code Analyzer

Rachael Wright-Munn — Sat, 15 May 2021 21:52:32 +0000

Time for another open-source adventure! We’ll be joined by Max Jacobson as we visit the Rust cli-tool Tokei. Tokei generates statistics around your code and language usage. For example, chael.codes looks like:

Forem, the repo behind therelicans.com and dev.to, looks like this:

We’re going to pick up an issue with a lot of discussion that hasn’t been touched in 10 months that I personally like. Those screenshots before weren’t very engaging, right? Let’s add some lovely color to Tokei’s terminal output!

There are some requirements listed out in the issue above.

It must look good in light and dark mode terminals

A crate should manage colorizing the output

A color flag should manage color output --color (always|auto|never)

thick rows === should be bold and the thin rows — dimmed

I think it’d look nice to give all the languages a cyan color, and emphasize the subtotals.

First step is identifying how we’ll cover color output, and the issue points us to colored which is based on a Ruby gem of the same name. Usage is very straightforward. println!("Hello, {}!", "world".green().bold()) will use the terminal’s colors, and bold the text.

Note that “cyan” or “green” may not always be cyan or green, they’re just roles in your terminal color scheme.

Next, it’s time to think about how and where to output these colors. Tokei implements a printer interface in cli_utils.rs which is where I found the headers!

With some lovely colors and style implemented in Tokei, it’s time to think about those command line args and turning off color. Some people (like other computers) prefer not to have color. I think we handle this in cli.rs. ShouldColorize respects environment variables like NOCOLOR and CLICOLOR, but flags seem helpful too. We should document this regardless.

Add Color to Tokei #751

ChaelCodes posted on Apr 09, 2021

closes #419 Use the colored crate to add some additional color to Tokei. Colored will respect settings like CLICOLOR_FORCE and NO_COLOR. It will also use the configured terminal theme's blue.

Old	New

View on GitHub

Building Jekyll-Twitch, the gem

Rachael Wright-Munn — Thu, 01 Apr 2021 21:32:37 +0000

I'm really happy with my new website! But I can't embed Twitch clips. In fact, no one can embed Twitch clips in Jekyll, because there's no liquid tag for it. But we can fix that, not just for us, but for everyone!

This project breaks down into 3 distinct problems:

Creating a Jekyll Liquid Tag
Embedding a Twitch Broadcast, Clip, or VOD
Creating a Gem, and publishing it to Ruby Gems

Creating a Jekyll Liquid Tag

Jekyll liquid tags allow you to embed user-generated content safely. You might be okay with letting your users embed youtube videos, but you don't want them executing random javascript on your website. Liquids are an extensible templating library designed by Shopify. You specify a tag type, and then pass your url or id, and the tag sanitizes it and embeds the content. {% twitch <clip url here> %}

Examples:

Jekyll-YouTube
Jekyll-Twitter
Jekyll-Gist (This one is maintained by Jekyll)

We'll start with Jekyll's guide to liquid tags. They say we should create a TwitchTag class inside the Jekyll module, and add a render method for the embeds. We also need to register the tag, Liquid::Template.register_tag('twitch', Jekyll::TwitchTag), so Jekyll knows that it can use this tag.

Embedding a Twitch broadcast, clip, or VOD

Twitch allows you to embed clips, broadcasts, and VODs using several different embeds. They require that all embeds be served over SSL, and they want to know the parent domain.

Option 1 - Twitch offers an embed that includes chat, login, subscription, and everything normally available on the Twitch site. Unfortunately, it serves everything through JavaScript, and requires you to embed their script on your site.

Option 2 - This is a simple, non-interactive iframe for Twitch that works for VODs and Livestreams. The viewer will have to continue to Twitch to follow or subscribe. This will also work for clips if we customize the url.

Option 3 - This option asks you to embed the same script as option 1, but they've used the player instead of the embed. The documentation doesn't make the differences clear.

I plan to start with option 2 because it's simpler, and I need it for clips. Options 1 and 3 don't support clips.

Here's the super simple iFrame I'll be embedding. For clips, the url is: https://clips.twitch.tv/embed?clip=<VeryLongClipTitle>&parent=streamernews.example.com

<iframe
    src="https://player.twitch.tv/?<channel, video, or collection>&parent=streamernews.example.com"
    height="<height>"
    width="<width>"
    allowfullscreen="<allowfullscreen>">
</iframe>

I've embedded this before for Forem, so I'm looking forward to improving it.

How to Create a Gem

We can create the gem using the same tool we use for managing versions: Bundler. Then, I plan to publish it on RubyGems. I'm really excited about this!

Files I'll need

lib/twitch_tag.rb - this is going to handle formatting and rendering the twitch embed
lib/spec/twitch_tag_spec.rb - this is where all our tests around the twitch embed will live.

Gems I'll use

RSpec This is my favorite testing gem. I love how readable and well-organized the tests are.
RDoc We'll use this gem to document our TwitchTag.rb class.
Rubocop Just for fun, let's add this one too. It'll keep our styles consistent.

None of these gems will be dependencies. I can run them exclusively in development.

CI/CD

Let's reuse the GitHub actions from last week.

Automatically Lint New PRs #1

ChaelCodes posted on Mar 12, 2021

Description of Problem

I want some quality control and consistency. If I don't have some sort of linter, I can't ensure that happens.

Technical Solution

Run rubocop on every push using github actions.

View on GitHub

Then we'll add a new one to run RSpec, and verify that tests pass.

Once I have the entire repository set up, and the gem built, I'll want to add it to my own site.

Adding the Gem to chael.codes

The Jekyll docs say that GitHub pages excludes gems using the --safe option, ~~but they also say that you can skip that by including it in jekyll-plugins.~~ This did not work. GitHub Pages only supports their allow-listed plugins.

ChaelCodes / jekyll-twitch

Embed Twitch clips, VODs, and broadcasts in your Jekyll sites.

Jekyll::Twitch

This gem allows you to embed twitch channels, clips, collections, and videos in your Jekyll websites. It adds and registers a new twitch liquid tag that accepts a twitch clip, channel, broadcast, or highlight url. It's based on the Twitch video embeds.

{% twitch https://www.twitch.tv/chaelcodes/clip/SpoopySlipperyGrasshopperPogChamp %}

See the DEMO site

Check out the demo site for install instructions and to review different embed examples.

Installation

Add this line to your application's Gemfile:

gem 'jekyll-twitch'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install jekyll-twitch

Then add Jekyll-Twitch to your _config.yml like so:

plugins:
  - jekyll-twitch

Usage

This is a Jekyll liquid tag, so just put {% twitch https://www.twitch.tv/chaelcodes/clip/SpoopySlipperyGrasshopperPogChamp %} to embed your clip, channel, or broadcast.

When building your site, Jekyll no longer substitutes site.url for localhost, which means Twitch embeds will not render. You need to supply host and localhost to view…

View on GitHub

Research for a Jekyll Profile on GitHub pages

Rachael Wright-Munn — Thu, 25 Mar 2021 15:12:50 +0000

I have too many links and social pages. I can't even keep track of them all. What if I could store them all in one place, for free, and build the site using my favorite language? Let's build the technical plan!

Initial Requirements

I need to share my Twitter, GitHub, Twitch, TheRelicans, and Dev.To. (And BitBurner.) I also want to throw random webpages and utilities on it without thinking about hosting providers or tech stack. Then my blogs need a canonical source. I plan to cross-post to Dev.To and therelicans.com, so a blog format that can easily transfer is important. We can lorem ipsum some space with a bio too! I bought a domain, so let's show everything there instead of chaelcodes.github.io. ❤️

Research

First, I checked out the Jekyll tutorial to get an idea of how to build a site, and make sure it'll meet the requirements.

Posts are markdown files stored in a _posts directory. This feels very straight-forward, and my blog posts will all be tracked via git.

Liquids are tags used to safely embed external content in posts and pages. I've used them before with Forem (aka Dev.To). These will help with embedding Twitch and talk slides. The markdown format and Liquids mean it's easy to convert posts from Jekyll blog to Relican blog. I'll only need formatting changes for the slides and Twitch liquids.

Jekyll Plugins

Rubocop-Jekyll will check our styles. I also want to try out Github Actions for the automatic linter since I'm building everything in GitHub.
Jekyll SEO Tag - You know how Google and Twitter have descriptions when you link to them? Those come from metadata tags, and this plugin will help us set them up.
Type-On-Strap I'd like a theme that's got top-level nav, because I don't have many pages to navigate between. This one is well-maintained, has over 450 stars on GitHub, and the image have a parallax effect, which I really like.

Hosting

GitHub's documentation has an entire section dedicated to documenting GH Pages and Jekyll. The short version is that you make a gh-pages branch, name the repo username.github.io, and replace the jekyll gem with the github-pages gem. Then you configure GH pages in GitHub.

Custom Domain

Once I've got the site up, it's time to think about the domain. I picked up chael.codes on Namecheap, which is a fabulous domain, and right now, it's a blank page, but we can fix that! First, we'll have to configure a CNAME on GitHub, then we'll add that new CName record to NameCheap.

Information Architecture

Plugins, tools, and deploys are all great, but they're nothing without the content! I want to keep things as simple as possible, so we're starting with only 2 pages.

Index page contains social links and bio.
Blog page lists all blog posts.
- I have some old blogs, but I'm not migrating them. They can gather dust in the internet archive, k'thanks.

I can foresee a future where I gather Twitch + Youtube + Blog content around games I'm playing, but that's the future! Not for today! (I think a Games directory with a post page for each would be cool though...)

We built this on Twitch!!

And here's the repo:

ChaelCodes / chaelcodes.github.io

Portfolio site for ChaelCodes. Blogs, podcasts, and talks hosted here!

chaelcodes.github.io

This is a Portfolio site for ChaelCodes! You can see it at chael.codes.

Running the site Locally

Run bundle exec jekyll serve --livereload

Run bundle exec jekyll serve --livereload --port 5000 if you need to free up port 4000.

Tools used

Theme is type-on-strap

View on GitHub

How to caption your Twitch streams

Rachael Wright-Munn — Tue, 12 Jan 2021 04:01:25 +0000

Hey friends! If you have a better way, let me know in the comments below and I'll update the article to include your solutions.

There are two types of captions: open and closed. Closed captions are captions included along your stream and your viewers can turn them on or off, and change the font, color, and style to suit their needs. Open captions are text captions captured in your video, and cannot be changed or hidden by the viewer. We're going to be focusing on closed captions which are supported by Twitch. There are a number of twitch extensions that circumvent Twitch captions, but I want to focus on captions through Twitch.

Recording Software

You need a caption provider, and to transmit captions through your recording software. All of the solutions I've found so far require an OBS plugin. Streamlabs does not support OBS plugins, so you have to use OBS. StreamElements offers OBS.Live on Windows which adds a lot of the functionality Streamlabs offered. You can also import your Streamlabs widgets as browser sources. If you still want to use Streamlabs, look at the extension options offered in the previous paragraph.

Caption Provider

Your caption provider converts your voice into a transcript and captions. All options here are supported in Mac and Windows.

Cloud Closed Captions

Cloud Closed Captions is an OBS plugin that uses Google Cloud Speech Recognition API to generate captions in OBS. You do not need to open a browser window to caption.

Install Cloud Closed captions windows mac
Restart OBS
Go to settings and select the microphone source, and enable captions. If you are on Mac, fight with Security & Permissions, but you have captions!

Webcaptioner

Webcaptioner is a common choice for open captions, because it runs on the Web Speech API for browsers. It's currently only supported by Google Chrome. In order to integrate with webcaptioner, follow these steps:

Install OBS websockets plugin
Configure Websockets in OBS with a password and port number.
Open webcaptioner in Google Chrome, and configure an OBS Studio channel with port and password.
Set webcaptioner to use your microphone for captions. You must have the webcaptioner window open and recording the correct microphone at all times in order to receive captions. # Captioning Guests The solutions offered above only work with one microphone, but often, you'll have guests on stream to chat with, or TTS messages you want to hear. You need to turn multiple audio source into one using a virtual mixer like Voicemeeter. Voicemeeter has several competitors, but this article will start with just covering voicemeeter. Let me know in the comments what your favorite virtual mixer is, and I'll add it to the list!

Voicemeeter

Voicemeeter is a virtual mixer that allows you to combine multiple audio sources into a virtual output or input source. It is only supported on Windows.

Set up your microphone as a hardware input, and select a virtual output (like B1).
Separate you vocal audio into one virtual input, by adjusting the output of each application. The setting should be where you decide which speaker to use.
Set that virtual input to the same virtual output from step one (B1).
Set this virtual output as your microphone source in your caption provider. You do not need to output this audio as your source in OBS. You could use it exclusively to create your captions.

Live-Coding Setup Changelog

Rachael Wright-Munn — Fri, 07 Aug 2020 20:56:27 +0000

I love live-coding on Twitch. On Sundays, I work on my open-source Rails app HuntersKeepers. On Thursdays, I play programming-adjacent games. Getting all of this to work effectively is an ongoing process. Existing setup blogs focus on the current setup, but I want a changelog to track how the purchase improved my stream and whether it was worth it.

Known Issues

🐛 Application audio must be set to 1-2 in Windows Mixer unless audience tinnitus is desired.
🐛 Cannot see level of computer audio in Streamlabs.

4.0 Camera Update

Canon EOS Rebel T6

This camera is so nice!! I bought it for Ken and borrowed it for the Kinesis stream, and it looked so nice that I kept it! My face is clearer, and the soft out of focus effect helps pull me out from the background. The lens drastically reduces the amount of room visible, but the trade-off is worth it. I use Canon's EOS webcam utility to get video out of it. It's a little buggy. I have to deactivate the video input in streamlabs, turn off the camera, turn the camera back on, and turn the video input back on, and then we're good to record! On mac, you can't output to desktop zoom, unless you're going through an intermediary like Streamlabs virtual cam. I've been enjoying looking extra fabulous on zoom calls!

3.0.1 (released Sep.14.2020)

Kinesis Freestyle Edge RGB⌨️

Kinesis gave me a free split ergonomic keyboard! Look how beautiful it is! It has the softest wrist cushions, my favorite brown switches, and if I have two halves of a keyboard, I have to learn to touch type. The brown switches are great for streams. My typing has a feel and sound to it, but it doesn't overwhelm my voice.

3.0 (Released Aug.20.2020)

UpLift Standing Desk

DESK UPGRADE! My company gave us a one-time work from home budget to spend on office setup. I love this desk! I like how the acoustic panels reduce echo + room noise, my Stream Tank has more airflow, and the precision desk height is fun to adjust on stream!

Streamdeck

I knew the Streamdeck would make my life easier, but I had no idea how much it would help! My credits are so much smoother, now that I'm not navigating menus, and I can update my twitter name when I go live and stop being live. I can't wait to add raid commands into this! I'm still figuring out how to disable follower alerts when I'm follow botted, and make cat snuggle time easy on the Streamdeck, but so far, it's great! I wish I'd upgraded sooner. Even the phone app helped.

UpLift Vert Desk Chair

This is not a comfortable chair. It's better than nothing, but it's got no lumbar support and very few adjustable points. You can adjust the height, armrest height, and back tilt, but that's it! The seat pan is less comfortable than rocks I've sat on. I swiped it from Ken, who's not eager to have it back.

$7 Floor Lamp once purchased from Wal-Mart

My husband bought this lamp when he was in college. It's a floor lamp, with a plastic shade, and it directs light at the ceiling. I put it in front of my desk, and turned off the ring light on the Kiyo and all my over-exposure/glare problems are fixed.
🦋 Glare from the Razer Kiyo ring light on my glasses is gone!
🦋 Uneven lighting and overexposure from the window has been balanced out.

1.2.2 (Released)

VoiceMeeter🔈

This lets me output my volume to two different headsets, and to Streamlabs!

🐛 Computer audio volume is no longer accurately reported in Streamlabs.
🦋 Disconnecting bose headphones no longer impacts audio.

1.2.1 (Patch to Support Goat Stream!)

We rented goats to eat our underbrush! I did a 12-hour stream to share my beautiful goats with the world.

Yi Cam

I saw the goats the goats on day 1, and immediately decided I needed to stream them. Webcams are designed to focus on a person in front of a desk, but security cams are designed to capture a whole yard! I connected the USB cam to a charging block that lasted 12 hours. The mobile nature of the Yi Cam + charging block made it easy to move the cam to wherever the goats were. There was a significant delay, as seen in this clip where I realize the goats have destroyed my chiminea. Sometimes the video would stutter which I think was related to WiFi on the deck. I didn't do anything fancy for capturing video. I opened the Yi live watch application, and captured that application through OBS, and covered the chrome with videos. Not bad for a makeshift setup!

Laptop Webcam used

♻️ Old streaming laptop used.
♻️ Lapel Mics reused.

1.2 (Released)

Rode NT1🎤

I saw podcaststage try out this mic on YouTube and it made his voice silky smooth! Then I really wanted a mic upgrade. I thought it would really help improve my audio and deal with a persistent hiss I was hearing. All I've learned is that soundproofing > mic upgrades. Turning off the A/C and fan helps with noise floors way more than the mic upgrade did. This microphone upgrade came with a shock mount and a pop-filter upgrade.

1.1.2 (Released)

Pretzel Rocks!

This is amazing! I listen to Chill/No Vocals/No Mature and it is bopping! I regularly get questions about what's playing, and the answer is already reported to chat by Pretzel!
🦋 No more muted VODs!

1.1.1 (Patch to Support Mobile Recording)

IlluminatedSpace had an incredible project that I wanted to be part of! Recording videos for coding tutorials to encourage and explain why concepts were important! I took my setup to work to get a cool backdrop. It didn't work. None of my framing attempts worked without compromising company security or co-worker privacy.
💥 Razer Kiyo hinge breaks in bookbag.
♻️ Lapel mics
♻️ Old streaming laptop

1.1 (Released xxx.xx.2019)

Window Seat! I really like looking outside, and so do the cats! The cat tower moves next to me in stream after this.
🐛 Uneven lighting and overexposure.

1.0.1 (Patch to Support Mobile Stream)

I went to Florida! It was my Grandma's 94th birthday, so I streamed from the hotel.

Saramonic Blink 500 Lapel Mics

Lapel mics are supposed to be really good for capturing one audio source, on the move, and filtering out external noise that's far from the microphone. Mine were crisper and clearer than the condenser mic I was using, which allowed me to identify that the rushing noise was partially due to the highway a mile from my house.
In practice, I've yet to use both transmitters at the same time. Also, it's very difficult to tell if they're paired or not. I had some trouble setting them up, because I had to use the correct microphone cable on the laptop port, and the input type to use was confusing. The range on this is great though! They last about two hours, but I almost always have the receiver plugged into a charger, and I often charge the transmitter during use.

♻️ Razer Kiyo
♻️ Old Streaming Laptop

1.0 (Released)

Stream Tank

My laptop was dropping frames when trying to run 7 Billion Humans on 12x speed! It was time to upgrade to a dedicated machine. Ken built me this beautiful Stream Tank.

Asus x570 Tuf Gaming + WiFi, AMD Ryzen 7 3700x, Ripjaws 32GB DDR4 3600, Fractal Design Meshify C TG, EVGA SuperNova G3 650, Nvidia GTX 670

0.1 (Released Oct.06.2019)

Windows Subsystem for Linux

I use Ruby on Rails professionally, and I play Monster of the Week recreationally. When Hacktober came around, building a new open-source RoR app to make managing games of Monster of the Week easier seemed like an obvious choice. One problem, neither Ruby nor Rails like Windows, and I have no intention of streaming on my work macbook. Getting WSL set up was significantly easier than I thought it would be. File permissions aren't a big deal if you put your files in mnt/c.

0.0 (Released Aug.03.2019) ✨

Streamlabs OBS

I get follow alerts, commands, and recording software in one free tool! Streamlabs is significantly easier to use than OBS, and has the same power, because it's built on OBS.

No Copyright Sounds

Yes! They have playlists on Spotify based on mood, Cradles is amazing, and all I have to do is include their logo in my panel. Plus they're copyright-free on YouTube too, (as long as you credit them in the description), so I can upload my VODs! they change out which songs are in their spotify playlists on a regular basis, so there's often fresh music.

🐛 Occasionally, my VODs were muted?!

Microphone

Ken bought this microphone over a year ago on sale on amazon. It was $5 on Prime day. A lot of my initial issues with this microphone were related to misuse. I had it the wrong way around, and it took me a while to figure out how to correctly set the gain.
🐛 Weird water rushing sound at the bottom of the microphone's range.

Microphone Arm

I bought a cheap microphone arm from amazon for $23. This microphone arm worked great! It held the mic up, came with a shock mount and pop filter, and was perfect. The shock mount is key in reducing noise from bumping the desk or even typing on the keyboard. The pop filter helps with plosives, which are 'p' and 'b' sounds. Microphones pick up noise through vibrations, and if you blow on your mic, it'll pick up air movement and sound movement, making your 'p's pop a little too much. The pop filter helps diffuse that air.

Audio Interface

Audio Interfaces provide phantom power to microphones, and connect to the PC via USB. I have never had a problem with this audio interface.

Razer Kiyo

This is some nice crisp video, but the ring light is too small to be helpful. My screen with a light mode application and fully brightness does more than the ring light. This webcam just works, so I don't have much to say about it. 1080p is very nice, but Twitch is going to throttle my face down to 720p, so I'm not sure who's benefitting from it.

🐛 Ring light produces glare on glasses.
🐛 Auto focus issues in low-light scenarios.

Acer R 15 Laptop

I bought this for my sister for Christmas when she went to college, but she said it was too heavy and she couldn't carry it around. I bought her a used Surface Pro from a friend, and I was supposed to return this laptop, but between Christmas and laziness, it went past the return period. I started using it as a personal computer, and when I wanted to stream, it was there waiting for me!

🐛 This laptop once decided to defrag during a stream, resulting a lot of dropped frames.

Monitor

This was just a monitor I had laying around the house. Having two monitors when you're streaming is incredibly helpful. I put chat and my recording software on one side, and the application I'm recording on the other. It's important that chat is always easy to see and respond to, but also, it's important to have an easy way to check your video and audio levels.

Mechanical Keyboard

When I bought this, you could customize the switches, and it was made by gofreetech. I love brown switches, because they have the same tactile feeling as blues, but a little quieter. Any mechanical keyboard feels nicer to type on than a standard laptop keyboard with stubby, mashy keys. I deliberately chose an audible switch for my stream. I wanted the lines of code to have an impact as they were being written, and to be more prominent in the stream. If I were playing an FPS or any game using WASD to travel, I'd choose clears.

Surprise! I'm including my work keyboard too! The Pok3r 60% keyboard feels amazing. I got it in white with brown switches. The metal casing, sleek design, and keys look, sound, and feel great. You know what doesn't feel great? The claw hand I go into every time I need the arrow keys. I don't even think about the motion, or my future arthritis, when I traverse the code using arrow keys. Honestly, this keyboard may have caused me to use the mouse more. Gorgeous though. Best feeling keyboard I own.

Jelly Comb Mouse

The mouse so nice, I bought it twice! I had one for work and one for home. I love this mouse. It's completely silent on stream. It feels nice in my hand. It even looks nice!

Bose Headphones

These are just used as headphones, not mic. You need headphones to prevent the mic from picking up your computer audio. I like to move around and bob a little, so I can't be tied down with a wire; the bluetooth is mandatory! The in-ear headphones hurt my ears, so I need the over-ear cans.

🐛 These are a little frustrating, because when they disconnect or connect to another device, the audio on the stream dramatically increases in volume.
🐛 Audio levels will sporadically change over time because headphones are connected/disconnected.
🐛 Application audio on Windows must be set to 1-5 volume to not be overwhelming.

Thank you for reading! If you have questions or suggestions, let me know in the comments!

I've included links to Amazon for product details and easy purchasing. I receive a 2% commission on purchases using these links. #disclosed #ftc_safe If you discover a link to amazon, and you cannot purchase the product, that is intentional. I want you see what I bought.