How To Get A Transparent Background For Youtube Livestream Chat Overlay In Obs

Live Conversation Overlay

This browser extension turns the YouTube popout conversation window into something that tin can be used to testify chat comments keyed over a video. Yous tin can also bring it in to software like OBS or Lightstream Studio as a browser source!

Setup Tutorial

Installation

Install from the Chrome extension store:

• https://chrome.google.com/webstore/detail/live-conversation-overlay/aplaefbnohemkmngdogmbkpompjlijia

Or yous can install this as an "unpacked" extension. In Chrome, launch the Extensions folio

• chrome://extensions/

And so choose "Load unpacked", and navigate to this folder.

Usage

Open up upwardly the YouTube live chat for a video, and click YouTube's "popout chat" button to open information technology in a new window. Or supersede the VIDEOID in the URL beneath with your video's ID.

https://www.youtube.com/live_chat?is_popout=1&five=VIDEOID

Click "Get Overlay URL" and open that in a new window or another device, or add that as a browser source in OBS.

Keying from a Computer

You lot'll adjacent need to bring that into your video stream and key information technology out, which will depend on what software or hardware you are using. In the ATEM Mini, you tin can apply these settings in the upstream keyer:

• Luma key
• not premultiplied
• clip: 7%
• gain: 100%

Or y'all tin can use the downstream keyer:

• non premultiplied
• mask:
  • top: X
  • bottom: -9
  • left: -sixteen
  • right: 16

Calculation as a Browser Source

In software such equally OBS or Lightstream Studio you can use the remote window equally a browser source, and remote control it from your main YouTube conversation window.

Before you start, you'll want to make sure y'all change the background color in the extension settings to the word "transparent" so that the browser window will have a transparent background.

Once you've loaded the YouTube popout chat window described in a higher place, you will meet a push in the YouTube chat window called "Get Overlay URL". Clicking that will reveal a URL you can copy and load into OBS or your favorite streaming platform that supports browser overlay sources.

You tin can besides open the URL on your computer if y'all want to full screen information technology on a 2d monitor, or you tin open this on a secondary device similar an iPad.

Run across this in activity!

You can see this in activity on many of Aaron Parecki'due south livestreams!

Running your own remote server

The extension defaults to pushing the chat letters through a server managed by Aaron Parecki, and the remote window is loaded from that website. Nada is stored, and there is very piddling resource usage for this, merely if you lot are more comfortable running this on your own server, caput over to the overlay remote GitHub project for instructions.

TODO

Run across https://github.com/aaronpk/youtube-chat-overlay/issues

Credits

The CSS and JavaScript originally came from a video by ROJ BTS, and so huge thank you to him for the initial work!

Source: https://github.com/aaronpk/live-chat-overlay

Posted by: jenkinsenswer.blogspot.com

Share this post