Skip to content

Migration Guide

Overview

This section is for ReactNative SDK 2.x user only. It describes how to migrate existing project with 2.x SDK to use 3.x SDK.

This fastest way to start with the 3.x SDK is to download and try our ReactNative sample code. The sample code is a full-featured and complete vital sign app. Alternatively, You can also follow this guide to modify your existing project to migrate from ReactNative 2.x SDK to ReactNative 3.x SDK.

TIP

The 3.x SDK is designed to be 100% backward compatiable to 2.x SDK, all the 2.x API is still available in 3.x SDK. Your code works well with 3.x SDK without any code change. However, 2.x API will be deprecated and all the new advanced features will be added to 3.x API only. It is highly recommended to adopt to the 3.x API.

Upgrade the SDK

Install the upgraded SDK with the following command:

bash
yarn add "https://sdk.panoptic.ai/npm/react-native-vital-sign-plugin-3.4.1.tgz"
bash
npm install "https://sdk.panoptic.ai/npm/react-native-vital-sign-plugin-3.4.1.tgz"

Remove unused packages

The 3.x SDK contains it's own advanced implementation of camera component, it doesn't depend on the third party VisionCamera anymore. So the following packages should be removed:

bash
yarn remove "react-native-vision-camera"
yarn remove "vision-camera-vital-sign-plugin"
bash
npm uninstall "react-native-vision-camera"
npm uninstall "vision-camera-vital-sign-plugin"

Update config file

In the file babel.config.js, the global __vseProcessFrame is not needed. So the file should be changed as below:

js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'react-native-reanimated/plugin',
      ],
    ],
  };
};
js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'react-native-reanimated/plugin',
        {
          globals: ['__vseProcessFrame'],
        },
      ],
    ],
  };
};

Migrate to new camera component

The Vision Camera component Camera is no longer needed in 3.x SDK. The 3.x SDK implemented it's own camera component VitalSignCamera. To adopt to the new camera component, just rename the component name from Camera to VitalSignCamera.

vue
<VitalSignCamera
  device={device}
  isActive={true}
/>
vue
<Camera
  device={device}
  isActive={true}
  frameProcessor={frameProcessor}
/>

Also update calling of API getCameraPermissionStatus() and requestCameraPermission() to use the new component:

typescript
// Get camera permission
const cameraPermission = await VitalSignCamera.getCameraPermissionStatus();

// Request camera permission
await VitalSignCamera.requestCameraPermission();
typescript
// Get camera permission
const cameraPermission = await Camera.getCameraPermissionStatus();

// Request camera permission
await Camera.requestCameraPermission();

Video frame proceesing

Since we are not using Vision Camera, the frame processor is not used as well. So we need to change the frame processor to 3.x SDK VideoFrameProcessorEvent callback function.

typescript
const onVideoFrameProcessed = useCallback( (event:VideoFrameProcessedEvent) => {
  const {facebox, healthResult, scanConditions, videoFrameInfo} = event
  ...
}, []);
tsx
const frameProcessor = useFrameProcessor( videoFrame => {
  'worklet';
  const {facebox, healthResult, scanConditions, videoFrameInfo} = processVideoFrame({videoFrame, userInfo});
  ...
}, []);

Assign the VideoFrameProcessorEvent callback function to VitalSignCamera component:

vue
<VitalSignCamera
  device={device}
  isActive={true}
  onVideoFrameProcessed={onVideoFrameProcessed}
/>
vue
<Camera
  device={device}
  isActive={true}
  frameProcessor={frameProcessor}
/>

Component props and methods

The new VitalSignCamera component includes props and methods for controlling and configurations. We don't need to directly call the low level API of VitalSignEngine anymore. For example, the UserInfo and VitalSignEngineConfig can be assigned to the component directly via the props. And we can directly call the component method startScanning() to start the scanning.

tsx
const camera = useRef<VitalSignCamera>(null);
...
// 3.x API to start scanning
await camera.current.startScanning();
...

return (
  <VitalSignCamera
    ref={camera}
    device={device}
    isActive={true}
    onVideoFrameProcessed={onVideoFrameProcessed}
    confg={config}
    userInfo={userInfo}
  />
)
typescript
// 2.x API to configure
VitalSignEngine.configure(config);

// 2.x API to start scanning
VitalSignEgnine.start();

Reference

For detail, please refer to our sample code and documented in the API referece: