Resource icon

Setting up Live YouTube chat that updates with new streams

Youtube chat in OBS has a key issue. We use a Browser source to display it and if you do get it working you notice it's working fine until you go to stream again. The problem is that the YouTube chat URL is unique to that stream, meaning if you stop the stream and restart it it will have a different URL, this makes it a pain to setup YouTube chat that works. You have to change the URL every time you use it. If you have multiple scenes with chat on them this can become very problematic.

To solve this I have a little website tool to help. It will detect the URL of your latest stream and pass this to OBS to use.

Step 1
First you need the URL your livestream is available at, the public one. this is in the bottom right hand corner of the Youtube "Live Dashboard". It is usually in the format https://gaming.youtube.com/c/YourChannel/live or if you dont have a custom URL enabled it will be in the format, https://gaming.youtube.com/channel/ZXC123_123ZXC/live. It does not matter if you have "gaming" in the URL or not.

Step 2
Now you need to type in a URL, this will be the URL you use in the OBS browser plugin to add the chat but you can test it in a browser window first to make sure it brings your chat up. Go to the following address.
The bit after "channel=" should be the URL you found from step 1

Step 3
Go to OBS Studio and add a browser source. Use the URL you created in step 2. Make sure it has http at the start and includes the question mark. Hit OK and make sure its actually displaying the chat window before proceeding to step 4.
2017-12-11 19_39_34-Properties for 'BrowserSource'.png


Step 4
Visit the style generator website and setup your style.
https://chatv2.septapus.com/
At the bottom of the page is some CSS, copy all of that into the CSS box on the Browser Source properties in OBS. If you know how to write CSS feel free to make your own.
2017-12-11 19_46_52-Chat v2.0 Style Generator.png


Step 5
Type something in your Youtube chat and watch it come up on screen
2017-12-11 19_45_22-OBS 20.1.1.png


Here is a video showing how to set this up
Likes: 123123123
Author
Bigmonmulgrew
First release
Last update
Rating
0.00 star(s) 0 ratings
Top