Vitals™ SDK Documentation

Appearance

Quick Start Guide for Flutter ​

The quickest and simplest way to kickstart your journey with the Flutter 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 Flutter.

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 Flutter 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.

Camera Permission ​

When developing for iOS or Android, you need to allow the app to use the camera by specifying the following in the file Info.plist for iOS, and AndroidManifest.xml for Android:

xml
<key>NSCameraUsageDescription</key>
<string>Use for measuring vital signs</string>
xml
<uses-permission android:name="android.permission.CAMERA" />

TIP

In Info.plist, the string "Use for measuring vital signs" is an example description of the camera usage. You should specify your own description that matches the usage of your application.

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 main.dart file, declare the widget VitalSignCamera. For example:

dart
import 'package:flutter/material.dart';
import 'package:vital_sign_camera/vital_sign_camera.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

/* Vitals™ Cloud Service Config */
final VitalSignCameraConfig config = VitalSignCameraConfig(
  apiKey: '__YOUR_API_KEY__',
);

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: VitalSignCamera(
          isActive: true,
          config: config,
        )
      ),
    );
  }
}

You will see an error regarding the missing userInfo argument. Don't worry, we will fix it in the next section.

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.

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.

First, create a UserInfo object with the user information you've gathered.

dart
final UserInfo userInfo = UserInfo(
  age: 30,
  gender: Gender.male,
  userId: '__YOUR_USER_ID__',
);

You can provide the user information gathered to the Vitals™ SDK by supplying them to the userInfo property in the VitalSignCamera widget. For example:

dart
VitalSignCamera(
  isActive: true,
  userInfo: userInfo,
  config: config,
)

Run the app, you should be able to see the camera preview now.

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 call the startScanning() API of the VitalSignCameraController.

First, create a property with type VitalSignCameraController:

dart
class _MainAppState extends State<MainApp> {
  late final VitalSignCameraController _vitalSignCameraController;
  // ...
}

Then create a function named onVitalSignCameraCreated to initialize the _vitalSignCameraController property:

dart
void _onVitalSignCameraCreated(VitalSignCameraController controller) {
  _vitalSignCameraController = controller;
}

Specify the _onVitalSignCameraCreated function to the onCreated argument of the VitalSignCamera widget:

dart
VitalSignCamera(
  onCreated: _onVitalSignCameraCreated,
  // ...
)

Add a start button, and call the startScanning() API, for example:

dart
ElevatedButton(
  onPressed: () {
    setState(() {
      _vitalSignCameraController.startScanning();
    });
  },
  child: const Text('Start Scanning'),
)

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

dart
VitalSignCamera(
  // ...
  onVideoFrameProcessed: _onVideoFrameProcessed,
),

Define the _onVideoFrameProcessed to print the scan progress:

dart
void _onVideoFrameProcessed(VideoFrameProcessedEvent event) {
  /* Print the scanning stage & remaining seconds if the scan is in progress. */
  if (event.healthResult?.stage != GetHealthStage.idle) {
    print('Scanning Stage=${event.healthResult?.stage}, Remaining Seconds=${event.healthResult?.remainingTime}');
  }
  /* Print error if any */
  if (event.healthResult?.error != null) {
    print('Error=${event.healthResult?.error}');
  }
}

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:

flutter: Scanning Stage=GetHealthStage.collectingData, Remaining Seconds=22.315261960029602
flutter: Scanning Stage=GetHealthStage.collectingData, Remaining Seconds=22.282362937927246
flutter: Error=face lost
flutter: 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.

dart
/* Update the onVideoFrameProcessed callback function */
void _onVideoFrameProcessed(VideoFrameProcessedEvent event) {
  // ...

  /* Obtain the heart rate result */
  if (event.healthResult?.health != null) {
    print('Heart Rate=${event.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:

I/flutter (14005): Scanning Stage=GetHealthStage.analyzingData, Remaining Seconds=0.06799983978271484
I/flutter (14005): Scanning Stage=GetHealthStage.analyzingData, Remaining Seconds=0.032000064849853516
I/flutter (14005): Heart Rate=55.21213462445704
I/flutter (14005): Heart Rate=55.21213462445704

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 Flutter 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.

Copyright © 2021-present PanopticAl Ltd. All Rights Reserved.