- Delete unused components including About19, Contact21, CTA, Faq7, Feature284, Hero235, Landing, Pricing4, Stats11, and Accordion. - Clean up the codebase by removing unnecessary files to improve maintainability and reduce clutter. - Ensure that the removal of these components does not affect the existing functionality of the application.
53 lines
2.0 KiB
Markdown
53 lines
2.0 KiB
Markdown
---
|
|
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 -->
|