aaronpk/live-chat-overlay

Restyle the YouTube "popout chat" window so you can key it over a video to show comments on a livestream

Live Chat Overlay

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

Setup Tutorial

Installation

Google Chrome Store

The easiest way to install the extension from the Google Chrome store. Click the link below and you should see a prompt to install it in Chrome.

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

Manual Installation

First, download this project and unzip it somewhere on your computer. In Chrome, launch the Extensions page.

Go to Window and click Extensions (or enter this in your address bar chrome://extensions/)

Turn on Developer Mode

That will show a new set of options. Click "Load Unpacked"

Choose the folder you downloaded the extension into, and you should see it now in your list of extensions!

Usage

Open up the YouTube live chat for a video, and click YouTube's "popout chat" button to open it in a new window. Or replace the VIDEOID in the URL below with your video's ID.

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

Keying from a Computer

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

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

Or you can use the downstream keyer:

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

Adding as a Browser Source

In software such as OBS or Lightstream Studio you can pop out a remote window as a browser source, and remote control it from your main YouTube chat window.

Before you start, you'll want to make sure you 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 above, you will see a button 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 can open the URL on your computer too if you want to full screen it on a second monitor.

Persistent Links

There is now an option for "Persistent Session ID" to enable a persistent link for your stream so that you don't have to re-add the browser source every time. Here is how to use it.

In the options form, check "Persistent Session ID" which will show a text box with a randomly generated Session ID. This Session ID will be used for all you future chats. You can also change the Session ID in that field if you want to reuse one that you already saved in a browser source.

Note: You should always use a randomly generated ID. If you use a short word like "test", then the chats will be combined with anyone else who has used the same short word.

See this in action!

You can see this in action on many of Aaron Parecki's livestreams!

Running your own remote server

The extension defaults to pushing the chat messages through a server managed by Aaron Parecki, and the remote window is loaded from that website. The chat messages aren't stored on the server, and there is very little resource usage for this, but if you are more comfortable running this on your own server, head over to the overlay remote GitHub project for instructions.

TODO

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

Credits

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

live-chat-overlay's Issues

Add a button to quickly disable and enable the restyling

Support for Stream Elements Chat

It would be great if support for Stream Elements chat could be added. This way it would work for any chat system.

Chat no longer working in OBS

Hi I set up for my stream today and the chats are no longer appearing on the screen in OBS

Persistent Links

In the readme.md there is a text saying that the extension now support for persistent link, and that the options of the extension should have a "Persistent Session ID" check box, but I could not find this option in my options list. I am using 0.3.6 version (latest), and just have the following options:

Am I missing something?

Overlay disappears when clicking the "get overlay URL" button and Browsersource doesn´t show in OBS

Hi there,

What a great plugin. Just installed it today and it works fine until I click the "get overlay URL" button. The overlay disappears when clicking the "get overlay URL" button and the browsersource doesn´t show in OBS.

Any ideas?

Cheers
Michael

Mobcrush.com Chat Integration

Unlike restream.io, mobcruch does livez for facebook pages for free
https://studio.mobcrush.com/chatpopup.html

Get Overlay URL stopped working

I was playing with the live chat overlay extension this evening and it was working well until it stopped :-). From studio, i pop out the chat window and see things working fine as shown in these two screenshots:

and

When I click on Get Overlay (in order to get something I can key using OBS with Ultrastudio) i see no output in the modified page:

of by following the URL:

This was working earlier so I hope I haven't tripped a rate limit. Any ideas greatly received :-)

Thx Aaron

New Remote Server URL option not saved

I’ve briefly got my own server to work. While debugging I found that Chrome automatically updated the plugin. If I change the URLs in the options settings, the Remote Server URL is not saved (or saved, but not restored).

I forked the repo and found that adding “serverURL” to the properties list on line 26 of options.js fixed that problem.

[EDIT] And adding "serverURL" to configProperties on line 206 of youtube.js fixed my last problem, which was that that chat.aaronpk.tv was always used for the serverURL not matter what the option was set to.

Disable clicking on retracted messages

Allow a different font for the author name

I'd like my author name to use a different bigger fancier font than the comment text.

Request: Support for CSS style 'author-avatar-border-color'

Thank you for your great work, I really appreciate this extension.
Can you also expand the CSS options with the --author-avatar-border-color style?

Remote Server URL won't save

I'm trying to use a locally hosted overlay server so that I can customize the behavior of the message and trigger the parent iframe holding the overlay to automatically dim the background (I'm using it teleprompter style to show on-air talent comments before putting them over the livestream).

But, before getting into any of that, I'm just trying to get the local server to work. I have NGINX all installed and working, but I can't get the Chrome plugin to save the Remote Server URL setting. The Popout Chat URL setting saves just fine.

Help!

The latest OBS build seems to have broken the Overlay

OBS just did an update to 28 which seems to have some conflict with the overlay. The images no longer show and the CSS seems off.

Add corner-radius for comment message box

I'd like the comment box to have rounded corners.

Modified CSS with panel in lower half, allowing DSK use in ATEM mini

We hacked the CSS to swap the list of questions up and the black pane down on the page. That allows us to broadcast the overlay through the Mini's DSK where we can mask top and bottom, but not position. The precious USK stays available for our Chroma keying.
Youtube-Chat-CSS-inverted.txt

More customization such as font size and positioning from bottom.

That, at theory, doesn't sound too much but I've tried editing the files but could not make it work on OBS with the changes.

Add checkbox to toggle showing first name or full name

Add option to push messages to the Singular.live API

https://developer.singular.live/rest-api-v1.0/rest-10-global-data-api/#put-update-data-node

Persistent Links?

I can't find the persistent links option?

It's mentioned in the docs but nowhere to be found?

Support for OBS

Hello @aaronpk, I heard you mentioned you'd like to make a version of this that is compatible with OBS.

@steveseguin built one which can be viewed at: https://github.com/steveseguin/twitch-youtube-chat-overlay-without-window-capture

Maybe it'd be interesting to merge these two projects and built together upon that foundation?

The version from Steve is built around some socket.io and sends the comments through a server. Customizable layout for how it ends up showing up in the browser source also supported by doing ones own html file.

Move the settings page to a popup

instead of using the chrome built-in options page

The Extension does not give the URL to OBS due to an error HELP

Unrecognized manifest key 'browser_specific_settings'.

{
"name": "Live Chat Overlay",
"description": "Restyle the YouTube popout chat so you can overlay it for livestreams",
"manifest_version": 2,
"version": "0.2.1",
"homepage_url": "https://github.com/aaronpk/YouTube-Chat-Overlay",
"icons": {
"128": "icons/icon-128.png"
},
"permissions": [
"https://youtube.com/", "https://www.youtube.com/", "https://studio.youtube.com/", "storage"
],
"content_scripts": [{
"css": ["youtube.css"],
"js": ["jquery.js", "youtube.js"],
"matches": ["https://youtube.com/live_chat", "https://www.youtube.com/live_chat*", "https://studio.youtube.com/live_chat*"]
}],
"options_ui": {
"page": "settings/options.html"
},
"browser_specific_settings": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "80.0"
}

Could you help me please?

New channel member and super sticker support

Hi Aaron,

saw your script in your stream yesterday and jumped on it since I've boon looking for something like this for ages. Only hat a few minutes so I couln'd change the styling yet: https://www.youtube.com/watch?v=LwRMC-nyWpc

I'd love for two things to be added: new channel members and superstickers.

I owe you at least a couple of beers at the next beyond tellerrand!

Make bottom section scale with the window

Bottom section should always be a certain percentage of the screen so that the key settings can remain the same even if the window is resized

Unable to adjust Font Size, Width, Location of Comment

First off. Love the work you've done here. The chat overlay worked amazing for the last two lives except that anything over about 150 characters cut off the bottom.

I tried to play with the features in options below and moving the numbers to positive and negative numbers resulted in no changes to the size and location of the overlay.

My apologies for being thick. But, can you add any assistance?

Chat instantly disappears when it pops up

So when I click on a chat bubble, it will briefly appear on my screen and then disappear a split second later
I thought that the new setting would be the issue, but even after setting it to 0 or 9999999999 the chat still disappears the moment it comes up. It's there for like a split second tops before it's gone again

I reinstalled the extension just to be safe, but this still doesn't fix it.
Updated OBS as well, but no dice

Please help! Am I being dumb?

Add chat comments to a timed queue

I think this would be really useful for a lot of people like me who want to highlight a lot of comments along the stream but don't want to manually be worrying about the timing, having to turn them on or off. A lot of times I've left a comment on for too long and I have to constantly be aware of what's on screen and keeping a "timer" in my head asking myself if the comment has been on long enough for people to have read it.

This is the behavior I imagine:

• Turn option on in settings (not on by default) (alternative: add timer button to each comment so it functions independently)
• Add chat comments to queue while the stream is going on
• Shows one comment at a time for 5 seconds (maybe configured option later?) one at a time until the queue is clear
• Option to clear queue
• Extra: Pin a comment so it's on regardless of the queue

This is a great extension, by the way. I've been using it a lot lately, great job Aaron! :)

OBS panels

Good morning everyone... I saw a good idea while using this amazing chat!

It would be great if we had a "dashboard" in a url to use within the OBS panels, thus saving the pc's memory, since I wouldn't need to keep the browser open!

I don't know the complexity of this, but it is something that could be an excellent upgrade!

This text was written with the help of google translator, I apologize for any errors!

Package as a cross-browser extension

Currently this relies on the chrome.storage API for saving settings. Need to find a cross-browser way to do that

Word wrap...

One thing I notice is at least for me. There is no word wrap functioning. So everything just trails off on a single line not wrapping to a new line. Any ideas?

Member Milestone Chat Issue

There is an issue when channel members use their monthly "milestone chat". It incorrectly displays the "New Member" badge.

Add more settings

probably for all the CSS variables defined in youtube.css

Restream Support

In one of your recent streams you said that you might be adding support for Restream to the extension. Any updates? Also, did you add the superchat confetti?

Remove chat line dropdown menu from appearing when a message is clicked

Use a system font by default

Problem with Live Streaming and Live Chat (Slowdown)

Hello there, I don't know if this is a common issue. We experienced while having our live cast slow downs and transmission problems, everytime the google chat window wasn't on top. That means, if I had OBS in front of the google window, our video lagged.

You can see it here at 4:12 for example:

https://www.youtube.com/watch?v=JR0bm54hHc0

Maybe you can help us.

Word Wrapping

Hey Aaron,

I have looked over the setting and noticed the is no wrapping function, I noticed that it only shows a limited number of characters and is not accommodating the Max200 characters from the youtube chat, can you provide me with some guidance on how to resolve this issue, I would greatly appreciate it if provide me with that bit of info.
Thanks in Advance,
ben

Get Overlay has also stopped working for me

When I click on the Get Overlay button instead of getting the usual chat.aaronpk.... url and link... it now is just the pop-out youtube url with an additional anchor appended to it [which I tried using to no avail].

This is a VERY awesome module and I use it all the time, happy to support a Patreon if you set one up just to keep this thing running and up to date!

Add sample chat message when page is first loaded

Fix chat text on highlighted messages in the youtube studio view

text color is white in studio view, change it to black for highlighted messages

Refactor main YouTube JS to only extract chat info, not build the HTML

The HTML for the popup should be built in the overlay window rather than the source window. This will let us more easily add additional services.

Options appearing everytime you click on a comment when chat is popped out

Hi there, For the last week everytime I pop out the chat for a live stream and click a comment it appears on my stream but in the chat window the moderator options pop up also covering most of the chat. It's made the chat impossible to see. any way to fix this in an update soon?

Add option to auto-hide messages

When this checkbox is checked, clicking a message should show the message immediately and then hide the message after some amount of time. The time should probably be hardcoded, but might vary based on the length of the message.

Custom CSS in chrome extension

Is there a way to add my own css code to the browser plugin like back in the styler days?

Chat will only show up if i clicked one of the chat message.

first of all, nice extensions.

Well, the title says it all. the chat will only show up on the overlay link IF i click one of the chat message.

I cannot edit the appearance

When I change the colors in css, I can see the changes in the sample tab but not in OBS. I'm changing the file "youtube.css".

Create and document data model for pushing chat messages from a remote window

Let's clean up what goes into this data variable and document it as the API this plugin uses to push messages from the chat window to the display window.

https://github.com/aaronpk/live-chat-overlay/blob/main/youtube.js#L18

Super Sticker support

I grabbed the HTML for a super sticker from a recent livestream:

<yt-live-chat-paid-sticker-renderer class="style-scope yt-live-chat-item-list-renderer" id="ChwKGkNOV29tYmV6Z080Q0ZUVGlPQW9keHU4R1Z3" style="--yt-live-chat-paid-sticker-chip-background-color:rgba(30,136,229,1); --yt-live-chat-paid-sticker-chip-text-color:rgba(255,255,255,1); --yt-live-chat-paid-sticker-background-color:rgba(21,101,192,1); --yt-live-chat-paid-sticker-author-name-text-color:rgba(255,255,255,0.701961);"><!--css-build:shady--><div id="card" class="style-scope yt-live-chat-paid-sticker-renderer"><div id="author-info" tabindex="0" class="style-scope yt-live-chat-paid-sticker-renderer"><yt-img-shadow id="author-photo" class="no-transition style-scope yt-live-chat-paid-sticker-renderer" loaded="" style="background-color: transparent;"><!--css-build:shady--><img id="img" class="style-scope yt-img-shadow" alt="" width="40" height="40" src="https://yt4.ggpht.com/ytc/AAUvwngES-SxML8bNFHvkMEOoFatVt4G1dUtGflnCRcmdA=s32-c-k-c0x00ffffff-no-rj"></yt-img-shadow><dom-if restamp="" class="style-scope yt-live-chat-paid-sticker-renderer"><template is="dom-if"></template></dom-if><dom-if class="style-scope yt-live-chat-paid-sticker-renderer"><template is="dom-if"></template></dom-if><div id="content" class="style-scope yt-live-chat-paid-sticker-renderer"><span id="timestamp" class="style-scope yt-live-chat-paid-sticker-renderer">10:33 AM</span><div id="content-primary-column" class="style-scope yt-live-chat-paid-sticker-renderer"><div id="author-name" class="style-scope yt-live-chat-paid-sticker-renderer">YouTube Dave</div><span id="price-column" class="style-scope yt-live-chat-paid-sticker-renderer"><yt-formatted-string id="purchase-amount-chip" class="style-scope yt-live-chat-paid-sticker-renderer">$1.99</yt-formatted-string><yt-formatted-string id="deleted-state" class="style-scope yt-live-chat-paid-sticker-renderer"><!--css-build:shady--></yt-formatted-string></span></div></div></div><div id="sticker-container" class="style-scope yt-live-chat-paid-sticker-renderer sticker-loaded"><yt-img-shadow id="sticker" notify-on-loaded="" tabindex="0" class="style-scope yt-live-chat-paid-sticker-renderer no-transition" loaded="" style="background-color: transparent;"><!--css-build:shady--><img id="img" class="style-scope yt-img-shadow" alt="Director's chair with the words &quot;ON SET&quot;" width="40" height="40" src="//lh3.googleusercontent.com/KP--Ps9ho0bWIFUA9lqnCJ1kI4Z721WAdOMa0zUEFLLVpEjH6VGcOfmqqBILfeHQR3bTR0o9CXtKdUqStQ=s40-rp"></yt-img-shadow></div><yt-formatted-string id="dashboard-deleted-state" class="style-scope yt-live-chat-paid-sticker-renderer"><!--css-build:shady--></yt-formatted-string><div id="menu" class="style-scope yt-live-chat-paid-sticker-renderer"><yt-icon-button id="menu-button" class="style-scope yt-live-chat-paid-sticker-renderer"><!--css-build:shady--><button id="button" class="style-scope yt-icon-button" aria-label="Comment actions"><yt-icon icon="more_vert" class="style-scope yt-live-chat-paid-sticker-renderer"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" class="style-scope yt-icon"></path></g></svg><!--css-build:shady--></yt-icon></button><paper-ripple class="style-scope yt-icon-button circle"><!--css-build:shady-->
    

    <div id="background" class="style-scope paper-ripple" style="opacity: 0.005252;"></div>
    <div id="waves" class="style-scope paper-ripple"></div>
</paper-ripple></yt-icon-button></div></div><div id="inline-action-button-container" class="style-scope yt-live-chat-paid-sticker-renderer" aria-hidden="true"><div id="inline-action-buttons" class="style-scope yt-live-chat-paid-sticker-renderer"></div></div></yt-live-chat-paid-sticker-renderer>

problem in YouTube chat

Hi there, when i use this amazing tool by OBS, and i click on an comment to show on my stream, if the comment long a bit, not all the text appear. how to make the comment show fully in one line ?

Keyboard Shortcut for the CLEAR function

Maybe i din't get it,

is there any way to clear the on screen message via a keyboard shortcut or via a companion button?

THX Aaron for your great work!