GreenHeat Tutorial
How to Set Up GreenHeat
Twitch
download the greenheat extension and activate it on your channel.
it should automatically be enabled to everyone who joins stream after that point.
if you enabled it mid-stream, direct viewers to refresh the page.
Unity
Friend of our channel KinskyUnplugged has created a unity binding for greenheat.
Godot
Friend of our channel CR4ZYK1TTY has created a godot binding for greenheat.
SAMMI
Use the Heat Extension for SAMMI to recieve data from the twitch extension.
Warudo
Download the JSON/WebSocket Warudo Plugins and put it into the Playground folder (If you are windows, it is at C:\Program Files (x86)\Steam\steamapps\common\Warudo\Warudo_Data\StreamingAssets\Playground). You can use greenheat data by making a blueprint like below.
Streamer.bot
Enable WebSocket Server and open https://heat.prod.kr/[channel name]/streamerbot with any website! you can get arguments using standard streamer.bot notation (%x%, %y%, %id%...)
Everything else
Connect to the websocket at wss://heat.prod.kr/[channel name] where the latter portion is the name of the twitch channel and NOT the twitch id.
you should be recieving data from your channel if you are live.
you can also test the websocket by sending an input at heat.prod.kr/[channel name] where a test screen is given and can be touched.
Sometimes, your websocket might disconnect based on the activity. Make it so that it attempts reconnection upon closing.
Websocket Schema
id: the twitch id (or an opaque id if permission was not given) of the person.
type: the type of the message. could be "click", "drag", "hover" or "release".
x and y: the position normalized from 0 to 1. it is made this way to be compatible with legacy heat's schema.
button: the mouse button that was used, defaults to "left" for mobile and unknown, but also can be "middle" or "right".
shift, ctrl and alt: boolean, whether these modifier buttons are used while clicking.
time: the timestamp in milliseconds when the message was formed.
latency: the stream latency between source and viewer. ONLY ACCOUNTS ONE WAY! you might have to figure out your delay to twitch and add it to the total latency.
What is latency ??
Due to the nature of the internet and everyone living across the ocean, there are stream delay that makes real-time interaction quite challenging.
GreenHeat gives you everything you need to overcome this problem, allowing for things like the fruit ninja clone in GreenHeat Games.
Two fields, time and latency are important in the packet. latency refers to the time it took for the click packet to arrive from chatter's PC to Twitch's servers, where time refers to the point in time where the packet reached prod.kr. The goal is to get the timestamp for when the chatter clicked the screen, so it would feel accurate to the chatter.
Keep in mind that for backwards compatiblities reasons time is in milliseconds but latency is in seconds, so you want to multiply latency by 1000 before subtracting them.
in addition to just doing time - (latency * 1000), you also want to subtract another kind of latency (labelled blue in the image) - a global latency of sorts. This number is mostly constant across all packets regardless of the viewer, but is dependent on your internet setup.
You can get the global latency by clicking on the screen yourself and doing Date.now() - time - (latency * 1000). ("time" is the time field in the packet, "date.now" is the current time in milliseconds, any sane language should have an equivalent.)
Note that you can't get the global latency through clicking on the offline testing site, since it does not go through Twitch API and calls directly through prod.kr.
My global latency is 0.68 seconds, use this as reference to if you got a wildly smaller or bigger number than this.
Configuration
you can configure GreenHeat in the twitch extensions menu.
The Checkboxes are a global toggle for types of detection. unchecking a category will no longer provide messages for that category of action.
unchecking Mobile will disable the mobile panel that simulates click in the twitch mobile app.
Drag and Hover Sensitivity determines how fine the detection for hovering and dragging should be. value too large will make curves and small movements inaccurate while value too small will cause lag and disconnection.
you can change the Color of the "splash effect" when a person clicks on the screen. It can be any CSS accepted color value (color names, hex codes with "#", rgb(numbers)...)
you can also submit an Overlay image that will show up whenever someone hovers on the screen (pc) or on the extension panel rectangle (mobile). this is useful to create static buttons or overlay for static interactive UI.
GreenHeat Games
GreenHeat provides a set of sample games to showcase its capabilities and to be a great jumping off point for your creativity.
You can open heat.prod.kr/[channel name]/game and it functions as both control panel and overlay. you can hover at the bottom of the page to pull up the settings menu. no authentication is required.
Certain games require calibrating your corners and latency. Click the buttons and follow the instruction to calibrate them.
Sources are available at github/prodzpod/greenheat-games.