Vitals™ SDK 文件

中文（简体）

English
中文（繁體）

中文（简体）

English
中文（繁體）

Appearance

React Native 快速入门指南 ​

快速入门 ReactNative SDK 最简单的方法是下载并试用我们的 示例程式码。此外，您还可以按照本快速入门指南，快速建立您的首个 ReactNative 健康测评应用程式。

完成本指南后，我们强烈建议您遵循我们的 软体开发指南，以确保 Vitals™ SDK 产生的健康测评结果准确可靠。

SDK Installation ​

请按照 下载 页面中的说明安装 ReactNative SDK 并将其整合到您的专案中。

设定相机 ​

如 整合 Vitals™ 健康测评（VHA） 中所述，第一步是设定相机。首先，建立一个新专案并按照以下说明操作。

相机权限 ​

在开发 iOS 或 Android 应用程式时，您需要在 Info.plist 档案中（iOS 系统）和 AndroidManifest.xml 档案中（Android 系统）指定以下内容，以允许应用程式使用相机：

xml
<key>NSCameraUsageDescription</key>
<string>Use for measuring vital signs</string>
xml
<uses-permission android:name="android.permission.CAMERA" />

TIP 提示

在 Info.plist 中，字串 "Use for measuring vital signs" 是相机用途的范例描述。您应该根据应用的用途指定您自己的描述。

之后，在 App.tsx 档案中使用以下程式码请求相机权限：

tsx
import {
  VitalSignCamera,
} from 'react-native-vital-sign-plugin';

function App(): JSX.Element {
  React.useEffect(() => {
    (async () => {
      const cameraPermission =
        await VitalSignCamera.getCameraPermissionStatus();
      if (cameraPermission !== 'authorized') {
        await VitalSignCamera.requestCameraPermission();
      }
    })();
  }, []);

  // ...
}

Vital Sign Camera ​

如 Vital Sign Camera 中所述，在 Vitals™ SDK 中，我们提供了一个名为 VitalSignCamera 的特制相机组件。要设定它，请在 App.tsx 档案中宣告 VitalSignCamera 元素。例如：

tsx
import React from 'react';
import {
  SafeAreaView,
  StyleSheet
} from 'react-native';

import {
  VitalSignCamera
} from 'react-native-vital-sign-plugin';

function App(): JSX.Element {

  // ... 请求相机权限的代码 ...
  
  return (
    <SafeAreaView style={styles.container}>
      <VitalSignCamera
          isActive={true}
          /* Vitals™ 雲端服務配置 */
          config={{apiKey:'__YOUR_API_KEY__'}}
          style={StyleSheet.absoluteFill}
        />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

TIP 提示

在上述范例中，字串 __YOUR_API_KEY__ 应替换为您自己的 API 金钥。请联络我们以取得您的 API 金钥，它是存取 Vitals™ 云端服务的凭证。

运行应用程式，您现在应该能够看到相机预览。有关系统和相机设定的更多详细信息，请参阅 设定相机。

获取用户健康档案 ​

正如 整合 Vitals™ 健康测评（VHA） 中所述，我们必须收集用户的健康档案和病史数据，才能获得个人化的健康测评结果并提高测评的准确性。

您可以将收集到的用户健康档案提供给 VitalSignCamera 元件中的 userInfo 属性。例如：

tsx
import { Gender, VitalSignCamera } from 'react-native-vital-sign-plugin';

// ...

const userInfo : UserInfo = {
  age: 30,
  gender: Gender.Male,
  userId: '__YOUR_USER_ID__',
}

/* 向 Vitals™ SDK 提供用户健康档案 */
<VitalSignCamera
    // ...
    userInfo={userInfo}
  />

TIP 提示

在上面的范例中，字串__YOUR_USER_ID__应替换为您自己的使用者 ID。请联络我们以取得您的使用者 ID，该 ID 指定了 Vitals™ 云端服务的订阅方案。扫描所获得的生命体征会因订阅方案而异，每个方案都提供一组独特的生命体征。

更多详细信息，请参阅 获取用户健康档案 页面。

扫描生命体征 ​

要开始扫描，您只需呼叫 VitalSignCamera 元件的 startScanning() API 即可。

首先，建立一个相机引用，以便我们可以呼叫 startScanning() API：

tsx
import React, { useRef } from 'react';
// ...

const App = () => {
  const camera = useRef<VitalSignCamera>(null);

  // ...

  <VitalSignCamera
      ref={camera}
      // ...
    />
}

之后，新增一个开始按钮，设定 onPress 处理程序，并呼叫 startScanning() API：

tsx
import { 
  // ...
  TouchableOpacity, 
  Text 
} from 'react-native';

// ...

function App(): JSX.Element {

  const start = async () => {
    if (!camera.current) return
    await camera.current.startScanning()
  }

  // ...
  return (
    <SafeAreaView style={styles.container}>
      // ...
      <TouchableOpacity style={styles.button} onPress={start}>
        <Text style={styles.buttonText}>开始扫描</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  // ...
  button: {
    backgroundColor: 'black',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white'
  }
});

export default App;

呼叫 API 后，元件将开始透过相机扫描人脸，持续时间为 30 秒。扫描成功后，将传回生命体征讯息。您可以透过 onVideoFrameProcessed 回呼函数记录扫描进度并观察任何错误。此回调函数以每秒 30Hz 的频率（此频率取决于相机的帧率）传回处理结果。

tsx
import React, { useCallback, useRef } from 'react';
import {
  // ...
  VideoFrameProcessedEvent,
  GetHealthStage
} from 'react-native-vital-sign-plugin';

// ...

function App(): JSX.Element {

  // ...

  const onVideoFrameProcessed = useCallback((event:VideoFrameProcessedEvent) => {
    const healthResult = event.healthResult;
    
    /* 如果扫描正在进行，则列印扫描阶段和剩余秒数。 */
    if (healthResult?.stage !== GetHealthStage.Idle) {
      console.log(`扫描阶段=${healthResult?.stage}, 剩余秒数=${healthResult?.remainingTime}`)
    }
    /* 若有错误则列印 */
    if (healthResult?.error) {
      console.log(`错误=${healthResult.error}`)
    }
  }, []);

  // ...

  <VitalSignCamera
      // ...
      onVideoFrameProcessed={onVideoFrameProcessed}
    />

  // ...
}

// ...

运行应用程式，将你的脸部置于相机预览的中央，点击“开始扫描”按钮。将你的脸部移出相机预览范围，模拟「人脸遗失」错误。你应该在控制台中看到类似这样的内容：

 LOG  扫描阶段=1, 剩余秒数=22.866644978523254
 LOG  扫描阶段=1, 剩余秒数=22.82732403278351
 LOG  错误=face lost
 LOG  错误=face lost

有关处理扫描过程的更多详细信息，请参阅 扫描生命体征 页面。

取得并显示健康测评结果 ​

VitalSignCamera 组件会透过 onVideoFrameProcessed 回呼函数传回健康测评结果。在下面的示例程式码中，它会检查心率是否已准备好，并在准备好后将其显示在控制台中。

tsx
/* 更新了 onVideoFrameProcessed 回呼函數 */
const onVideoFrameProcessed = useCallback((event:VideoFrameProcessedEvent) => {
    const healthResult = event.healthResult;
    // ...

    /* 取得心率结果 */
    if (healthResult?.health) {
      console.log(`心率=${healthResult.health.vitalSigns.heartRate}`);
    }
}, []);

运行应用程式并进行扫描，30秒后，您将能够看到以下心率结果：

 LOG  扫描阶段=2, 剩余秒数=0.053999900817871094
 LOG  扫描阶段=2, 剩余秒数=0.012000083923339844
 LOG  心率=70.68102456201278
 LOG  心率=70.68102456201278

Vitals™ SDK 中提供了更多生命体征测评结果，我们也提供了测评结果的解读指南。更多信息，请参阅 取得并显示健康测评结果 页面。


🎉🎉🎉 恭喜！ 🎉🎉🎉

您已完成您的第一个 Vitals™ 应用程式！


WARNING 重要提示

本指南仅提供使用 ReactNative SDK 的最小可行产品 (MVP)，我们 Vitals™ 云端服务仍提供更多功能和更多操作，以确保测评结果准确可靠。例如：检查扫描条件、使用 信号质量 指标等等。更多详情，请参阅 软体开发指南 页面、示例程式码 或 API 参考。

版权所有 © 2021-至今 PanopticAl Ltd. 保留所有权利。