Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add camera-preview
Copy

Usage

import { CameraPreview } from '@/components/ui/camera-preview';

<CameraPreview />

Examples

Default

Features

Camera Capabilities

• Photo Capture: High-quality photo capture with multiple resolution options
• Video Recording: Full video recording with audio support
• Flash Control: Built-in torch/flash toggle functionality
• Camera Switching: Front and back camera switching
• Focus Control: Tap-to-focus functionality

Media Management

• Preview Mode: Full-screen preview of captured media
• Save to Gallery: Direct save to device photo library
• Custom Upload: Configurable upload handling
• Media Processing: Ready for custom processing workflows

User Experience

• Responsive Design: Adapts to different screen sizes
• Theme Support: Automatic light/dark theme support
• Permission Handling: Graceful permission request flows
• Error Handling: Comprehensive error handling and user feedback

API Reference

CameraPreview

CameraPreview takes no props. It's a self-contained, full-screen camera screen that hardcodes its own configuration internally (back camera, torch and video capture enabled) and manages capture, preview, and save-to-gallery state on its own. It composes the registry's own Camera and Video components — there is no CameraPreviewProps type, no onCapture/onError/ onPermission events, and no MediaDetails type to import.

If you need a configurable camera with props and callbacks, use Camera directly and build your own preview flow around it.

Permissions

The Camera Preview component requires the following permissions:

iOS

• Camera: Required for photo and video capture
• Microphone: Required for video recording with audio
• Photo Library: Required for saving media to gallery

Android

• CAMERA: Required for photo and video capture
• RECORD_AUDIO: Required for video recording with audio
• WRITE_EXTERNAL_STORAGE: Required for saving media
• READ_EXTERNAL_STORAGE: Required for accessing saved media

Best Practices

Performance

• Use appropriate quality settings for your use case
• Implement proper cleanup when component unmounts
• Handle memory management for large media files
• Use compression for uploaded media when appropriate

User Experience

• Always request permissions gracefully
• Provide clear feedback during capture and processing
• Implement proper loading states
• Handle edge cases like low storage space

Security

• Validate uploaded media on your backend
• Implement proper file type checking
• Consider implementing media scanning for inappropriate content
• Use secure upload endpoints with proper authentication

Accessibility

The Camera Preview component is built with accessibility in mind:

• Screen reader support for all interactive elements
• High contrast mode support
• Voice-over announcements for capture events
• Keyboard navigation support where applicable
• Proper focus management throughout the interface

Troubleshooting

Common Issues

Camera not working on iOS simulator

• The iOS simulator doesn't support camera functionality
• Test on a physical device for full functionality

Permission denied errors

• Ensure permissions are properly configured in app.json
• Check that users have granted necessary permissions
• Implement graceful fallbacks for denied permissions

Media not saving to gallery

• Verify Media Library permissions are granted
• Check available storage space
• Ensure proper error handling is implemented

Video recording issues

• Verify microphone permissions for audio recording
• Check maximum duration settings
• Monitor memory usage during long recordings