Skip to main content

System Requirements

Capture IQ runs in modern desktop and mobile browsers as a custom element with an internal UI inside Shadow DOM. Use this page to validate your environment before integration.

Browser support

The widget relies on Custom Elements, Shadow DOM, MediaDevices / getUserMedia, canvas, WebAssembly, and WebGL (used by on-device models). Very old browsers without these features are not supported.

Minimum browser versions

Use these versions or newer when planning integrations. Older browsers may fail at camera startup, model load, or capture encoding.

BrowserMinimum version
Google Chrome (desktop & Android)90
Microsoft Edge (Chromium)90
Apple Safari (macOS & iOS)16
Mozilla Firefox103
note

Exact support depends on device GPU/driver and OS camera permissions. Validate on the browsers and versions your customers actually use; GlamAR may update this table as dependencies change.

HTTPS and secure context

Camera access requires a secure context:

  • Serve your page over HTTPS in production.
  • http://localhost is typically allowed for local development.
  • Opening HTML from file:// usually blocks camera access—use a local dev server.

Camera and permissions

  • The user must grant camera permission when the browser prompts.
  • If permission is blocked, the user may need to change site settings in the browser or OS privacy controls.
  • Ensure no other app or tab has exclusive use of the camera if the preview fails to start.

Camera stream and resolution

By default, Capture IQ requests an ideal live camera stream of 1920×1080 at up to 30 fps with the user-facing camera (facingMode: "user"). Browsers treat these as ideal constraints: on low-end devices or in constrained modes, the actual resolution and frame rate may be lower.

You can override width, height, frame rate, and facing mode via config.camera.

Lighting and framing (user guidance)

Quality checks use signals such as brightness and face size / alignment against preset defaults (for example a minimum brightness score and a face-height to frame-height ratio band). In practice, users get the best results when they:

  • Use even, front-facing light and avoid strong backlight (bright windows or lamps behind the subject).
  • Center the face in the on-screen oval and follow move closer / improve lighting hints when shown.
  • Hold the device steady so the preview stays sharp.

You can tune thresholds with config.quality if your deployment needs stricter or looser checks.

Output image size

With the documented built-in presets (face, hand), maxWidth and maxHeight are unset by default. The encoded image dimensions follow the captured video frame (after any pipeline scaling the runtime applies for that frame)—so output size tracks the actual camera stream, not a fixed pixel size on every device.

To cap dimensions for uploads or storage, set config.output.maxWidth and config.output.maxHeight. The runtime downscales to fit those bounds while preserving aspect ratio and never upscales. See Configuration.

Output file format

Default preset behavior:

SettingDefault
MIME typeimage/jpeg
DeliveryBlob in the capture result (format: "blob")
Encoding quality0.92 (JPEG quality, 0–1)

You can switch to image/webp (or another encoder-supported type) by setting config.output.mimeType, subject to browser support. You can also set format to dataUrl or both if you need a data URL in addition to a blob.

Embedding

  • Give the element a visible size (width/height). For full-screen or mobile layouts, use a block-level container with appropriate height (for example full viewport height on small screens).

Network

  • The bundle must load successfully (check the Network tab for glamar-captureiq.js or your CDN URL).

Content Security Policy (CSP)

If you use a strict CSP, allow the script origin for the Capture IQ bundle and relax rules as needed for inline styles inside the component’s Shadow DOM.