How cp949/react-webcam works
@cp949/react-webcam is a React webcam component library. Its main runtime flow observes the video element, derives camera constraints, requests and manages a media stream, binds it to video playback, and renders webcam state and controls; the ref controller also exposes snapshot and playback actions. The README mentions a Next.js demo, but its source is absent from this tree, so it is not mapped. Relationships below follow the excerpts and SOURCE INDEX; unsampled functionality is represented only where documented or indexed.
Main entry points: useWebcamController.ts Webcam Controller · Webcam.tsx Webcam Component · useElementMediaConstraints.ts Constraint Sizing · useWebcamStreamLifecycle.ts Stream Lifecycle
Components 16
Component UI
- Webcam Component
packages/react-webcam/src/Webcam.tsx - Camera Controls
packages/react-webcam/src/components
Webcam Control
- Webcam Controller
packages/react-webcam/src/hooks/useWebcamController.ts - Constraint Sizing
packages/react-webcam/src/hooks/useElementMediaConstraints.ts - Video Bindings
packages/react-webcam/src/hooks/useVideoElementBindings.ts - Stream Lifecycle
packages/react-webcam/src/hooks/useWebcamStreamLifecycle.ts - State Mapping
packages/react-webcam/src/utils/webcam-controller-state.ts - Constraint Builder
packages/react-webcam/src/utils/build-media-stream-constraints.ts - Element Size Observer
packages/react-webcam/src/utils/observe-element-size.ts - Canvas Snapshot
packages/react-webcam/src/utils/snapshot-to-canvas.ts
Media Access
- Media Device Adapter
packages/react-webcam/src/utils/media-devices.ts - Device Listing
packages/react-webcam/src/list-media-devices.ts
Public API
- Controller Types
packages/react-webcam/src/types/webcam-controller.ts - Webcam Types
packages/react-webcam/src/webcam-types.ts
Other components
- Application
- Browser Media APIs
Connections 17
- Application → Webcam Component: renders
README.md - Webcam Component → Webcam Controller: uses
packages/react-webcam/src/Webcam.tsx - Webcam Component → Camera Controls: renders
packages/react-webcam/src/Webcam.tsx - Webcam Controller → Constraint Sizing: derives constraints
packages/react-webcam/src/hooks/useWebcamController.ts - Webcam Controller → Stream Lifecycle: manages stream
packages/react-webcam/src/hooks/useWebcamController.ts - Webcam Controller → Video Bindings: binds video
packages/react-webcam/src/hooks/useWebcamController.ts - Webcam Controller → State Mapping: maps state
packages/react-webcam/src/hooks/useWebcamController.ts - Webcam Controller → Canvas Snapshot: captures frame
packages/react-webcam/src/hooks/useWebcamController.ts - Constraint Sizing → Constraint Builder: builds constraints
packages/react-webcam/src/hooks/useElementMediaConstraints.ts - Constraint Sizing → Element Size Observer: observes size
packages/react-webcam/src/hooks/useElementMediaConstraints.ts - Stream Lifecycle → Media Device Adapter: requests and stops
packages/react-webcam/src/hooks/useWebcamStreamLifecycle.ts - Stream Lifecycle → State Mapping: maps errors
packages/react-webcam/src/hooks/useWebcamStreamLifecycle.ts - Device Listing → Media Device Adapter: lists devices
packages/react-webcam/src/list-media-devices.ts - Media Device Adapter → Browser Media APIs: calls
packages/react-webcam/src/utils/media-devices.ts - Webcam Controller → Controller Types: implements contract
packages/react-webcam/src/hooks/useWebcamController.ts - Controller Types → Webcam Types: uses options
packages/react-webcam/src/types/webcam-controller.ts - Constraint Builder → Webcam Types: uses options
packages/react-webcam/src/utils/build-media-stream-constraints.ts