[UPDATE] Use your Apple Watch to show heart rate on stream

[Updated on October 29th 2020] Article has been updated to reflect some changes for the second method. Please see below for a new way to use method 2!

As streamers we always try new and innovative ways to capture our audiences. Whether that’s with cool overlays, fun extensions or even a sub printer! But when playing certain types of games like active ones or scary games, another thing that always does the trick is showing your heart rate on screen. You can buy expensive bluetooth chest straps just for this, but if you own an Apple Watch it can also be done a lot simpler (and cheaper)!

There are two methods that we’re going to look at. Both of them only use the Apple Watch and some apps on it. No additional hardware is needed. That means you don’t have to wear one of those bluetooth chest straps or anything. Let’s have a look at the first method!

HEARTWITCH

The first method we’re going to look at is called Heartwitch. This method is completely free and uses a website and an app on your Apple Watch. It being free does come at a small cost (no pun intended) though. The app has some customization options, but it lacks in freedom and ease of use that the second method has.

In order to use the app, you’re going to have to download the free app on the App Store, by the same name. Install it on your Apple Watch. After that, we’re going to go over to the website, where we’ll set some things up. First of all, you’re going to have to register yourself with your e-mail and password. When you do that and you’ve logged in, you’ll see a screen with 3 big buttons: Start Workout, Customize Display and Link Apple Watch. First we’ll go into the Customize Display section!

On this screen you’ll be able to set the background color of the heart rate data as well as a font color and you have a couple of different fonts to choose from. By default, the app uses a black background and white font. There’s no option for a transparent background. If you’d want that, you’re going to have to rely on using a chroma key filter and using the bright green background. It’s not the best way of doing things, but it totally works.
When you’re happy with the way things look, hit save and you’ll be back in the main screen!

Going back to the main screen, we’re able to start the actual app. First hit the big “start workout” button on the website. When doing this you’ll get a screen like the one below, that has a code in it. Then open the Apple Watch app. Here you’ll get the option to enter the code. Do this, either by using the Watch’s swipe feature, or by typing the text on your phone and hit Start Workout. If everything works the way it should, you should now see your heart rate show up both on your watch *AND* on the website!

• 

• 

• 

• 

If you see your heart rate appear on both the watch and the app, well done, everything works!

Now for the tricky part: Heartwitch doesn’t offer an official OBS overlay! This means that – unline many other tools for streamers – you don’t get an URL that you can paste into an OBS browser source. So how do we get the heart rate to appear on stream? Well the easiest way is to leave this browser window open and to add a window capture source to OBS. This source you can then crop and size to your liking. And remember the bright green background we talked about earlier? Add a chroma key filter to it and you’re left with just the heart rate. It’s not perfect, but at least it’s a simple and free way of showing your heart rate on stream.

Oh one other downside… you DO get a ton of “workout” date showing in the Apple Health app. So, if you care about your Apple Watch activity rings and such, well do keep that in mind!

HEALTH DATA SERVER + OVERLAY

The method described below unfortunately stopped working recently. However, the developer of the ‘Health Data Server’ app, made an overlay themselves to go along with this tool and it works pretty simple too. So if you like a bit more customization and don’t mind paying a small price for an app, this solution might be for you!

First off, be sure to buy and download the ‘Health Data Server‘ app from the app store on your Apple Watch. This is the app that’s gonna connect to the overlay. After that, go to the Github page for the project and download the overlay. There’s overlays available for Windows, Mac and Linux. For this example, I’m gonna use the Windows version, but the process is more or less the same (see detailed installation instruction for your platform on the Github page).

When downloading and installing the app, you might be presented with a Windows Smartscreen Defender warning. If this happens, you should be able to disable it by clicking the “more info” button in the text. If you can’t find that (I don’t blame you I missed it as well), you can also disable this by right-clicking on the app, selecting properties > general and at the bottom you can unblock the app. After that you should be presented with the firewall screen below. Be sure to check both checkboxes.

When you’ve done that, you should be presented with the screen below. If you get this screen, you want to open a browser and point it to localhost:8080. There you should see a heart symbol, but no heart rate. So, let’s fix this. Open the Health Data Server app on your watch. Make sure you give it all the Healthkit permissions when it asks for that. Here you’ll have to set some settings. First off you’re going to want to add your systems IP. This IP should be at the top of the overlay app we just opened on our PC’s and normall starts with 192.168.x.x
Enter this IP in the Watch app. Below that you can make a few other settings as well. A notable one is the “calories” switch. This allows you to either save the “workout” to Apple Health or not. If you’re playing actually active games like Beat Saber it might be fun to add the workout to Apple Health, but if you play a horror game, you might want to turn it off. Either way it’s up to you!

When everything is set, you can go back to the main window of the Watch app and press the big start button. Within seconds, you should see your heart rate appear on your watch and in your browser (again, point it to localhost:8080). If this is the case, well done. If you want to get this information in OBS, all you have to to is make a new browser source and direct it to http://localhost:8080/.
There’s some custom styling changes you can make here, but I’m not going into that here. If you want to read more on that, check out the Github page. But things should look more or less like this in OBS now (depending on if you’ve turned calories on, you may or may not see this info). Fun fact: the heart rate animation actually matches the pulsation of your actual heartrate!

---

The info below was from the old version of this article. Unfortunately this method isn’t supported as of writing of the update of this article. It’s still there, for transparency.

HEART RATE OVERLAY FOR OBS STUDIO

If you’d like a little bit more customization, the Heart Rate overlay for OBS Studio might be more up your alley. It does require a paid app, but that price compensates itself for more flexibility and less hassle with browser window captures! This app uses a website to configure the overlay. After you’ve done that, you’ll get a unique URL that serves as your browser source and a unique URL that you’ll have to enter in the Apple Watch app. After settings this, you don’t have to worry about it again. No need to open browser windows or anything like that. Just fire up the Apple Watch app, start OBS and you’re good to go.

First thing you’ll want to do is download the (paid) Apple Watch app called ‘Health Data Server‘. After downloading and installing this app on your watch, you want to go to the website for the Heart Rate overlay. Here you can make a few settings to set the overlay to your liking!

First off, you’re going to have to decide whether or not you want to show the heart or just the number for the heart rate. Just tick the boxes for the setting you want. After that, you can change the color of the heart, the color for the pulse, set the font color and size and select the animation speed. When done with that, you ‘ll see a URL below all the settings. This is going to be your browser source! Be sure to copy it and add it to OBS right away.

When done with that, you technically don’t have to come back to this site anymore. The browser source will keep working regardless. Don’t close the site just yet though. Because we first need to setup the Apple Watch app to actually interact with this site. Scroll back up where you’ll see 4 steps. In the second step you’ll see a URL. This is the one you’re going to want to add to the watch App. Now if you pay close attention to the browser source URL we’ve used earlier and this new URL you’ll notice they have 1 thing in common: a unique ID (in the case of this example it’s “JRqojGeLoWXJ-cDXVt9wJ”). This ID needs to be the same in both the browser source as well as the URL you’ll add to the watch app. As long as you set everything up in one go, without refreshing the browser window, you’re good. If you’ve refreshed, be sure to grab the new URL’s so they contain the same unique ID again!

On the watch app, you can enter this URL (be sure to grab the entire URL, not just the unique ID). Once you’ve done that, you’re almost good to go. You need to select a workout type (default is ‘Fitness Gaming’) and whether or not you want to save the workout to Apple Health. If you disable this, you won’t save any burned calories or heart rate data to the Apple Health ecosystem. If you just play a horror game while at your desk, this might be a good setting. But if you intend to play a physical game like Ring-Fit Adventure or Beat Saber, you might like your workout to also be recorded.
After setting everything up, press the green button to start and within seconds you should see your heart rate appear on both the watch app as well as on the OBS overlay. If this is the case, you know you’ve done a good job and everything works!

• 

• 

• 

• 

• 

Now one thing I do want to note is that the Health Data Server app has recently gotten an update that changed the way it works… I’ve been in contact with the developer of the Heart Rate Overlay for OBS Studio and they’re working on an update to the site that will hopefully let everything work flawless again. I expect the only change is going to be in the URL that you need to add to the Watch app, but I’ll keep an eye out for that and will update this article accordingly!

---

I hope this tutorial was helpful to you. If you’d like to watch the video version of this Quick Stream Tip, you can head over to my YouTube channel (where you’ll actually find many more tips and other videos)!