Quick Start Guide for Vue

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

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 Vue SDK into your project.

Camera Setup

As outlined in Integrating Vitals™ Health Assessment (VHA), the first step is to install the Vue SDK and 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.vue file, declare the component VitalSignCamera. For example:

vue

<script setup lang="ts">
import { ref } from 'vue';
import { VitalSignCamera, type VitalSignEngineConfig, ServerId } from 'vue-vital-sign-camera'

/* Vitals™ Cloud Service Config */
const config = ref<VitalSignEngineConfig>({
  serverId: ServerId.AwsProdEnterprise,
  apiKey: "__YOUR_API_KEY__",
})
</script>

<template>
  <VitalSignCamera 
      :isActive="true"
      :config="config"
  />
</template>

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

vue

<style scoped>
video {
  width: 640px;
  height: 480px;
}
</style>

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.vue file, you can provide the user information gathered by supplying them to the userInfo property in the createVitalSignCamera function.

vue

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { VitalSignCamera, Gender, type UserInfo, type VitalSignEngineConfig, ServerId } from 'vue-vital-sign-camera'

const userInfo = reactive<UserInfo>({
  age: 30,
  gender: Gender.Male,
  userId: '__YOUR_USER_ID__',
})

// ...
</script>

<template>
  <!-- Provide the user info to Vitals™ SDK -->
  <VitalSignCamera 
      :userInfo="userInfo" 
      ...
  />
</template>

<!-- ... -->

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() function:

vue

<script setup lang="ts">
const camera = ref<InstanceType<typeof VitalSignCamera> | null>(null)

// ...

</script>

<template>
  <VitalSignCamera 
    ref="camera"
    ...
  />
</template>

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

vue

<script setup lang="ts">
// ...

const startScanning = () => {
  if (camera.value === null) {
    return
  }
  camera.value.startScanning();
}
</script>

<template>
  <button @click="startScanning">Start Scanning</button>
  ...
</template>

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

vue

<script setup lang="ts">

// ...

function onVideoFrameProcessed(event: VideoFrameProcessedEvent) {
  const { healthResult } = event;

  /* 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)
  }
}
</script>

<template>
  <VitalSignCamera
    ...
    @onVideoFrameProcessed="onVideoFrameProcessed"
  />
</template>

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.

vue

<script setup lang="ts">

// ...

/* Update the onVideoFrameProcessed callback function */
function onVideoFrameProcessed(event: VideoFrameProcessedEvent) {
  const { healthResult } = event;

  // ...

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

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

Quick Start Guide for Vue ​

SDK Installation ​

Camera Setup ​

Vital Sign Camera ​

Acquire Health Profile ​

Scan Vital Signs ​