Redirect To Live-Config Page

[hwlrya002]

Hi there,

I was just wondering. Is it possible to have the configuration page show a button, when the user clicks on the button, it takes them to a live-configuration page outside of the twitch extensions dashboard tab.
I coded this. Essentially just have a background image on my config page, with a button called “dashboard-button”. When the user clicks on this, it should take them to a new tab which is the live-config. This will be the page where they configure the functionality for their stream

document.getElementById(‘dashboard-button’).addEventListener(‘click’, function() {
window.location.href = ‘config.html’; // The path to your live-config.html file
});

[BarryCarlyon]

@hwlrya002

document.getElementById(‘dashboard-button’).addEventListener(‘click’, function() {
window.location.href = ‘config.html’; // The path to your live-config.html file
});

Extensions cannot navigate interanlly but you can open a new window.

@hwlrya002

Is it possible to have the configuration page show a button, when the user clicks on the button, it takes them to a live-configuration page outside of the twitch extensions dashboard tab.

That would be <a href="someurl" target="_blank">my link</a>

[hwlrya002]

When opening the new window, just for testing purposes, I don’t need the user to authenticate their twitch account right?

Everything is going to be done in local testing. Just building a proof of concept. Been trying to follow similar practices to Stream Stickers. On their config page, its just a nice background with a button “Go to dashboard”. This opens up a new window where the streamer can live-configure during their stream and display the newly added stickers on stream in the component.

[BarryCarlyon]

@hwlrya002

I don’t need the user to authenticate their twitch account right?

if you don’t do an oAuth loop you won’t know who they are

[hwlrya002]

Shoutout to you Barry. Every time I have a question, you are great with responding. I really appreciate it

[hwlrya002]

So if the streamer is redirected to a new window, I will need the Twitch API to know which user it is. But if they configure in the extensions dashboard, I won’t need OAuth?

[BarryCarlyon]

Inside the Twitch Dashboard/Extensions config view, onAuthorized provides a JWT to indentify the user.

When you click the button to open a new tab to your big dashboard if you don’t pass anything over (like say the JWT as a query string var to decode), then you don’t know who they are as it’s like loading your website from scratch.

The optimal approach is to do an oAuth loop

So for example EmoteMeter you can use its website to configure - https://emotemeter.com/ or you can use it’s dashboard config view.

The website will require oAuth login so the website knows who you are

EliteTrack has a “report bug” feature where I pass the JWT up to the URL so I will use that to verify the user but only for reporting a bug no controls

So you can decide waht do you, for your described use case, you would want to be doing an oAuth loop to idneityf the user and start a session on your external dashboard

[hwlrya002]

When using the OAuth for redirecting to a new window. I see a lot of extensions use a browser source. I assume the browser source that you add to Streamlabs has a connection to the window which communicates any changes made on the window into the video component, panel, layover etc.

How would I create a browser source URL? Or could you explain its purpose?

[hwlrya002]

Lastly, if I use redirection with OAuth, can i still use an EBS with the Configuration Service?

Or will I need to develop a database, API’s etc to talk to one another?

[BarryCarlyon]

@hwlrya002

Lastly, if I use redirection with OAuth, can i still use an EBS with the Configuration Service?

yes

you can get/set the config service externally

Reference

@hwlrya002

I see a lot of extensions use a browser source. I assume the browser source that you add to Streamlabs has a connection to the window which communicates any changes made on the window into the video component, panel, layover etc.

No, usually they talk to the EBS/server and get whatever from there, they don’t directly take to the other window.

[hwlrya002]

Perfect thank you Barry. In the configure page, if the streamer configures some photos to be displayed on their stream, they click submit and then it displays. Is it possible to re-configure the photos (ie change a photo) whilst live on the stream?

I don’t know if I am going crazy, but I remember reading that the onChanged() event only handles once. So from my understanding, if the user has selected 5 photos to show on their stream, and submitted it. They cannot re-configure these images to display different ones while live on stream.

Am i correct in saying this or is it possible to change the component page with new photos whilst live by configuring in the config page of the extension?

[BarryCarlyon]

@hwlrya002

In the configure page, if the streamer configures some photos to be displayed on their stream, they click submit and then it displays. Is it possible to re-configure the photos (ie change a photo) whilst live on the stream?

Of course

@hwlrya002

I don’t know if I am going crazy, but I remember reading that the onChanged() event only handles once. So from my understanding, if the user has selected 5 photos to show on their stream, and submitted it. They cannot re-configure these images to display different ones while live on stream.

That correct which is why if I live change the contents of the config service, I push the same payload out over pubsub to running instances

Rough example https://github.com/BarryCarlyon/twitch_misc/tree/main/extensions/config_service

@hwlrya002

Am i correct in saying this or is it possible to change the component page with new photos whilst live by configuring in the config page of the extension?

You push the same update to the config service and out over pubsub at the same time.