Web SDK

Using our Web SDK makes it easy to integrate Shen.ai into a new or existing web application.

The best way to get started is to download and run the example app:

• See here for an example using pure Javascript.
• See here for an example using React + Typescript.

Installing the SDK package#

Preparing necessary app components#

You need to provide a canvas into which Shen.ai SDK can render the camera stream along with the measurement information so that you can display it in your app. Its id has to be set to mxcanvas.

<canvas id="mxcanvas" width="480" height="720"></canvas>

Initializing the SDK#

First, load the package:

import CreateShenaiSDK from './shenai-sdk/index.mjs'

Second, create an instance of Shen.ai SDK:

const shenai = await CreateShenaiSDK({
  onRuntimeInitialized: () => {
    console.log('Shen.ai SDK loaded')
  }
})

Then, initialize the SDK with the API key API_KEY. You need to purchase a license to obtain the key and to use the SDK.

shenai.initialize(API_KEY, '', result => {
  if (result === 0) {
    console.log('Shen.ai SDK initialized')
    // Start using Shen.ai SDK ...
  } else {
    error('Shen.ai license activation error')
  }
})

Finally, you can use the features of Shen.ai SDK.

Heart rate measurement#

Here we present how to perform a measurement of heart rate.

First, you need to start the measurement. However, it is only possible when a number of conditions is satisfied. Most importantly, it is necessary that:

• the user's face is present and correctly positioned within the frame
• appropriate lighting is supplied to provide good quality image

if (shenai.isReadyForMeasurement()) {
  shenai.startMeasurement()
}

Once the measurement is started, the engine detects the user's face and begins to perform the computations of vital signs. You can query the latest value of heart rate in a loop by calling:

const hr = shenai.getLatestHR()

It is also possible to provide the user with the hints about face positioning. You can query the actual state of the user's face by calling:

const faceState = shenai.getFaceState()

Possible values of faceState and their meaning are listed below:

• 0 - face is well positioned
• 1 - face is not centered
• 2 - face is too close to the camera
• 3 - face is to far from the camera
• 4 - too much head movement
• 5 - engine is not ready or face is not detected

It is a good idea to query the face state continuosly and provide the user with the feedback.