Web based soundboard for chat

[neobaldhornrich]

Hey, I am dialogik from HORNHAUT.tv which is an initiative to support small (German speaking) streamers. So one of our members (we call our members Geiervögel, which means vultures in English – but I’m wandering from the subject), Bloodemi, has a web based soundboard. This is a simple HTML/CSS/JS website which shows all available sound commands that can be used by his viewers in the Twitch chat in order to play a sound:

He asked if it would be possible to enable users to actually chat these commands from the website into the Twitch chat. And here comes my problem: I am using the TwitchJS library for this feature. The documentation says that “Connecting to Twitch chat requires a token with chat_login scope and a username.”

Since the chat_login scope is deprecated I am using the new chat:edit scope instead. So I created an app in my dev dashboard and call a simple OAuth flow in order to connect the user via twitch:

<a href="https://id.twitch.tv/oauth2/authorize?client_id=1cq3tqmw523zn03v0egw7se8att5vm&redirect_uri=http%3A%2F%2Flocalhost%2Fbloodemi-soundboard%2Fsoundboard.html&response_type=token&scope=user_read+chat:edit"><img src="http://ttv-api.s3.amazonaws.com/assets/connect_dark.png" /></a>

Here I already added the user_read scope, and this is why: According to the documentation (see link above) I have to use the token and username to create the TwitchJS instance. I get the token from the OAuth flow, no problem here:

var hash = window.location.hash.split('#')[1].split('&')[0].split('=');
var token = null;
if(hash[0] == 'access_token') {
    var token = hash[1];
    console.log(token); // properly returns the token
}

But I do not have the username that is also needed. The way I try to solve this problem is by creating a pre-instance, use this to ask for the username…

const fetch = new TwitchJs({ token });
fetch.api.get('user').then(response => {
    let username = response.name;
    console.log(token, username); // properly returns token and username
    // ...

… and use both credentials to create a second TwitchJS instance:

const channel = 'hornhauttv';
const send = new TwitchJs({ token, username });
send.chat.connect().then(() => {
    chat.join(channel).then(channelState => {
        chat.say(channel, 'Message'); // test, will be replaced by sound command
    });
});

But all I get is a Login unsuccessful error message.

Any ideas what is wrong here? And is my pre-instance workaround redundant? Is there an easier way to achieve this? Any help appreciated, thanks in advance.

Sourcecode (gist)

I have published the sourcecode to github’s gist service:

https://gist.github.com/dialogik/1390d9f46c5dd650289c00c33604f987

[3ventic]

1. You don’t need user_read to get the username for a token. You can call the token validate endpoint and it’ll be in the response.
2. You need chat:read to connect to chat.

[neobaldhornrich]

Thanks a lot, #2 helped me to make the script work!

But how can I access the oauth/validate endpoint with the TwitchJS library? It seems to me that I can only access endpoints that follow the https://api.twitch.tv/kraken/<endpoint> scheme. OAuth validation’s endpoint is https://id.twitch.tv/oauth2/validate?

[BarryCarlyon]

@neobaldhornrich

But how can I access the oauth/validate endpoint with the TwitchJS library?

Ask the TwitchJS library people, can’t really help with library specifics in this forum since it’s a loss up if the TwitchJS people are here or not.