Components
CVI Provider
TheCVIProvider component wraps your app with the Daily.co provider context, enabling all Daily React hooks and components to function.
- Description
- Code
The
CVIProvider component wraps your app with the Daily.co provider context, enabling all Daily React hooks and components to function.Features:- Provides Daily.co context to all child components
- Required for using Daily React hooks and video/audio components
- Simple wrapper for app-level integration
children(ReactNode): Components to be wrapped by the provider
AudioWave
TheAudioWave component provides real-time audio level visualization for video chat participants, displaying animated bars that respond to audio input levels.
- Description
- Code
The
AudioWave component provides real-time audio level visualization for video chat participants, displaying animated bars that respond to audio input levels.Features:- Real-time Audio Visualization: Three animated bars that respond to audio levels
- Active Speaker Detection: Visual distinction between active and inactive speakers
- Performance Optimized: Uses
requestAnimationFramefor smooth animations - Responsive Design: Compact circular design that fits well in video previews
- Audio Level Scaling: Intelligent volume scaling for consistent visual feedback
id(string): The participant’s session ID to monitor audio levels for
Device Select
Thedevice-select module provides advanced device selection controls, including dropdowns for choosing microphones and cameras, and integrated toggle buttons.
- Description
- Code
The
device-select module provides advanced device selection controls, including dropdowns for choosing microphones and cameras, and integrated toggle buttons.Exported Components:MicSelectBtn: Microphone toggle button with device selectionCameraSelectBtn: Camera toggle button with device selectionScreenShareButton: Button to toggle screen sharing
- Integrated device selection and toggling
- Dropdowns for camera/microphone selection
- Visual state indicators and accessibility support
- Uses Daily.co device management hooks
- CSS modules for styling
Media Controls
Themedia-controls module provides simple toggle buttons for microphone, camera, and screen sharing, designed for direct use in video chat interfaces.
- Description
- Code
The
media-controls module provides simple toggle buttons for microphone, camera, and screen sharing, designed for direct use in video chat interfaces.Exported Components:MicToggleButton: Toggles microphone mute/unmute stateCameraToggleButton: Toggles camera on/offScreenShareButton: Toggles screen sharing on/off
- Simple, accessible toggle buttons
- Visual state indicators (muted, unmuted, on/off)
- Disabled state when device is not ready
- Uses Daily.co hooks for device state
- CSS modules for styling

