/bt-heart-monitor

A web client for bluetooth heart monitoring devices (Built with Web BlueTooth API)

Primary LanguageJavaScriptMIT LicenseMIT

bt-heart-monitor

A web client for Bluetooth heart monitoring devices, built with the Web Bluetooth API.

Screen Recording 2024-01-09 at 2 46 14 PM

Usage

Visit the project's live url with a supported browser. Then, connect a Bluetooth device with heart monitoring capabilities. If you don't have such a device, you can emulate one using your smartphone following the guide below.

Local Project Set Up

This project has zero dependencies and is really easy to set up. A static file server like Python's http.server (shown below) can be used to server the assets.

Run the commands to get up and running:

git clone https://github.com/megaconfidence/bt-heart-monitor.git
cd bt-heart-monitor/
python3 -m http.server 3000

Then visit http://localhost:3000/ in a supported browser.

Set Up A Heart Monitor Emulator

If you don't have a Bluetooth enabled device with heart monitoring capabilities (i.e a smartwatch or fitness tracker with a heart rate sensor), you can set up an emulator using a smartphone. This guide shows you how to do so.

  1. Install the nRF Connect app. It is available for Android and iOS

  2. Allow the required permissions such as device location and nearby devices

  3. From the app menu, go to Configure GATT server, click on the dropdown at the top of the app and select Sample configuration

  1. Using the app menu, head back to Devices, and then switch to the Advertiser tab
  2. Click on the plus button to create a new advertising packet. Give it a Display name (i.e a packet name that's only used in app)
  3. Then click on the Add Record dropdown, select Complete Local Name. This allows your device to be visible with its default Bluetooth name
  4. Click on Add Record again and select Service UUID. With the input, search and select Heart Rate
  5. Back in the config modal, under Options, check Connectable. You'll notice Scannable is auto checked as well
  1. Click on Ok
  2. Click on the switch beside the packet name to turn it ON. You may get a one-time popup to configure the advertisement duration. The defaults are okay, and you can check the Remember for this packet box
  1. Click Ok and you are good to go. You can always turn OFF the emulator by turning OFF the packet and disabling the GATT server from step 3