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. 保留所有權利。