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 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:- Add a Browser Source to your scene.
-
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/๐ถ๐๏ธ๐ธ๏ธโฎ๏ธ๐ฃ๐๐๐จ๐โน๏ธโโ๏ธ// - Set the width and height to the size of your OBS canvas (e.g. width: '1920' and height: '1080').
- Save the new source by clicking the 'OK' button.
Step 3: Tell Owncast where to send emojis
- Go to the webhooks page in your Owncast admin area (/admin/webhooks).
- Click the 'Create webhook' button.
-
Paste this URL in the input:
๐ค Remember to fill in your Owncast's URL in the input field above first!https://smol.stream/emojiwall/๐ถ๐๏ธ๐ธ๏ธโฎ๏ธ๐ฃ๐๐๐จ๐โน๏ธโโ๏ธ// - Check the box for 'When a user sends a chat message'.
- 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?
- You become independent from any platform such as Twitch or Youtube;
- It respects your privacy as well as your users' privacy;
- You can host it on cheap hardware, or even at home with Yunohost;
- It is fully compatible with OBS.
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:
minsize: The minimum size of the emojis in pixels.maxsize: The maximum size of the emojis in pixels.mintime: The minimum time the emojis take to cross the screen, in seconds.maxtime: The maximum time the emojis take to cross the screen, in seconds.maxcount: The maximum number of emojis to display at the same time.effect-rotation: Set to1to make emojis slightly rotate as they travel up the screen. Depending on your configuration and the number of emojis, this can be ressource intensive โbut it looks great!
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! ๐