Platforms

The Vitals SDK is designed to work across multiple platforms and environments, providing flexibility for various use cases and deployment scenarios.

Web Browsers

The SDK is compatible with modern web browsers that support the necessary APIs for camera access and real-time video processing.

Supported Browsers

  • Google Chrome: Version 90+ (recommended)
  • Microsoft Edge: Version 90+ (recommended)
  • Safari: Version 14+
  • Firefox: Version 88+

Browser Requirements

  • WebRTC support for camera access
  • WebSocket support for real-time communication
  • Canvas API for video frame processing
  • WebGL support (optional, for enhanced performance)
Note: For optimal performance and feature support, we recommend using Chrome or Edge. Safari may have slightly different camera permission behaviors.

Desktop Environments

The SDK works well on desktop computers and laptops with integrated or external webcams.

Operating Systems

  • Windows: Windows 10/11
  • macOS: macOS 11+ (Big Sur and later)
  • Linux: Most modern distributions with browser support

Desktop Hardware Requirements

  • Camera: 720p or higher resolution webcam
  • Processor: Dual-core CPU or better
  • RAM: 4GB minimum, 8GB recommended
  • Browser: Latest version of supported browsers

Mobile Browsers

The SDK is fully functional on mobile devices through web browsers, enabling on-the-go wellness monitoring.

Supported Mobile Browsers

  • iOS Safari: iOS 14+
  • Android Chrome: Android 8.0+ (Oreo and later)
  • Android Firefox: Android 8.0+
  • Samsung Internet: Version 12+

Mobile Hardware Requirements

  • Camera: Front-facing camera (5MP or higher recommended)
  • Processor: Quad-core CPU or better
  • RAM: 3GB minimum, 4GB recommended
  • OS: iOS 14+ or Android 8.0+

Camera Specifications

The quality of wellness estimation depends heavily on camera quality and configuration.

Minimum Camera Requirements

  • Resolution: 720p (1280x720) minimum
  • Frame Rate: 24 FPS minimum, 30 FPS recommended
  • Color Depth: 24-bit color (8 bits per channel)
  • Auto-focus: Required or fixed focus
  • Auto-exposure: Required

Recommended Camera Specifications

  • Resolution: 1080p (1920x1080) or higher
  • Frame Rate: 30 FPS or higher
  • Field of View: 60-90 degrees
  • Low Light Performance: Good sensitivity in indoor lighting
javascript
// Request optimal camera configuration
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    width: { ideal: 1920, min: 1280 },
    height: { ideal: 1080, min: 720 },
    frameRate: { ideal: 30, min: 24 },
    facingMode: 'user',
    aspectRatio: { ideal: 16/9 }
  }
});

Lighting Requirements

Proper lighting is critical for accurate wellness estimation. The SDK performs best under consistent, even lighting conditions.

Optimal Lighting Conditions

  • Brightness: Well-lit environment (300-500 lux)
  • Type: Diffuse, uniform lighting (avoid harsh shadows)
  • Color Temperature: Neutral white light (4000K-6000K)
  • Position: Frontal lighting, illuminating the face evenly
  • Stability: Consistent lighting throughout measurement

Lighting to Avoid

  • Strong backlighting (windows behind the subject)
  • Flickering lights (fluorescent tubes at 60Hz)
  • Dramatic side lighting creating shadows on the face
  • Very low light or complete darkness
  • Direct, harsh light causing glare or overexposure
Important: The SDK includes quality metrics that will reject frames with inadequate lighting. Ensure users are properly positioned in well-lit environments for best results.

Network Requirements

The SDK uses WebSocket for real-time communication with the processing server.

Connection Specifications

  • Protocol: Secure WebSocket (wss://)
  • Latency: < 100ms recommended for real-time feedback
  • Bandwidth: ~2-5 Mbps sustained
  • Stability: Consistent connection without frequent drops

Network Recommendations

  • Wired connections preferred over WiFi for stability
  • 5GHz WiFi preferred over 2.4GHz for lower latency
  • Avoid public WiFi with high congestion
  • Implement reconnection logic for network interruptions
javascript
// Handle network reconnection
class VitalsConnection {
  constructor(endpoint) {
    this.endpoint = endpoint;
    this.ws = null;
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = 5;
  }

  connect() {
    this.ws = new WebSocket(this.endpoint);
    
    this.ws.onopen = () => {
      this.reconnectAttempts = 0;
      console.log('Connected');
    };
    
    this.ws.onclose = () => {
      this.reconnect();
    };
    
    this.ws.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  }
  
  reconnect() {
    if (this.reconnectAttempts < this.maxReconnectAttempts) {
      const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
      setTimeout(() => {
        this.reconnectAttempts++;
        this.connect();
      }, delay);
    }
  }
}

Environment Considerations

User Positioning

  • Face the camera directly (within ±30 degrees)
  • Maintain consistent distance (50-100cm from camera)
  • Keep face visible (no obstructions, masks, or glasses if possible)
  • Stay relatively still (minimal head movement)
  • Natural facial expression (relaxed, not tense)

Physical Environment

  • Stable surface for device (avoid handheld during measurement)
  • Neutral background (no complex patterns or bright colors)
  • Minimal movement in background
  • Comfortable temperature for natural physiological state

Performance Optimization

javascript
// Optimize based on device capabilities
const capabilities = await navigator.mediaDevices.getSupportedConstraints();

const config = {
  // Reduce resolution on mobile devices
  video: capabilities.width && capabilities.height ? {
    width: { ideal: isMobile ? 720 : 1920 },
    height: { ideal: isMobile ? 480 : 1080 }
  } : undefined,
  
  // Adjust frame rate based on performance
  frameRate: { ideal: isHighEnd ? 60 : 30, max: 60 },
  
  // Use hardware acceleration if available
  hardwareAcceleration: true
};

// Monitor performance
const performance = {
  fps: 0,
  frameCount: 0,
  lastTime: Date.now()
};

function updatePerformance() {
  performance.frameCount++;
  const now = Date.now();
  const elapsed = (now - performance.lastTime) / 1000;
  
  if (elapsed >= 1) {
    performance.fps = performance.frameCount / elapsed;
    performance.frameCount = 0;
    performance.lastTime = now;
    
    // Adjust settings if performance is low
    if (performance.fps < 20) {
      reduceQuality();
    }
  }
}

Browser-Specific Notes

Safari

  • Camera permission must be granted each session
  • WebSocket connections may have different timeout behaviors
  • Consider adding explicit user gesture for camera start

Mobile Browsers

  • Implement landscape lock if needed
  • Handle orientation changes gracefully
  • Be aware of background tab throttling
  • Test with different camera resolutions

Enterprise/Business Environments

  • Ensure WebSocket connections are allowed by firewalls
  • Whitelist SDK endpoints in proxy configurations
  • Test on corporate networks with security restrictions
  • Consider offline mode for restricted networks

Next Steps