The grind of streaming on Twitch

As I’ve announced previously on YouTube and also on the blog I’m trying to get a bit more into streaming. The grind isn’t easy because the path to affiliate has some specific requirements that are actually a bit hard to achieve.

Path to Affiliate

This is what it looks like:

The harder part of it is getting an average of 3 viewers because if I stream towards an audience of no one then I’m just digging down.

I also tend to get much more views on YouTube but more on that later down the post.

Streaming on multiple platforms is forbidden

Once affiliated with Twitch I won’t be able to stream to Twitch and YouTube at the same time. Streaming towards a Restream Docker container was really convenient to automatically upload my VODs to YouTube but it increases the stream latency so much that the interactions are slow.

Once I gain my affiliate status I won’t be streaming to two platforms at the same time.

Streaming on YouTube?

To enable monetisation on YouTube there are different rules:

Getting at least 1k subs is easier than keeping viewers engaged for 4k hours.

I’m thinking of trying something with the public shorts views but that would mean that I need to line up some content and be as widespread as possible.
I could edit some of my VODs on YouTube to extract some highlights but there could be much more work than I’m expecting.

I’m also not very fond of YouTube shorts as I classify that under “infinite scrolling brain dead content for zombie”.

Conclusion

Streaming is a grind and it ain’t easy.

‘Nought said.

Discord animated voice PNGs

When building your streaming overlay you might want to add the other users that are in your current vocal chat but you want to customize a bit the way it’s displayed.

Discord doesn’t offer any of those options natively but with OBS Studio it’s possible to use some tricks.

CSS & web knowledge required to understand how to use CSS and how to link images.

Setting up the widget

Nothing really hard here, got to the Stream Kit page for Discord in the overlay section.

Setting up the server and the voice channel to be used will alter the URL so make sure you are using the right channel, but it’s possible to use a personal and private channel to use for PNG VTubing.

In OBS within your scene you need to create a browser source and use the provided link as such (no preview until it’s saved):

This is the basic setup. Next we will need a way to get the user ID on Discord.

Setting up Discord

To be able to get the user IDs we need to enable the developer options within Discord. Go to your settings within Discord and in the advanced tab you’ll find the developer toggle:

Getting the user’s ID is as simple as right clicking a name in the chat and clicking on the Copy ID button:

Customizing the widget

Since the widget is a web page within a web view in OBS Studio it’s easy to customize through CSS. Here’s the code to copied & pasted into the custom CSS text area in the browser source:

/*
To be used with the Voice Widget from the Discord Stream Kit
https://streamkit.discord.com/overlay

Do not hotlink images, please rehost them to avoid stealing
bandwidth and keep control over your images, Imgur is a fine
option for this.

Credits:
- Generator by kukushie: https://www.reddit.com/r/VirtualYoutubers/comments/k4q8jw/css_generator_for_discord_reactionary_images_that/
- Edited & improved by SenpaiSilver: https://twitter.com/SenpaiSilver

Please keep the credit chain when making & publishing your changes.
*/

@keyframes speak-now {
    0%  { bottom:0px; }
    15% { bottom:15px; }
    30% { bottom:0px; }
}

body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

/* Aligning everything on the same line */
.voice-state {
    display: inline-block;
}

/* Images must be square, change height for it to be scaled
back to 128px wide, or else deal with bad alignments */
.avatar {
    height: 128px !important;
    width: auto !important;
    border-radius: 0% !important;
    filter: brightness(50%);
}

.speaking {
    border-color: rgba(0,0,0,0) !important;
    position: relative;
    animation-name: speak-now;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    filter: brightness(100%);
}

/* Hiding names because the discord parameter on the streamkit
doesn't seem to be taken into account correctly */
.name { display: none; }

/* Default avatar */
.avatar {
    content: url("https://link-to-image.png");
}

/* Users go here: */

.avatar[data-reactid*="new"] {
    content: url("https://link-to-image.png");
}
.speaking[data-reactid*="new"] {
    content: url("https://link-to-image.png");
}

The result is an overlay, where the images change went talking in some way:

  • Brightness is increased;
  • The image is bumped 15 pixels higher;
  • The image changes depending if an image is set for talking only.

Thanks to Malidoudou for the output for her streams.

Explaining some parts of the code further

It’s important to understand some parts of the properly before running this code, even though it’s just CSS.

First of all you cannot trust users, I recommend using a default image for users that are not part of the CSS to avoid displaying potentially unwanted profile pictures:

/* Default avatar */
.avatar {
    content:url("https://link-to-image.png");
}

This code will replace the img tag’s content with the provided image for everyone that connects to the voice channel. After that it will be possible to set below the specific users with their IDs:

.avatar[data-reactid*="user discord id"] {
    content:url("https://link-to-image.png");
}
.speaking[data-reactid*="user discord id"] {
    content:url("https://link-to-image.png");
}

When we override .avatar we are already setting the default image for the user, by specifying that the attribute data-reactid contains a certain string we can refine our selector and make it target a specific user ID (since they are unique).

In this case the same applies when .speaking is added to the user .avatar.

If you wish to retain round avatar you will need to tweak the border-radius within the first definition of .avatar.

Possible improvements

Since we are dealing with images, animated GIFs are an option and could be used to display an animation with transparency.

If the GIF format doesn’t provide enough colors then it’s possible to fallback to something like the animated WebP or APNG format.

Credits, warranties & notes

This code is based on a generator found on reddit, I’ve changed it to make it work better and fit my own settings. If you modify the code please keep the credit list and add yourself to it.

The code is provided as is and might break one day if the Stream Kit is updated.

This code can be used for son PNG VTubing too.

Separate your audio streams for streaming on Windows

Streaming and recording video games is something I’ve been into, casually, for years (since 2006). Recording gameplay with audio usually includes all the system audio and this can be a problem.

Recording all system audio issue

Windows, your web browser and the game’s audio will play through the default device. That default device is usually your headphones or your speakers.

OBS and ShadowPlay usually record that default device, this is something we’ll have to change.

Virtual Audio Cable

I’m using Virtual Audio Cable (VAC). You can use the trial version, buy it or use an alternative virtual cable driver, this is all up to you.

Open the Virtual Audio Control Panel as an admin (always) and setup the desired number of lines. Each line will be setup to receive audio from certain apps depending on the usage you want.

I have the main line for gameplay, my Discord line to record people I’m talking to. I also have a third line for miscellaneous things and a fourth that I’m not using.
Ideally I would’ve have set one line specifically for gaming, but Windows 10 being what it is (and standards being what they are) it ain’t going to work like that.

To complete the audio setup I also need to output those lines to something and that something is my headphones. Each output line automatically inputs the sound into a virtual input too, that way you can listen to it.

Basically this is how things go:

  • Outputs:
    1. Headphones;
    2. Line 1: Main output (default output device);
    3. Line 2: Discord output;
    4. Line 3: Misc output.
  • Inputs:
    1. USB Microphone (default input device);
    2. Line 1: Main output mirrored as input into my headphone;
    3. Line 2: Discord output mirrored as input into my headphone;
    4. Line 3: Misc output mirrored as input into my headphone.

Windows 10 doesn’t remember

Like I said previously one problem that forces me to set the line 1 as the default output device is because Windows 10 can’t exactly remember correctly which app is outputting on which device.

This issue could also be the other way around where an app will have a different output selected but still output to the default device, I’m not sure why but answers would be appreciated.

OBS recording

OBS is a great piece of software that permits me to merge lines and split some too! This is perfect for recording gameplay and streaming (at the same time).

First we need to specify that we will be recording several tracks into our ouput in OBS, for that we need to go into the settings: File, then Settings.
From there we go into the Output section and select in Streaming the first audio track as the one we will be using for streaming like so:

As a bonus you can also use a different audio track for the VOD so you can have avoid having Spotify playing in the VOD (and avoid the DMCA).

In recording we need to tick all audio track to enable all audio tracksfor later:

Then of course we need to name them and change the audio bitrate if you desire:

In my case I have everything playing on track 1 since it is the default track.
Track 2 will contain the game audio or the main subject of the video/stream.
Track 3 is my voice, followed by track 4 with voices from Discord.

Having different tracks enables me to control what is output when I record and stream, this way I’m able to make audio commentary when preparing a video and after that replace that commentary with a carefully recorded one, while keeping the gameplay audio without altering it.

To select where what track plays it’s necessary to go into the Edit menu, then Advanced audio properties. Set the different inputs and outputs as you wish in the new window:

Keep the first track checked for all lines, check the other numbers as you need.

Troubleshooting: static/glitch audio

After a while if the computer is not rebooted for days it might happen that the audio fizzles, glitches or becomes static. This isn’t a good experience.

The fix consists in restarting Virtual Audio Cable or the audio service from the control panel (as an admin).