---
id: TASK-5
title: Show the webcam toggle only when a webcam is available
status: In Progress
assignee: []
created_date: '2026-05-06 20:11'
updated_date: '2026-05-07 05:58'
labels:
  - frontend
  - fallback
dependencies: []
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Detect whether the browser reports an available webcam and only render the hero live-raster switch for visitors who can actually use the camera effect.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 The hero checks browser media devices for at least one video input without prompting for camera permission.
- [x] #2 The webcam switch and helper copy are hidden when no video input is reported or media-device enumeration is unavailable.
- [x] #3 The switch still starts and stops the existing webcam pixel grid for visitors with an available webcam.
<!-- AC:END -->

## Implementation Plan

<!-- SECTION:PLAN:BEGIN -->
1. Inspect current hero toggle and WebcamPixelGrid error behavior
2. Detect webcam availability with browser media-device enumeration
3. Hide the helper copy and switch when no video input is available
4. Preserve the existing webcam start/stop flow when a camera exists
5. Verify with build and update acceptance criteria
<!-- SECTION:PLAN:END -->

## Implementation Notes

<!-- SECTION:NOTES:BEGIN -->
Implemented a hero fallback raster that activates when WebcamPixelGrid reports unavailable or denied camera access.

Added an explicit mediaDevices/getUserMedia availability check before requesting camera access.

Verified with npm run build; Astro built 3 static pages successfully. Dev server is running at http://127.0.0.1:4322/ for manual testing.

Changed direction after feedback: removed the visual fallback and now hide the switch unless enumerateDevices reports a videoinput.

Added a devicechange listener so the switch can appear or disappear if camera hardware availability changes during the session.

Verified the revised behavior compiles with npm run build.
<!-- SECTION:NOTES:END -->