Creating a Preview for the User

As part of your application, it is recommended to present the user with a camera preview, as it helps the user to center his/her face on the camera screen. The following code can be used to create a preview and present it to the user.

Note

Unlike native SDKs, the camera preview is rendered directly on the Video element by the browser, rather than by the BiosenseSignal SDK.

1. Create a video element in your web application

import styled from 'styled-components';
import { mirror } from '@biosensesignal/common/src/style/mirror';

const Video = styled.video`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  height: 100%;
  ${mirror};
  @media (max-width: 1000px) and (orientation: landscape) {
    height: 100%;
  }
`;
 
const videoElement = useRef<HTMLVideoElement>(null);

return (
    <>
        <Video
            ref={videoElement}
            id="video"
            muted={true}
            playsInline={true}
        />
    </>
);

2. Pass the video element to the SDK when creating a session

import healthMonitorManager, {
    FaceSessionOptions,
} from '@biosensesignal/web-sdk';

await healthMonitorManager.initialize({
    licenseKey,
});

const options: FaceSessionOptions = { 
    input: videoElement.current, 
    cameraDeviceId: cameraId,
    processingTime,
    onVitalSign,
    onFinalResults,
    onError,
    onWarning,
    onStateChange,
    onImageData,
};

const faceSession = await healthMonitorManager.createFaceSession(options);