Add custom overlays

[kuon]

I am currently trying twitchat to replace all my overlays, and I am missing one feature: custom overlays.

I would be great to have a custom overlay overlay, which would just be a text area for some raw code. It would be pretty low level and might be a little niche, but it would allow developers to create anything.

If you agree on the feature, I could work on it and make a PR.

A few features on the top of my head:

• custom html/css/svg/js
• access to all twitchat placeholders
• can be triggered/observe values

[Durss]

Hello ! Thank you very much for offering your help! That would be much appreciated if you feel like it, I'm just curious about what you'd technically do ?

My feeling from what I understood about what you'd like to do is that it may satisfy neither of the developers or the non-developers. Correct me if I didn't understand properly what you offer to make:

• a "generic" overlay that would receive any data we want to
• we would get fields to write any custom HTML/JS/CSS that would be injected to the overlay itself
• we could add placeholders inside the HTML/JS that would automatically be populated

If I'm correct, I feel like developers would prefer simply building their own overlays from scratch instead of using such system with a sort of abstraction layer that makes things more complicated than anything.

Of course, I wouldn't say that if there was currently no way to do what you want. Here are 2 solutions that come to my mind :

1. Use a custom HTML as browser source and send it query parameters from an OBS trigger. Selecting the browser source allows to update its URL and pass it any existing placeholder. I see you're from Switzerland, incase you speak french i made a little thread on discord to explain the process (link to join discord if you need it
2. Use a custom HTML as brower source again, and connect it to the Public API via OBS-websocket to get some other types of events and/or control Twitchat I really need to update that documentation tho, it's far from being up to date, but here are all the events/actions actually available.

The first solution is the one that answers the most what I understand from your needs as you can use any placeholder while doing the overlay the way you want.

Let me know if anything's unclear or if I misunderstood your suggestion!

Thank you again very much for overring your help 🙏

[kuon]

Actually a custom HTML browser source is fine, I think the query method (1) is a bit brittle for advanced uses and more suited to simpler cases, but using twitchat as a websocket server (2) is actually nice, I didn't know it was capable of that (actually using OBS as WS relay is a good idea).

If a custom HTML can watch twitchat events and fetch its state, then this suites my use case. I will try this. I'll close this for now and maybe add future example/reference to this issue later.

PS: I do speak french, but I strive to write in english in issues to help building documentations and references.

[Durss]

Let me know if you need anything that's missing. Something that might help you, the /devmode command enables a debug menu at the very bottom right of the screen that allows to simulate any sort of message. This way you'll be able to at least inspect the socket messages to know their format

[kuon]

I found another way to communicate with browser source/custom overlays.

OBS supports CallVendorRequest. I think it would be a nice middle ground to control overlays.

In twitchat, when creating a "Control OBS" trigger, there would be a "Send custom event" action, and you would be able to specify a name and a list of keys, with all placeholders available.

It would then generate an event like this:

    return obs.call("CallVendorRequest", {
      vendorName: "obs-browser",
      requestType: "emit_event",
      requestData: {
        event_name: 'obs-websocket-test-event',
        event_data: {'testKey': "hi"}
      }
    });

where obs-websocket-test-event would be the event name, and testKey is an example key.

and in browser sources, you would have something like this:

<!DOCTYPE html>

<script type="text/javascript">
  window.addEventListener('obs-websocket-test-event', function(event) {
    document.body.innerHTML = event.detail.testKey
  })
</script>

<body>
</body>

The big advantage with this approach is that you can broadcast to multiple sources.

Also, it permit the creation of small simpler browser source HTML files which might be more accessible to streamer with tech knowledge that are not developers. Also, it permit sharing of those HTML snippets, and you can say "add this html file, then create a trigger in OBS this way, and you are good to go".

[kuon]

Are you open to my proposal? I can try to implement it.

[kuon]

I started working on this, for now it is a raw JSON string with placeholders.

[Durss]

Helloo ! Sorry for super late answer, I had pretty complicated months when you brought this back and completely forgot.

As said on Twitch, i'm planning to move all overlays communication to vendor-requests which will make things easier but mostly avoid managing the socket connection. Moreover, if a user changes their OBS-WS password they wouldn't need to update the overlay URL accordingly. Also, some users doing crazy things with move-plugin or so make OBS-ws sometimes fire hundreds of messages a second. If I can avoid OBS-WS sending those to many connections, that can only help getting a more stable system.

About the placeholders, I made a new "Labels" overlay on the current beta. Problem with handling all existing placeholders in a generic way is that most of them depend on a message context and few of them have very specific process. But mostly, it's not possible to detect a value change without spamming the function that parses them which i strongly discourage as it does quite a lot of process.

The new Label system works around all these issues by keeping something super light and reactive. Basically, anytime a value changes it calls and update method that fires the change over OBS-WS (vendor requests "soon"). This requires adding hooks anywhere necessary and handling every placeholders manually but I think it's for the better. Here are all the placeholders currently implemented if you're curious: https://github.com/Durss/Twitchat/blob/dev/src_front/types/ILabelOverlayData.ts#L29-L68 And here is the store that handles most of this logic: https://github.com/Durss/Twitchat/blob/dev/src_front/store/labels/storeLabels.ts

[Durss]

FYI next version will come with this new OBS trigger action option :)

[kuon]

That's insane, thanks for all your work. I will let you know how it goes.