heart-of-frogg

Heart of Frogg

I wanted a way to display my heart rate live on my Twitch stream using OBS. There was not a current method for doing that so Heart of Frogg was born!

Usage

1. Download the heart-of-frogg repository to your machine
   • The download contains the server and the HTML that will be displayed in OBS
   • The server is compiled for Windows currently but is written in the Go programming language and can easily be compiled for other operating systems if needed
2. Unzip the download
3. Run the local server by double-clicking heart-of-frogg.exe
4. Install the "Heart of Frogg" app on your Fitbit
   • For the Versa 3 and the Sense, use this app
   • For older devices, use this app
5. Input your computer's internal IP address (as shown by heart-of-frogg.exe on server start) and the heart-of-frogg.exe server's port ("8080" by default) into the "Heart of Frogg" Fitbit app settings on your phone
6. Start the "Heart of Frogg" watch app on your Fitbit device
7. Create a web source in OBS that points to http://localhost:8080/ui/index.html
8. Play a game that gets your heart rate pumping!

Customization

Server Port

The heart-of-frogg.exe server defaults to using port 8080. If you already use port 8080 for something else, you'll need to change the server port. To do this, edit config.toml to contain the port number you want to use. You'll need to restart the server and then update your Fitbit settings and OBS web source to use the new port number.

UI

/ui/index.html is what's shown in OBS. If you want to customize what it looks like, go ahead! Tweak to your liking and then refresh your OBS source to see your changes. See the "How It Works" section below for details.

How It Works

• The heart-of-frogg.exe server listens for HTTP POST calls at http://localhost:8080/heart/:rate
• The Fitbit app checks your heart rate and then makes an HTTP POST call with the heart rate value to the server (e.g. http://192.168.1.101:8080/heart/86)
• OBS loads /ui/index.html as a source which uses JavaScript to periodically do an HTTP GET request to http://localhost:8080/heart to retrieve your current heart rate as reported to the server by your watch