Camera viewer

Overview

View live or recorded RGB, infrared and depth channels. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Camera viewer when you need to view live or recorded RGB, infrared and depth channels. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<figure class="he-camera-viewer"><div class="he-camera-viewer__grid"></div><div class="he-camera-viewer__subject"></div><span class="he-camera-viewer__status he-status-badge he-status-badge--healthy">RGB live</span><figcaption class="he-camera-viewer__controls"><span>Channel 2 · 24 fps</span><button class="he-button he-button--inverse he-button--sm">Pause</button></figcaption></figure>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Provide text status and event descriptions; controls are keyboard reachable and video does not autoplay with audio.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components