@nuralogix.ai/web-measurement-embedded-app
v0.1.0-beta.16
Published
Web Measurement Embedded App
Readme
Web Measurement Embedded App
Need deeper integration details? Check the full docs at docs.deepaffex.ai/wmea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Measurement Embedded App Demo</title>
<style>
#measurement-embedded-app-container {
position: fixed;
top: 100px;
left: 0;
width: 100vw;
height: calc(100vh - 100px);
}
</style>
<script type="importmap">
{
"imports": {
"@nuralogix.ai/web-measurement-embedded-app": "https://unpkg.com/@nuralogix.ai/web-measurement-embedded-app"
}
}
</script>
</head>
<body>
<div id="measurement-embedded-app-container"></div>
<script type="module">
import MeasurementEmbeddedApp, {
faceAttributeValue,
} from '@nuralogix.ai/web-measurement-embedded-app';
const {
SEX_ASSIGNED_MALE_AT_BIRTH,
SMOKER_FALSE,
BLOOD_PRESSURE_MEDICATION_FALSE,
DIABETES_NONE,
} = faceAttributeValue;
const measurementApp = new MeasurementEmbeddedApp();
const container = document.getElementById('measurement-embedded-app-container');
if (container) {
const apiUrl = '/api';
const studyId = await fetch(`${apiUrl}/studyId`);
const studyIdResponse = await studyId.json();
const token = await fetch(`${apiUrl}/token`);
const tokenResponse = await token.json();
if (studyIdResponse.status === '200' && tokenResponse.status === '200') {
measurementApp.on.results = async (results) => {
console.log('Results received', results);
const isDestroyed = await measurementApp.destroy();
};
measurementApp.on.error = (error) => {
console.log('error received', error);
};
measurementApp.on.event = (appEvent) => {
console.log('App Event received', appEvent);
};
try {
await measurementApp.init({
container,
appPath: 'https://unpkg.com/@nuralogix.ai/web-measurement-embedded-app/dist',
settings: {
token: tokenResponse.token,
refreshToken: tokenResponse.refreshToken,
studyId: studyIdResponse.studyId,
// Optional measurement options
// measurementOptions: {
// partnerId: 'your-partner-id',
// userProfileId: 'your-user-profile-id',
// },
},
profile: {
age: 40,
heightCm: 180,
weightKg: 60,
sex: SEX_ASSIGNED_MALE_AT_BIRTH,
smoking: SMOKER_FALSE,
bloodPressureMedication: BLOOD_PRESSURE_MEDICATION_FALSE,
diabetes: DIABETES_NONE,
bypassProfile: false,
},
// Optional configuration overrides (defaults shown)
config: {
checkConstraints: true,
cameraFacingMode: 'user', // or 'environment' for back camera
cameraAutoStart: false,
measurementAutoStart: false,
cancelWhenLowSNR: true,
debugMode: false,
downloadPayloads: false,
},
// Optional language/api overrides
// language: 'fr'
apiUrl: 'api.na-east.deepaffex.ai', // optional for region specific data processing
});
} catch (error) {
console.error('Failed to initialize:', error);
}
} else {
console.error('Failed to get Study ID and Token pair');
}
}
</script>
</body>
</html>Notes:
- Set
appPathto'.'when you bundle the assets yourself. - Profile handling: when
bypassProfileremainstrue(default) we skip demographic submission and emit anERRORevent withPROFILE_INFO_NOT_SET; set it tofalseonce you supply real profile data. - Style the container you pass to
init(e.g., position, top, width). - Settings options:
token(required) – authentication token from DeepAffex API.refreshToken(required) – refresh token for token renewal.studyId(required) – study identifier for the measurement.measurementOptions(optional) – additional options passed to the SDK when starting a measurement:partnerId– partner identifier for tracking.userProfileId– user profile identifier for tracking. Must be a valid UUID.
- Optional
apiUrlenables region-specific processing; omitted values follow the backend token's region automatically. When set explicitly, frontend calls your URL (processing where that endpoint runs) while results continue to store in the token's region—verify the combination suits your deployment. - Config options:
checkConstraints(default:true) – enables constraint validation pre-measurementcameraFacingMode(default:'user') – use'user'for front camera or'environment'for back camera.cameraAutoStart(default:false) – automatically starts the camera once permission is granted.measurementAutoStart(default:false) – automatically starts the measurement once constraints are satisfied.cancelWhenLowSNR(default:true) – cancels the measurement if signal-to-noise ratio falls below threshold.debugMode(default:false) – enables verbose logging to the console for debugging purposes.downloadPayloads(default:false) – when enabled, saves payload and metadata binary files for each chunk sent to DeepAffex Cloud so you can send them to NuraLogix for debugging. A 30-second measurement emits 6 chunks (every 5 seconds), generating 2 files per chunk. Ensure your browser allows multiple file downloads and does not block popups.
- Language support:
en,ja,zh,es,pt,pt-BR,it,fr,de.- Unsupported browser locales fall back to base language (e.g.,
zh-TW→zh), then to English.
- Unsupported browser locales fall back to base language (e.g.,
Methods:
init(options: MeasurementEmbeddedAppOptions): Promise<void>;
destroy(): Promise<void>;
cancel(reset: boolean): Promise<boolean>;
setTheme(theme: 'light' | 'dark'): void;
setLanguage(language: SupportedLanguage): void;
getLogs(): Promise<Log[]>;Events:
/**
* when measurement results are received
* @param {results} Results - measurement results
*/
results: ((results: Results) => void) | null;
/**
* when there is an error in the measurement embedded app
* @param {error} MeasurementEmbeddedAppError - measurement embedded app error
*/
error: ((error: MeasurementEmbeddedAppError) => void) | null;
/**
* when an AppEvent is received
* @param {appEvent} AppEvent - app event
*/
event: ((appEvent: AppEvent) => void) | null;App events dispatched through measurementApp.on.event:
APP_LOADED– the embedded app finished its startup sequence.MEASUREMENT_PREPARED- Measurement has been preparedASSETS_DOWNLOADED- Assets have been downloadedFACE_TRACKER_LOADED- Face tracker is loaded. Payload:{ version }with SDK version info (webSDK,extractionLib,faceTracker).CAMERA_PERMISSION_GRANTED– the user granted camera access.CAMERA_STARTED– a camera stream opened successfully.MEASUREMENT_STARTED– a measurement run begins. Payload:{ measurementId, measurementOptions }with the measurement ID and measurement options (empty object{}if none provided).MEASUREMENT_COMPLETED– the measurement finished and results are stable.INTERMEDIATE_RESULTS– partial results are available during an active run. Payload:{ points }with intermediate values.RESULTS_RECEIVED– the final measurement results are available.MEASUREMENT_CANCELED– the user canceled the active measurement.CONSTRAINT_VIOLATION– a constraint (e.g., face distance) failed. Payload:{ code }with one of:TOO_CLOSE,TOO_FAR,TURN_LEFT,TURN_RIGHT,LOOK_UP,LOOK_DOWN,TILT_LEFT,TILT_RIGHT,NOT_CENTERED,HOLD_STILL.PAGE_VISIBILITY_CHANGE– the page changed visibility (e.g., tab switch or minimize).PAGE_UNLOADED– the page is unloading.
Other runtime helpers:
await measurementApp.cancel(true); // cancel current run
const logs = await measurementApp.getLogs();
measurementApp.setTheme('dark');
measurementApp.setLanguage('es');Error codes emitted through measurementApp.on.error:
| Code | Meaning |
| ----------------------------- | --------------------------------------------------------------------- |
| CAMERA_PERMISSION_DENIED | Camera access prompt was rejected. |
| CAMERA_START_FAILED | Camera hardware failed to start after permission. |
| NO_DEVICES_FOUND | No video input devices detected during enumeration. |
| PAGE_NOT_VISIBLE | Measurement was running while the tab or window became hidden. |
| MEASUREMENT_LOW_SNR | Signal-to-noise ratio dropped below the acceptable threshold. |
| WORKER_ERROR | SDK worker encountered a fatal processing error. |
| PROFILE_INFO_NOT_SET | Profile bypass stayed enabled, so demographics were not provided. |
| INVALID_PROFILE | Profile is invalid |
| COLLECTOR | Frame collection reported an error |
| FACE_NONE | Face not detected during measurement (after threshold frames). |
| WEBSOCKET_DISCONNECTED | Realtime WebSocket connection closed or dropped. |
| MEASUREMENT_PREPARE_FAILED | Measurement preparation failed - invalid or missing credentials |
| INVALID_MEASUREMENT_OPTIONS | Invalid measurement options (e.g., userProfileId is not a valid UUID) |
| ASSET_DOWNLOAD_FAILED | Failed to download assets and initialize the SDK |