Going down the rabbit hole: A journey into how I do research. Or: The start of a bookmark dump series 🙂
So, things that happen daily, almost all the time – when I’m researching a specific topic, my browser instance may get crammed to the brim with open tabs.
Thanks to that, I’m an avid user of “Bookmark All Tabs (into a bookmark folder)” 😀
Others just dump this into a “bookmarks of the day / week” post, but I’d like to add some beforehand information, too.
Lets call this the UNcluttering of my mind for important stuff, like .. Getting Things Done (eg. work tasks).
My original goal was to find out about different options on how to hook into the Twitch API, as I just chose to use StreamElements as an intermediate, but interim solution for The Problem Of The User Interaction(tm) on my twitch channel.
The idea is to use a PHP + JS approach to handle Twitch events and others, and work as kind of a handler or a bridge / server / client solution (the bridge and partial server being the PHP + JS handler, Twitch being the main server and the client obviously is the browser component of OBS). On the other hand, there is stuff like TwitchPress, to play around with. Oh, and apparently there also is an API for StreamElements (just sayin’) 🙂
A few selected results from the GitHub search »twitch api« (restricted to ‘PHP’):
- https://github.com/nicklaw5/twitch-api-php – Twitch API PHP Library – looks very complete AND up-to-date to me
- https://github.com/cp6/Twitch-API-class – Twitch API class – a simple implementation, for a lower learning curve
- https://github.com/padhie/TwitchApiBundle – TwitchApi – To quote from the README: »A little collection to work with the Twitch-Api«
- https://github.com/AuhuurMedia/twitch-api-php – simpler approach with cURL
Now, this was, BEFORE I finally decided on StreamElements for an intermediate solution – because streams get just sooooo much LIVElier with things and animations appearing, when eg. somebody follows, subscribes to the channel, or even dares to tip the DJ via one of the numerous services available (eg. PayPal or Ko-Fi).
Let’s talk about animations.
First I thought about creating these with an editor, similar to GIF creation – with the background knowledge, that you are able to use FFMPEG to create videos from images (ie. batch processing of numerous images into one video, and vice-versa). But also, about specialized programs. Searching for this, we immediatedly stumbled upon Maya .. how could we forget about that? Possible different solutions include, amongst others, Synfig, an open-source, cross-platform, 2D animation software.
A glance into how StreamElements builds its events – using them as simple web widgets or snippets, being loaded into OBS using the browser component / element – brought up the idea of going with CSS animations instead. Maya etc. is nice, but total overkill.
And, we have been working with CSS since the early 2000s, so what’s easier? Figuring out some complex animation editor, or use what one has right on hand?
Note: This also ties right into my thoughts about using CSS animations instead of hardware-rendering for those fancy random appearing emotes on Twitch streams. Ie. use a CSS overlay, CSS 3 transforms for resource-friendly generation, and pre-generate the actual sent-out amount of emotes (eg. user drops in 10 emotes in the chat => its being picked up by a bot or observing script, and so on).
But, how to convert this into a video?
Well, use a desktop recording software. Of corpse, others thought already as far, and there are quite a few tools around – whether it be online services or a stand-alone solution in python 🙂
- https://github.com/bpsagar/css2video – Python library to convert CSS animations into video
- https://html5animationtogif.com/html5tovideo – online service including API to convert “HTML to Video” or GIF .. althought that’d obviously be a CSS- or JS-based animation
- https://clideo.com/image-sequence-to-video – Image Sequence to Video – for the classic thing, you dont even need to figure out how to correctly use FFMPEG (I dont need to, either, because I’ve already known how to for ancient times ;))