Quick Start Guide for React

The quickest and simplest way to kickstart your journey with the React SDK is by downloading and experimenting with our sample code. Additionally, you should follow this quick start guide to swiftly create your first vital sign app with React.

After you've completed this guide, we strongly recommend you to follow our Software Development Guide to guarantee accurate and reliable health reports generated by the Vitals™ SDK.

SDK Installation

Please follow the instructions in the Downloads page to install and integrate the React SDK into your project.

Camera Setup

As outlined in Integrating Vitals™ Health Assessment (VHA), the first step is to setup the camera. To begin, create a new project and follow the instructions below.

Vital Sign Camera

As described in Vital Sign Camera, in Vitals™ SDK, we provide a tailor-made camera component, named VitalSignCamera. To set it up, in the App.tsx file, declare the component VitalSignCamera. For example:

import './App.css'
import { VitalSignCamera } from 'react-vital-sign-camera'

/* Vitals™ Cloud Service Config */
const CONFIG : VitalSignEngineConfig = {
  apiKey: "__YOUR_API_KEY__",
}

function App() {
  return (
    <div>
      <VitalSignCamera
        isActive={true}
        config={CONFIG}
      />
    </div>
  )
}

export default App

Resize the camera preview in the CSS file in case it is too large for you:

video {
    width: 640px;
    height: 480px;
}

TIP

In the above example, the string __YOUR_API_KEY__ should be replaced by your own API Key. Please contact us to obtain your API Key, which is the credential for accessing the Vitals™ Cloud Service.

Run the app, you should be able to see the camera preview now. For more details on system and camera setup, please refer to Camera Setup.

Acquire Health Profile

As outlined in Integrating Vitals™ Health Assessment (VHA), user data and medical history data have to be gathered to obtain personalized health insights and enhance the accuracies of measurements.

In the App.tsx file, you can provide the user information gathered by supplying them to the userInfo property in the VitalSignCamera component.

import './App.css'
import { Gender, UserInfo, VitalSignCamera } from 'react-vital-sign-camera'

const USERINFO : UserInfo = {
  age: 30,
  gender: Gender.Male,
  userId: '__YOUR_USER_ID__',
}

function App() {
  return (
    <div>
      <VitalSignCamera
        // Provide the user info to Vitals™ SDK 
        userInfo={USERINFO}
        // ...
      />
    </div>
  )
}

export default App

TIP

In the above example, the string __YOUR_USER_ID__ should be replaced by your own User ID. Please contact us to obtain your User ID, which specifies the subscription plan for the Vitals™ Cloud Service. The set of vital signs obtained from a scan varies depending on the licensed subscription plan, with each plan offering a unique set of vital signs.

For more details, please refer to the Acquire Health Profile page.

Scan Vital Signs

To start a scan, you can simply call the startScanning() API of the VitalSignCamera component.

First, create a camera reference so that we can call the startScanning() API:

const [camera, setCamera] = useState<VitalSignCameraInstance|undefined>(undefined);

Setup the camera controller with an onCreated function:

const onCameraCreated = (camera:VitalSignCameraInstance) => {
  setCamera(camera);
}

// ...

<VitalSignCamera
  // ...
  onCreated={onCameraCreated}
/>

After that, add a start button, and call the startScanning() API:

function App() {
  // ...

  const startScanning = () => {
    camera?.startScanning();
  }

  return (
    <div>
      <VitalSignCamera
        // ...
      />
      <button id="startButton" onClick={startScanning}>Start Scanning</button>
    </div>
  )
}

After calling the API, the component will start scanning the face from the camera for about 30 seconds. And vital signs will be returned upon successful scan. You can log the scanning progress and observe any error by adding the onVideoFrameProcessed callback. This callback function delivers processing results at a rate of 30Hz per second (The rate depends on the frame rate of the camera).

const onVideoFrameProcessed = useCallback( (processedFrame:VideoFrameProcessedEvent)=> {
  const healthResult = processedFrame.healthResult;

  /* Print the scanning stage & remaining seconds if the scan is in progress. */
  if (healthResult?.stage !== GetHealthStage.Idle) {
    console.log(`Scanning Stage=${healthResult?.stage}, Remaining Seconds=${healthResult?.remainingTime}`)
  }
  /* Print error if any */
  if (healthResult?.error) {
    console.log(healthResult.error)
  }
}, [])

// ...

<VitalSignCamera
  // ...
  onVideoFrameProcessed={onVideoFrameProcessed}
/>

Run the app, with your face centered in the camera frame, click the "Start Scanning" button. Move your face out of the camera frame to simulate a "face lost" error. You should see something similar to this in your console:

Scanning Stage=1, Remaining Seconds=21.503
Scanning Stage=1, Remaining Seconds=21.47
Scanning Stage=1, Remaining Seconds=21.436
Error: face lost
Error: face lost

For more details on handling the scanning process, please refer to the Scan Vital Signs page.

Get & Display Health Results

The VitalSignCamera component returns the health results by the onVideoFrameProcessed callback function. In the example code below, it checks if the heart rate is ready, and display it in the console if it is ready.

/* Update the onVideoFrameProcessed callback function */
const onVideoFrameProcessed = useCallback( (processedFrame:VideoFrameProcessedEvent)=> {
  const healthResult = processedFrame.healthResult;

  // ...

  /* Obtain the heart rate result */
  if (healthResult?.health) {
    console.log(`Heart Rate=${healthResult.health.vitalSigns.heartRate}`);
  }
}, [])

Run the app and perform the scan, after 30 seconds, you will be able to see the heart rate result like this:

Scanning Stage=2, Remaining Seconds=0.06400000000000006
Scanning Stage=2, Remaining Seconds=0.03200000000000003
Heart Rate=78.9702850589393
Heart Rate=78.9702850589393

There are more vital signs available in the Vitals™ SDK and we also provide health result interpretation guides. For more information, please refer to the Get & Display Health Result page.

🎉🎉🎉 Congratulations! 🎉🎉🎉

You have completed your first Vitals™ application!

WARNING

This guide only provides you the minimum viable product (MVP) using our React SDK, there are still more features and more things to do to ensure an accurate and reliable measurements by our Vitals™ Cloud Service. For example: performing Conditions Check, using the Signal Quality metric, and more. Please refer to the Software Development Guide page, the sample code, or the API reference for further details.