Martyn's random musings

I'm gonna be doing a stream on Owncast soon and probably co-streaming to twitch where I already have some connections. That means I want both chats on screen, so twitch viewers can see the owncast chat and vice versa. So obviously I search the interwebs with whoogle “Chat Owncast OBS” and all the answers seem pretty complex. Example link that is well-written

Whilst I'm capable of setting up those things, I found it hard to believe that this was the best use of my time. So I searched a bit harder and found the right keywords to use – “embed” is the magic term. It's not perfect so I added some custom CSS and thought I'd make it easier for people to search for and document those changes I made.

So, to add your chat as an “overlay” in OBS you can simply add a Browser type source with the URL http://your.host/embed/chat/readonly – In my case, I use a local IP here via http rather than the external https url, that saves having to sort out hairpin mode on my router.

Here is the custom CSS I use for making the chat a bit more compact :

.message { margin-top: 0px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 5px; }
.message-author {
display: inline;
}
.message-author:after {
content: ": "
}
.message-text{
padding: 0;
display: inline;
}

Here is what it looks like before adding the custom css:

and after :

I'm still not “happy” with the appearance, but perhaps some cool frontend person might be able to make it look better than I can. Of course I could just go the difficult way, but that seems excessive for now.