Create Vital Sign Camera

As described in Vital Sign Camera, in Vitals™ SDK, we provide a tailor-made camera component, named Vital Sign Camera.

Target SDK

JavaScript

React

Vue

Flutter

ReactNative

Android

iOS

TIP

You can refer to the sample code and the API Reference for more details. Most related API(s) include: createVitalSignCamera, VitalSignCameraCreationProps, and VitalSignEngineConfig.

To setup the Vital Sign Camera, declare the video HTML element. For example:

<!-- Vital Sign Camera -->
<video id="video" autoplay="true" playsinline></video>

If you are using the vital-sign-camera.umd-X.X.X.js script for SDK installation (as mentioned in Downloads), in your JavaScript file, import the module components by, for example:

const { createVitalSignCamera, ServerId } = VitalSignCameraUMD;

Else, in your TypeScript or JavaScript file:

TypeScript

import { createVitalSignCamera, VitalSignEngineConfig, ServerId } from "ts-vital-sign-camera";

JavaScript

import { createVitalSignCamera, ServerId } from "ts-vital-sign-camera";

Make sure the package name is the same as what is described in the package.json file. You may also need to add other imports to this line yourself later.

Create the Vital Sign Camera component and bind it to the video element:

TypeScript

/* SDK Credentials */
const sdkCredentials = {
    apiKey: "__YOUR_API_KEY__",
    userId: "__YOUR_USER_ID__"
}

window.onload = () => {
    /* Create and initialize Vital Sign Camera */
    const video = document.querySelector("video")!;
    const cam = createVitalSignCamera({ isActive: true, sdkCredentials });
    cam.bind(video);
}

JavaScript

/* SDK Credentials */
const sdkCredentials = {
    apiKey: "__YOUR_API_KEY__",
    userId: "__YOUR_USER_ID__"
}

window.onload = () => {
    /* Create and initialize Vital Sign Camera */
    const video = document.querySelector("video");
    const cam = createVitalSignCamera({ isActive: true, sdkCredentials });
    cam.bind(video);
}

In TypeScript, you might get an error saying that userInfo is missing. You can add it by following the Acquire Health Profile guide.

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 strings __YOUR_API_KEY__ and __YOUR_USER_ID__ should be replaced by your own API Key and User ID. Please contact us to obtain your API Key and User ID, which are the credentials for accessing the Vitals™ Cloud Service.