My Twitch live coding setup in OBS
Tags: twitch, webdev, productivity, womenintech
Published: 2021-03-14 08:41:31

When [streaming live coding on Twitch](https://twitch.tv/whitep4nth3r), I code on a MacBook Pro and stream via [OBS](https://obsproject.com/) on a [custom PC build](https://whitep4nth3r.com/uses/#streaming). Given the variety of wild overlays I have added to my stream over time, I often receive questions about how I set up OBS to stream, so let’s take a look!

*This article does not intend to be a tutorial on how to use OBS, but rather a window into the backstage area at p4nth3rHQ to answer common questions.*

*This article will also help future me in the event my streaming PC explodes 🔥.*

## How I monitor my stream when I’m live

![A screenshot of what I see in OBS when I am streaming live on Twitch](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F7l79I3mLArFSFcE2upAVg8%2F31bfcbbddd459570420895afb078f331%2Fwhat_i_see.png&w=1080&q=75)

I monitor my stream through a combination of UI docks in OBS and the Twitch Stream Manager — which I view on my MacBook Pro screen. Monitoring activity on two screens means I am less likely to miss activity in chat or items in the request queue. 

The most important part of what I monitor in Twitch Stream Manager is what my viewers are seeing (which is always slightly delayed compared to what I see in OBS). This ensures I can time raids at the end of my stream accurately, and alerts me to any visual/framerate issues as well.

I use a variety of configurable UI docks available in OBS, including:

- Twitch chat
- Twitch stats
- Twitch request queue
- Twitch activity feed
- Captions monitor (powered by the Google Cloud Captions plugin)

## Component and Composite Scenes

I organise my scene collection in OBS into a set of component scenes to enable easy reuse across composite scenes.

I prefix all scene names with labels for quick visual identification, such as **[SCENE]** for a composite scene that will be shown on stream, **[C]** for component and so on. I also separate the list of component scenes into categories with blank scenes named “-------”.

![A screenshot of the full list of component and composite scenes I use in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2FH1WFiUEWTiPmIJ4TKQakq%2Fac231311af842c3017fd415e7160e9b8%2Fscene_list.png.PNG&w=1080&q=75)

## The composite scenes I use on stream

- Pre-roll
- Chatting
- Coding
- Intermission
- Other scenes

## Pre-roll

![An animated gif of the starting soon screen I use when live streaming on Twitch](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2FeJEyp9f6oGT6nh9eUMiKN%2F64ea5bbf516f9a25ae8c9dbc26403a23%2Fstarting_soon_small.gif&w=1080&q=75)

This is the scene you’ll see when I’ve just pressed the go-live button. I leave this scene on for around five minutes, whilst I welcome people to the stream by voice. I don’t usually have my webcam capture visible for this scene, but sometimes I surprise the audience with a cameo appearance now and then.

Here’s how it looks in OBS:

![A screenshot of the pre-roll composite scene components in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F5Xgp6H6ebIDEgDkGHZHGYE%2F0f155887f3e7d50150d3793f2ae7379e%2Fpre_roll_obs.png&w=1080&q=75)

The **[C] essentials** component scene is a collection of browser sources that appear on every composite scene except the **end-transmission** scene, comprising:

- Streamlabs alert box (which I only use for host alerts)
- Giveaway Friday overlay
- Footer overlay
- Chat overlay
- p4nth3rdrop overlay
- troll alert component scene (comprising a number of .mov files)

![A screenshot of my essentials component scene that I add to every composite scene](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F6nZ5rVFkihnugD7xbR9cC0%2Ffe50b6b877d9b61d3a5951306a3aa274%2Fessentials.png&w=1080&q=75)

The giveaway, footer and chat overlays are powered by a React app, whilst [p4nth3rdrop](https://github.com/whitep4nth3r/p4nth3rdrop) — the emote rain powered by Twitch chat commands — is a self-contained application.

The **[C] panther static overlay** is a component scene containing the two large semi-transparent panthers you see in the background of the scene. The **[banner] starting-soon** and **[panther] majick** are at the centre of the screen.

The **Geo Loop** is the dynamic geometric transparent-ish background — this is something I tried out once and it stuck — and I haven’t needed to put it in its own component scene yet.

The p4nth3rlabs alerts browser source is added as a separate component on each composite scene. Even though I want to show the alerts on every scene, the browser source remains separate from the **essentials** due to it needing to be positioned differently across scenes. This is also the case for the [p4nth3rball](https://github.com/whitep4nth3r/p4nth3rball), which is another self-contained application.

Depending on my mood, I’ll use the **[BG] black** or **[BG] red** patterned backgrounds. I leave both components in the scene for ease of switching — I do this type of thing in a lot of scenes. 

## Chatting

![An animated gif of a loop from my live Twitch stream that shows me in my chatting scene](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F2Vda6U0ZgRSg3HrsBEkKLh%2F7ba2086384d94d71f459fae47fb08298%2Fchatting_small.gif&w=1080&q=75)

I mostly use this scene at the beginning and end of streams. It contains all of the essentials and separate components mentioned in the pre-roll scene, plus a **Credits** browser source from Streamlabs, which I use to show my custom-styled credits at the end of a stream. Here's how it looks in OBS:

![A screenshot of my chatting composite scene details from OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F3Fvbkvlsknwtr1gGrv8ZhC%2F4a0458d1ddb1e8215b4f46c07ead9f04%2Fchatting_obs.png&w=1080&q=75)

## Coding

![An animated gif of a short part of a live Twitch stream where I am coding and receiving a subscription alert](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F5A0ZcwF9xnT17RoJWe6P7p%2Fbe5746a5d8f90844e82209ebeb1d996d%2Fcoding_small.gif&w=1080&q=75)

This is the scene I’ll show for most of a stream. This scene contains all of my **essentials**, the p4nth3rlabs alerts, and two **[Capture]** source component scenes. I use the [Elgato HD60 S Capture Card 1080p](https://whitep4nth3r.com/uses/#streaming) to send the output of my main monitor (which is plugged in to my MacBook Pro) to the streaming PC.

The **[Capture] Main** component scene is the full capture of my main 1080p monitor that I view directly in front of me when I stream.

The **[Capture] Pixelated screen** component is my current privacy screen, which allows for some dynamic movement behind a privacy filter when I need to conceal my screen. This is a separate component scene containing another capture of the main monitor I code on, with a scaling/aspect ratio filter applied. [Read this post by Luce Carter](https://www.lucecarter.co.uk/Posts/obs-pixellated-secrets/) to see how I set this up.

Ordering of the component scenes inside composite scenes is something I make sure to consider carefully. For example, in the coding scene it’s important that the **[Cam] Main** is above **[C] alerts**, so that the alert banner doesn’t cover my face.

![An animated gif of a shot from my live Twitch stream that shows my pixelated privacy screen](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F38zAjoO3oyXC0jQf2IzePI%2Fa6b37f3b9f84198ef2e36e4f4fbf42a5%2Fprivacy_small.gif&w=1080&q=75)

Here’s how it looks in OBS:

![alt="A screenshot showing the components that make up my coding composite scene in OBS"](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F6tqLLOiQo2dyr1Xe4vhJ52%2F90d9f9bffdf1cb53d452cd611a69e0e3%2Fcoding_obs.png&w=1080&q=75)

## Intermission
![An animated gif showing the intermission scene that I use during my Twitch live streams](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F6GHOLv1J8NqhXF5Wkz9Vhg%2F482970a4260f691b0d98470edbeaadf0%2Fintermission_small.gif&w=1080&q=75)

The **intermission** scene is almost identical to the **pre-roll** scene, with the banner and panther switched out. Here’s how it looks in OBS:

![A screenshot of my intermission composite scene I use whilst live streaming on Twitch in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F6h7obTERCtgSYjd1QcZ1RV%2Fdbc7c6d2055e839ae8043ae6f5853f1d%2Fintermission_obs.png&w=1080&q=75)

## Other scenes

- **[SCENE] end-transmission** is for when the stream ends — you’ll usually only see this for a few seconds before a raid
- I use **[SCENE] coding CAMR** if I need to move my face to the left side of the screen (next to chat) for any reason
- **[SCENE] coding CAMSMALL** is used to make my webcam capture smaller should I need to show viewers something behind my head — it’s a direct copy of **[SCENE] coding** but with the webcam component made much smaller
- **[SCENE] coding GUEST** is a flexible scene for when I have a guest on stream, which is mostly a duplicate of **[SCENE] coding**
- **[SCENE] hacking** used to be my privacy scene that I tend not to use these days — but I still keep it around

## Stinger

![A gif of the stinger I used for my scene transitions in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F2ybmLT3PVj7MB3gKQ7Tnlv%2F6b31a625d442d2758201ed42a429dea7%2Fstinger_small.gif&w=1080&q=75)

I recently made a stinger using [this tutorial from Gaming Careers](https://www.youtube.com/watch?v=wGntVBSnA8Q) that I use to transition between all of my scenes. Here are the transition settings in OBS:

![A screenshot of the transition settings I use for my stream scenes in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F5h6TUSt7uXWjJpVEKgdXLA%2F842d4ed22b7bf78ab731fc6e63b64133%2Fstinger_settings.png&w=1080&q=75)

## Audio

I use the Wave Link software that comes with my [Elgato Wave 1 USB Condenser Mic](https://whitep4nth3r.com/uses/#streaming) to control most of the audio in OBS. I set up Wave Link to send audio inputs from multiple channels (mic, system sounds, voice chat in Discord, and the audio capture from my Mac) to one output for the stream — via the Wave Link Stream output — or WLS.

Here are the two audio channels added to the main **[A] Audio mix** component scene, which is added to every streaming scene, except **end-transmission**.

![A screenshot of the audio component scene in OBS which I add to every composite scene](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F6Swe4yPahiNXRqSeDYulkt%2Fabd868c1dd5eccc2c8311f9a808afd33%2Faudio_component.png&w=1080&q=75)

Here are the Wave Link software settings. The Wave Link microphone acts as an audio interface, and this software allows the control of audio channel levels individually. My headphones are plugged into the microphone, and the interface allows me to control the levels of what I hear in my headphones independently of what audio levels are output to the stream.

![A screenshot of the Wave Link audio interface software showing the channels I add to my main stream audio channel](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F61jvzxJQGYhvwLfMA4ZwXf%2Fd9bd73b29bd7a1fd64c0c79deae8810c%2Fwave_link_settings.png&w=1080&q=75)

The music played via the [Pretzel](https://whitep4nth3r.com/uses/#streaming) application is added as a separate audio channel, so I can lower the level of the music automatically whilst I am speaking via a compression filter — this is called audio ducking.

If you’re playing music in the background whilst you speak, audio ducking is a really powerful feature that can greatly improve the production quality of your streams. I add a compression filter to the **Music** audio channel with the following settings. This means that whenever audio is output on the WLS channel, the Music channel will lower in volume.

![A screenshot of the settings I use for audio ducking in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F4NdKAxshzbKu1QRnsaCmGz%2F887eeff4815ea7010957eef93cf6b681%2Fducking_settings.png&w=1080&q=75)

I also use a compression filter on the WLS channel, to filter out some background noise from the microphone input.

![A screenshot showing the compression filter settings I use on the main audio channel of the stream](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F2bzrrqRc8TYUed3oBHgyXL%2F607b9d9a735e108dc991d781c85f43e7%2Fwls_compressor_settings.png&w=1080&q=75)

As I use the Wave Link software to manage my audio channels, I disable all global audio devices in OBS, and set the monitoring device to the headphones plugged into my microphone/audio interface.

![A screenshot showing the global audio settings I use in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F6h8YTxXGt3nhAEAugqFlyJ%2F2df145b6afe75da5c8caf2a02fc3c1d6%2Fobs_audio_settings.png&w=1080&q=75)

In the advanced audio settings, I set three audio sources that are generated by component scenes (browser sources) to **Monitor and Output**, so that I can monitor what my viewers are hearing on stream — such as follower alerts and chat-controlled overlay changes.

![A screenshot showing the advanced audio mixer settings in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F6JmnEG6W6L35cQjuq59iPn%2F78a378d074c3430893ecec617000da28%2Fadvanced_audio_settings.png.PNG&w=1080&q=75)

## Stream Settings

Currently I stream at 2500kpbs, in 1080p at 60fps.

![A screenshot of the output settings I use in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F4ojPdmbCGz2AAMQUDBgYq0%2F6f903983934627f98f77dfec2de31ab2%2Foutput_settings.png&w=1080&q=75)

![A screenshot of the video settings I use in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F4DVzf7woUYtmnvy6mOt1hK%2F932c8b110d185560b906c56297e58a29%2Fvideo_settings.png&w=1080&q=75)

## OBS Plugins

### Cloud Closed Captions

I use the [Cloud Closed Captions plugin](https://obsproject.com/forum/resources/closed-captioning-via-google-speech-recognition.833/) to provide captions to my viewers on stream. I have found it to be really reliable, and I like the fact that I can monitor the generated captions whilst I stream in a UI dock.

![A screenshot showing the captions settings I use in OBS](https://whitep4nth3r.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F56dzm01z6lln%2F7ciRXN5iyHHoocx5BPcIXF%2F838fe2fd32fce028b8bf85fcaf50f6db%2Fcaptions_settings.png&w=1080&q=75)

### Elgato Remote Control

I use this plugin with my [Elgato Stream Deck XL](https://whitep4nth3r.com/uses/#streaming).

---

If you want to chat about or get some advice on live coding streaming setups, come and join a fantastic group of tech streamers in [The Claw Discord](https://discord.gg/GQbXUVCneJ) server. We’d love to have you!