Twitch to Discord autoclip command

Step by step:

• Create a channel for your clips (make sure it’s public)
• Go to server settings -> Integrations, and create new Webhook. name it however you want. This webhook will be posting clips for you.
  
• Copy your webhook URL to notepad. Keep in mind it’s sensitive data, do not share this link with anyone!
  Link to webhook will look more or less like this (but waaaay longer 😉 ):

https://discordapp.com/api/webhooks/123456/abc123

 

There are 2 informations you will need later:
webhook_ID – it’s string of numbers, in this example it’s “123456”

webhook_Token – it’s last part of the link, in this example it’s “abc123”

Next step is creating your own Twitch app that will be responsible for making clips on your behalf.

• Head to Twitch Developer Dashboard
• Over the right panel, select “register Your Application”
• Put the appropriate name (Like “HuntClipsUsername”) and for the “OAuth Redirect URL” type in “http://localhost/”
• In category, pick “Application Integration” then create.
  

Once that is done correctly, you should see it in your Apps tab. Select “manage”.

• You should see there new field now, Client ID. Copy it to notepad.
• Click “Secret” button to generate a new password. Save it for later as well.

Now that App is created, we need to enable it to create clips. As a result, using the command will make it look like the streamer account has done it manually.
Our end goal is to create an Authorization code. In order to get it, first type the link below, replacing ClientID part with your ID you saved in the previous section.

https://id.twitch.tv/oauth2/authorize?response_type=code&client_id=CLIENT_ID&redirect_uri=http://localhost/&scope=clips:edit

If done correctly, it will ask you to authorize your App. After you accept, the browser will redirect you to a page that will look like a broken one (saying this site can’t be reached etc). This is fine. What you need is URL in the browser, it will look something like this:

http://localhost/?code=123abc890xyz&scope=clips%3Aedit

You need to grab center part of it – in this example it’s 123abc890zyx – this is your Authorization Code. Save it for later.

Getting Refresh Token.

To make next step easier head to JSFiddle

Copy code below into JavaScript (bottom left square)

var clientID = prompt("Enter the application's Client ID");
var secret = prompt("Enter the application's Secret");
var authCode = prompt("Enter the authorization code");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
console.log("response", this.responseText);
var data = JSON.parse(this.responseText);
alert("Your refresh token is:\n\n" + data.refresh_token + "\n\n");
} else {
alert("Something went wrong please check the browser request logs.");
}
}
};
var url = "https://id.twitch.tv/oauth2/token?client_id=" + clientID + "&client_secret=" + secret + "&code=" + authCode + "&grant_type=authorization_code&redirect_uri=http://localhost/";
xhttp.open("POST", url, true);
xhttp.send();

Make sure you did not disable pop-ups in your browser. Run the code (button at the top) and it should show pop-up windows asking for Client_ID, Secret and Authorization code you saved before. At the end, it will show you your Refresh Token. You can grab it from the bottom right window as well, with console results.

BroadcastID

Last puzzle we need for our code – BroadcastID. Head here, and use the extension to grab it

A Lambda function is basically code we upload to a cloud infrastructure (in our case Amazon Web Services) that does not require a traditional web server to run, but still can be invoked by an event. In our case, the event is a simple HTTP request. The free version we have available on AWS works up to million requests – so unless you plan to clip a million drops, you’re good to go!

1. Create Lambda

• Head to AWS and log in. 
• In search bar, type in lambda and choose that service. Hit “create a function”
• It should auto select “Author from scratch”, leave it as it is.
• Add name. Runtime should be set to Node.js by default – if not, select it. proceed to create function, it may take a moment to process.

2. Add API Gateway

• You should see your function overview now. On the left side, there will be “+Add trigger” button. Select it, then in trigger dropdown menu find ‘API Gateway”.  
• Create new API, choose “HTTP API” and in Security choose “Open”, then finish with Add.

Default code included right now makes your API say Hello World if done correctly. If you scroll down you should see Triggers, and an “API Endpoint” link. if you use it, it should show you empty page saying “Hello from Lambda!”. Save that link for later.

3.Timeout

You have to add a timeout, so your function has time to create a clip before sending it to Discord. On sidebar menu, find “General Configuration”. Hit edit, then change Timeout from 3 seconds to 1 minute.

This part will depend heavily on the bot you are using. I will use Streamelements as an example – the bot uses $ prefix to execute commands, and what we need is $urlfetch (which brings website content into chat).

Add !clip command that will look like this:

$(urlfetch API_endpoint?user=${user.name})

Of course replace red text with link you generated in previous step. If saved and done correctly, if you try to type !clip in your chat, it should reply with “Hello from Lambda!”.

StreamLabs command is

$readapi(API_endpoint)

If you use other bots, look up API reading/ Url Fetch variable

This step is very important, as we will use all saved codes and links to create a function that will tie it all.

Make sure you saved every element we will need:

• Client_ID
• Secret
• Refresh_Token
• webhook_ID
• webhook_Token
• Broadcast_ID

All you need to do is copy the code from the next section (or download it here), and paste it into your lambda.  Select “code” then replace the field where Hello World command was.:

Once you copy it, notice that at the very top of the code there are brackets missing your codes. Insert them into the right spots.

As you can probably see, right below there is space for changing what message bot post in chat, and what in your discord server.

• Default for Twitch is“A new clip was created in the Discord server! :)”
  
• Default for Discord is: “”A new clip was created” + (username ? ” by @” + username : “”) + “! :)\n\n””
  

You can change both as you see fit!

Once done, hit Deploy button above the code. It should work now, go live and test!

DOWNLOAD HERE