このブログ記事は2021年2月に公開されたため、お読みいただく時期によっては情報が古くなっている可能性があります。情報の正確性を保つため、これらの記事を常に最新の状態に保つことはできませんのでご了承ください。
So I recently created a Twitch channel reward that would allow viewers to control the colors of my RGB lights I have in my room. It is actually pretty simple and straightforward to create such a reward, you basically just need to connect the dots and tie everything together. So in this blog post I will show you how I did it.
A demonstration
But before I go through how I did it, I just want to show a short demo. So below is a quick video demonstration!
Prerequisites
In order to follow my guide there are some certain prerequisites, meaning prior things you have to have and set up in order to connect all the dots.
- You need to be at least a Twitch Affiliate in order to gain access to channel points
- You need some kind of smart lights. I personally have invested in in the Philips Hue smart lights system, but any other type of smart lights should work
- You need to have an IFTTT (If This Then That) or Zapier account set up. I will personally use IFTTT in this demo
- And finally, you will need to have a StreamElements account in order to create an (OBS Browser Source) overlay
If you have all those prerequisites, or something equivalent, then you are good to go.
So let's start connecting all these things together!
Step 1 - Creating your Twitch channel point reward
Simply head over to your Manage Rewards & Challenges page and create a new custom reward.
When creating the reward, it is important that you toggle "Require Viewer to Enter Text". It might also be a good idea to add cooldown limits as well. Apart from those two, you can customize the reward as you wish!
Here is a video tutorial of the specific step.
Step 2 - Get the reward ID
Each channel Twitch channel point reward has a long unique ID. This ID is hidden in the UI, but we need this ID in order to single out which reward was redeemed by the user in order to control the lights.
This step is a bit more tricky if you are non-technical, but if you just do this slowly you should be able to get the ID.
The first thing you need to do is go to your Manage Rewards & Challenges page, then press F12 to open up the browser's Developer Tools. Navigate to the "Console" tab and insert this piece of JavaScript code below and hit enter.
But before you do that, please note; You should generally never actually inject code into your browser from a random site, as it is both a security and privacy risk.
With that said, this is the only way I can help you fetch the reward ID in the most easy way, but please review the code before you run it. If you can't, maybe you have a friend that knows basic coding and can confirm that the code is safe to use.
This code will create new red buttons onto the page. Simply click on the appropriate button to see the reward ID and copy the ID, as you will be needing this later on.
Also don't worry, these are just temporarily changes to the page. If you simply refresh F5 the page, you will see the UI changes are gone.
document.querySelectorAll("button[data-reward-id]").forEach((e) => {
let element = document.createElement("BUTTON");
element.innerText = "Click to get reward ID";
element.style.backgroundColor = "red";
element.style.margin = "5px";
element.addEventListener("click", () => alert(e.getAttribute("data-reward-id")));
e.parentElement.appendChild(element);
});
Here is a video tutorial of the specific step.
Step 3 - Creating the IFTTT webhooks
As I mentioned before, you need to have prior setup your IFTTT account to use your Philips Hue smart system. It is pretty straightforward to do that, but requires you to authenticate and allow IFTTT to control your lights.
Once your account is configured, simply create a Webhook applet as your trigger and as an action to change your Philips Hue lights.
In the video below, I create two webhooks; one to set a specific light color and another for a random color.
Step 4 - Creating the StreamElements custom widget
The final step is to create a StreamElements custom widget that ties everything together.
I would recommend creating a new overlay, but it is fully possible to use an existing overlay. Regardless, press on the big blue plus button, navigate to "STATIC / CUSTOM" and then add a "Custom widget".
Next select your widget and click "Open editor". In the "JS" tab, replace the current JavaScript code to the one below.
Remember to set the variables that are in the beginning of the code.
REWARD_ID should contain the reward ID from step 2, and the WEBHOOK_ URLs to the ones you created in step 3.
const REWARD_ID = "";
const WEBOOK_URL_SPECIFIC_COLOR = "";
const WEBOOK_URL_RANDOM_COLOR = "";
window.addEventListener("onEventReceived", async (obj) => {
if (!obj || !obj.detail || !obj.detail.event || !obj.detail.event.data) {
return;
}
const data = obj.detail.event.data;
const rewardID = data.tags["custom-reward-id"];
const text = data.text;
console.warn("[ChangeColorReward] Reward ID is "" + rewardID + "".");
if (!rewardID) {
console.warn("[ChangeColorReward] No reward ID was found in chat message.");
return;
}
if (rewardID !== REWARD_ID) {
console.warn("[ChangeColorReward] Reward ID "" + rewardID + "" did not match expected "" + REWARD_ID + "".");
return;
}
const requestData = {
value1: text,
}
let url = (text === "random") ? WEBOOK_URL_RANDOM_COLOR : WEBOOK_URL_SPECIFIC_COLOR;
url += "?value1=" + encodeURIComponent(text);
console.log("[ChangeColorReward] Final URL is "" + url + "".");
window.fetch(url, {
mode: "no-cors",
});
});
Here is a video tutorial of the specific step.
Step 5 - Trying it all out
In theory you should have connected everything together now to create a Twitch channel reward that controls your RGB lights. Simply try it out by redeeming a reward!
Also remember to add the StreamElements overlay as a Browser Source in your OBS Studio!
