How to Add Camera Monitoring Features to an Existing SaaS Product

Description and use

Incrementally add IP camera support to a SaaS product using feature flags, new database tables, and a React component, ensuring security, performance, and observability.

Problem

Integrate IP camera monitoring into an existing SaaS product without major rewrites, maintaining security, performance, and feature flags.

Outcome

Incremental addition of camera monitoring with minimal disruption, preserving existing auth, performance, and UI patterns, and providing observability and rollback paths.

Workflow

• Add video_enabled column to orgs and create site_cameras table
• Add routes under /sites/:siteId/cameras with auth and flag middleware
• Add UI flag and CameraPanel component that fetches cameras and mounts live player
• Implement useSitePlayer hook to manage player lifecycle and destroy on unmount
• Add feature flags video_playback and video_controls per org
• Add types for camera capabilities and site camera
• Add tests seeding orgs, sites, cameras and checking auth
• Add observability counters, logs, and alerts
• Handle rollback by disabling flag and hiding UI
• Ensure panel uses existing attachment endpoint for screenshots

Evidence

I add IP camera monitoring to an existing SaaS incrementally: feature flag, nested routes, one player, then I stop.

Source

PR 1 — flag + table

Source

PR 2 — routes behind existing site middleware

Source

PR 3 — live + flag in the UI

Source

Player lifecycle code

Source

Feature flags I actually use

Source