On-screen emotes for Owncast!

Hey there!

Are you a streamer, and do you use Owncast? Then we have something special for you!

We made an emoji wall (also known as a "on-screen emotes overlay") which takes the emojis and custom emotes sent in the chat and displays them bubbling up the screen!

If you're interested, great! We made this emoji token just for you: โญ๐Ÿ™†โ€โ™€๏ธโฎ๏ธ๐ŸงŸโ€โ™‚๏ธ๐Ÿ’ž๐Ÿข๐Ÿ‡ง๐Ÿ‡ฒ๐Ÿ‘‚๐Ÿ…๐Ÿ‡ฆ๐Ÿ‡ช You will use it to set up your own emoji wall below!

Instructions

It's easy! You only need to configure a browser source in OBS Studio, and a webhook in Owncast.

Keep reading for step-by-step instructions. You can also checkout the FAQ. If you need help, reach out on the Fediverse at @lefractal@mstdn.social or send en email to support@smol.stream.

Step 1: Fill in you Owncast instance's address

Step 2: Add your emoji wall to OBS Studio

  1. In OBS Studio:
    1. Add a Browser Source to your scene.
    2. In the properties window for the source, paste the following address into the 'URL' field: Remember to fill in your Owncast's instance address in step 1 above first!
      https://smol.stream/emojiwall/โญ๐Ÿ™†โ€โ™€๏ธโฎ๏ธ๐ŸงŸโ€โ™‚๏ธ๐Ÿ’ž๐Ÿข๐Ÿ‡ง๐Ÿ‡ฒ๐Ÿ‘‚๐Ÿ…๐Ÿ‡ฆ๐Ÿ‡ช//
    3. Set the width and height to the size of your OBS canvas (e.g. width: '1920' and height: '1080').
    4. Save the new source by clicking the 'OK' button.

Step 3: Tell Owncast where to send emojis

  1. Go to the webhooks page in your Owncast admin area
  2. Click the 'Create webhook' button.
  3. Paste this URL in the input:
    Remember to fill in your Owncast's URL in the input field above first!
    https://smol.stream/emojiwall/โญ๐Ÿ™†โ€โ™€๏ธโฎ๏ธ๐ŸงŸโ€โ™‚๏ธ๐Ÿ’ž๐Ÿข๐Ÿ‡ง๐Ÿ‡ฒ๐Ÿ‘‚๐Ÿ…๐Ÿ‡ฆ๐Ÿ‡ช//
  4. Check the box for 'When a user sends a chat message'.
  5. Save the webhook config by clicking the 'OK' button.

๐Ÿฅณ๐ŸŽ‰ That's it!

It's done! All emojis and custom emotes sent in your Owncast chat should now show up in your OBS Studio and on your stream!
If you need any help, reach out on the Fediverse at @lefractal@mstdn.social or send en email to support@smol.stream.


FAQ

What is Owncast?

From their website: "Owncast is a free and open source live video and web chat server for use with existing popular broadcasting software."

Why would you use it?

Why do you need my instance's URL?

Owncast does not send the absolute address of custom emotes (e.g. "https://foo.com/path/emote.gif"), but only the relative address (e.g. "/path/emote.gif").

Thus, we need to know where your instance resides in order to display these images.

Are you receiving every message sent in my chat?

Yes, we are. But we discard each message as soon as we have extracted the emojis from it, and don't use it for anything else.

Do I need to use the web interface to setup the emoji wall?

You don't! The web interface is only a handy tool you can use to generate the URL you need to setup the webhook and browser source. You can generate the URL yourself:

https://smol.stream/emojiwall/ + a secret token + / + Your Owncast instance's URL in base64 encoding.

The secret token can be any string you chose. You should keep it a secret because anyone knowing it can send emojis to your emoji wall!

Can I send emojis to my wall directly without posting in the Owncast chat?

Yes, you can POST emojis directly to the emoji wall following this example:

curl -X POST --header "Content-Type: application/json" \
     --data '{"eventData":{"body":"๐Ÿ˜€๐Ÿ’™"}}' $EMOJIWALL_URL

Can I use the emoji wall with other broadcasting software?

Probably. However we have not tested it with anything else than OBS Studio! If your software can embed web content, you should be good to go.

Can I host my own emoji wall instead of using this site?

Of course! The emoji wall is free software and can be found on our git repository.


The smol.stream emoji wall is free libre software brought to you with ๐Ÿฅฐโค๏ธ by Hejo, ruffy and Le fractal. Special thanks to Tasartir, cptbichez, Morado and the Owncast development team! ๐Ÿ™

owncast-emojiwall version v1.0.2

Fill in the URL of your Owncast server below, including "http://" or "https://": Why do we need this?

(/admin/webhooks).