React SDK 2.0.5

Sample Code

The quickest and simplest way to kickstart your journey with the React SDK is by downloading and experimenting with our full-featured sample code:

Download React Sample Code

IMPORTANT

In the above sample codes, the strings __YOUR_USER_ID__ and __YOUR_API_KEY__ should be replaced by your own User ID and API Key repectively. Please contact us to obtain your User ID and API Key.

Installation

In your React project, install the SDK with the npm install or yarn add commands. Please note that different frameworks require different packages.

npm

npm install "https://sdk.panoptic.ai/npm/react-vital-sign-camera-2.0.5.tgz"

yarn

yarn add "https://sdk.panoptic.ai/npm/react-vital-sign-camera-2.0.5.tgz"

IMPORTANT

Please use Webpack as the bundler for your production code. Other web bundling tool such as Vite is not supported yet.

TIP

If you are using Yarn v2 or later, you might need to include the package name in the command, such as yarn add vital-sign-camera@"https://sdk.panoptic.ai/npm/react-vital-sign-camera-2.0.5.tgz".

What's new

2.0.5 (29-April-2025)

• Support cholesterol risk (Beta).

  const USERINFO:UserInfo = {
    age: 30,
    gender: Gender.Male,
    userId: '__YOUR_USER_ID__',
    
    // Provide the following info for diabetesRisk, 
    // hypertensionRisk and cholesterolRisk result
    weight: 65, // weight in KG
    height: 170, // height in CM
    smoker: false, // does the user smoke?
    hypertension: false, // does the user has hypertension?
    bpMedication: false, // taking blood pressure medication?
    diabetic: 0, // is the user diabetic? 0 -> NO, 1 -> Type 1, 2 -> Type 2
    waistCircumference: 80, // waist circumference in CM
    heartDisease: false, // have heart disease?
    depression: false, // have depression?
    totalCholesterol: 200, // total cholesterol in mg/dL
    hdl: 50, // high-density lipoprotein cholesterol. Good cholesterol.
    parentalHypertension: 0, // parental hypentension? 0 -> No, 1 -> One Parent, 2 -> Two Parents
    physicalActivity: true, // daily physical activity > 30 minutes?
    healthyDiet: true, // vegetable, fruit, or berries consumption? true -> Every Day, false -> Not Every Day
    antiHypertensive: false, // taken antihypertensive medication regularly?
    historyBloodGlucose: false, // history has been found of high blood glucose
    historyFamilyDiabetes: 0, /* Family history of diabetes mellitus (type 1 or type 2)? 
    0 -> NO, 
    1 -> YES - grandparent, aunt, uncle, or first cousin
    2 -> YES - parent, brother, sister or own child
    */
    alcoholic: false, // (New) Does the user frequently consume alcoholic beverages?
  }

2.0.4 (20-Nov-2024)

• Fixed the problem that switching camera is not working.

2.0.3 (14-Nov-2024)

• Support diabetes risk and hypertension risk.

  const USERINFO:UserInfo = {
    age: 30,
    gender: Gender.Male,
    userId: '__YOUR_USER_ID__',
    
    // Provide the following info for diabetesRisk and hypertensionRisk result.
    weight: 65, // weight in KG
    height: 170, // height in CM
    smoker: false, // does the user smoke?
    hypertension: false, // does the user has hypertension?
    bpMedication: false, // taking blood pressure medication?
    diabetic: 0, // is the user diabetic? 0 -> NO, 1 -> Type 1, 2 -> Type 2
    waistCircumference: 80, // waist circumference in CM
    heartDisease: false, // have heart disease?
    depression: false, // have depression?
    totalCholesterol: 200, // total cholesterol in mg/dL
    hdl: 50, // high-density lipoprotein cholesterol. Good cholesterol.
    parentalHypertension: 0, // parental hypentension? 0 -> No, 1 -> One Parent, 2 -> Two Parents
    physicalActivity: true, // daily physical activity > 30 minutes?
    healthyDiet: true, // vegetable, fruit, or berries consumption? true -> Every Day, false -> Not Every Day
    antiHypertensive: false, // taken antihypertensive medication regularly?
    historyBloodGlucose: false, // history has been found of high blood glucose
    historyFamilyDiabetes: 0, /* Family history of diabetes mellitus (type 1 or type 2)? 
    0 -> NO, 
    1 -> YES - grandparent, aunt, uncle, or first cousin
    2 -> YES - parent, brother, sister or own child
    */
  }

2.0.2 (5-July-2024)

• Implemented duplicated RGB values detection.

2.0.1 (1-Nov-2023)

• Removed FPS debug log.
• Fixed the problem that a extra instance of VitalSignEngine is created, causing a 403 forbidden error.

2.0.0 (25-Oct-2023)

• Rewritten based on new JavaScript SDK.
• Added error handling to sample code.