Unlock Your Potential: How to Stream with Discord Reactive Images

Have you ever watched a Twitch stream and noticed it had reactive pngs? Reactive pngs are very commonly used by vtubers and vtubing in general. Reactive pngs are pngs that move and interact when the user speaks. Vtubers and other streamers commonly use reactive pngs when they do collabs with other Vtubers or streamers. In the collabs, all of the vtubers/streamers use the discord app to join a discord call and or discord voice channel where they can link the reactive png of their avatar. In this article, you will learn how to set up discord reactive pngs that you use for vtubing and for your streams!

Using discord reactive images and the necessary prerequisites

First off let's talk about everything you will need to use a reactive png. You will need a png of whatever avatar you want to use. For example, commonly vtubers use a png version of the vtuber for their reactive png. Then you will need to make sure you have a microphone setup to capture your voice, as this will allow for the reactive png to react to the sound of your voice using the microphone. Then we have to make sure a few pieces of software are installed. Make sure you install Discord if you haven't already, as you will be linking your reactive png to discord to use in discord calls. Then you want to make sure you have a streaming software installed. Obs studio and streamlabs obs are two examples of streaming software you can use to show off your reactive png! Once you have obtained everything you need, let's move on to how to set up your discord reactive png!

How to set discord reactive images for your profile

We are going to focus on two main ways you can setup your discord reactive png!

1. Fugi discord reactive images: Fugi is the easiest tool that allows vtubers and streamers to setup a reactive png of their avatar within discord.

• Launch the discord app and head down to the settings icon in the bottom left corner. 
• Once in settings, scroll down to the advanced tab and toggle developer mode on found under the advanced tab
• Next select the voice & video tab. Select your microphone under voice settings and input device. Then in video settings select OBS virtual camera
• Then we will head back to Fugi and login with our discord. You will need to sign into discord to grant Fugi permissions.
• This will then take you to the main page of Fugi where you can set everything up. Here you can upload the png of your vtuber or avatar under "Set inactive image" and "Set speaking image". Some vtubers like to have a separate png of their png with an open mouth and a closed mouth depending on if they are speaking or not. However, having one png uploaded that goes dark when you are not talking and lights up when you are talking is also an option!
• After setting up Fugi, there are other adjustments you can do if you desire. Once done, you can click apply, and then under links, click copy next to the individual browser source to copy the reactive image url. 
• Now you can open the streaming software you downloaded. Here you want to click the + sign under sources. Click Browser source, then create new source, give your browser source a name, and click ok.
• In the properties window of this browser source, paste the image url you copied next to the URL and click ok.
• Now your reactive image will appear in obs. If you drag the image, you can change the width or height to your liking.
• If you also want to use it in a discord stream, click start virtual camera under controls in obs. Then return to the discord app and connect to a voice channel. At the bottom left, click video, then you can turn on the camera.
• Now your reactive png is ready to be used for streaming!

        2. OBS Streamkit Overlay: Streamkit Overlay is an alternative method if Fugi doesn't work for you. Here we'll go over the steps to set it up!

• Head over to the Discord StreamKit website, depending on which streaming software you use, select install for OBS or Install for XSplit.
• You will then be shown the Widgets page, unless you are not signed into discord, it will then prompt you to sign in.
• Head to the voice widget tab and select the server name and voice channel you want to use for your reactive PNG.
• After you complete this you can copy the browser code from the bottom right side of the page under the voice widget. 
• Now launch your streaming software like streamlabs obs, select the + icon on the sources menu. Click Browser source, then ok and paste the url next to where it says URL, and finally click OK.
• Now, open the discord app. I recommend you create a private text channel where you can save your links and reactive images you use. 
• Now open the CSS generator link in a browser.
• Return to the discord app and right click your username from the bottom left corner, then you want to select copy ID. Paste that ID next to the discord user ID in the CSS generator.
• Now go to the discord channel where you store the png images you use for your vtuber or avatar, right click on each image, choose copy ID, and the paste the IDs next to the Image URL sections in the CodePen window,
• Click Generate CSS to generate the code, now you can edit and modify it if needed. Now click the Copy CSS button.
• Return to OBS, xsplit, or streamlabs OBS, and right click on the browser source you created with StreamKit, then select properties.
• Scroll down to Custom CSS, paste the code you copied, and then click OK.
• Now the reactive image of your vtuber or avatar should be good to go! Feel free to resize it by dragging it in obs if needed. To connect it to discord, go to controls in obs/streamlabs obs and select start virtual camera. Virtual camera will allow you to use it within the discord app. 

Conclusion

Now you have multiple ways you can incorporate a reactive png of your vtuber or avatar into your streams! Whether it's for your vtubing journey, collabs, or facecam streaming, adding reactive images to your streams can add a whole new element! Now that you have setup your reactive image for your stream and discord, it's time to hit go live! Good luck with your streams!