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 check out πŸ“Ί a two minutes video tutorial or read πŸ“˜ 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

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

Step 2: Add your emoji wall to OBS Studio

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.
🀯 You can customize some of the emoji wall parameters such as emoji size and speed. See this FAQ entry to learn how.

Step 3: Tell Owncast where to send emojis

  1. Go to the webhooks page in your Owncast admin area (/admin/webhooks).
  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 in our git repository. You can find detailed instructions about self-hosting the emoji wall in Ruffy's excellent blog post.

How can I customize my emoji wall?

Built-in settings

There are a few things you can customize such as the size and speed of the emojis, by adding parameters to the URL you use to setup the browser source in OBS Studio. The following parameters are supported:

Example:

https://smol.stream/emojiwall/πŸŽ₯πŸ₯³πŸ’Ύβ€οΈ/aGV5IQ==/?minsize=20&maxsize=40&mintime=5&maxtime=10&effect-rotation=1

Custom CSS

You can also add custom css in the properties of the OBS browser source.
All emojis elements have the .emoji_item class. Unicode emojis are span.emoji_item, while custom emotes are img.emoji_item.


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! πŸ™

Emojiwall v1.1.4