Camera preview
A Capacitor plugin for embedding a live camera preview and capturing photos/videos directly within HTML in hybrid mobile apps.
What is Camera preview?
Capacitor Camera Preview is a plugin for the Capacitor runtime that allows developers to embed a live camera preview directly into the HTML of their hybrid mobile applications. It provides JavaScript APIs to start/stop the camera, capture photos and videos, switch cameras, and control flash modes, enabling native camera functionality without leaving the web view context.
Mobile developers using Capacitor (often with Ionic) to build cross-platform hybrid apps that require integrated camera functionality, such as for scanning, augmented reality, or custom photo/video capture interfaces.
It offers a straightforward way to add native camera previews to HTML-based apps, with extensive platform-specific customization and a focus on maintaining UI interactivity, avoiding the need for separate native modules or full-screen camera takeovers.
Overview
Capacitor plugin that allows camera interaction from HTML code
Use Cases
Best For
- Adding a live camera preview within an Ionic/Capacitor app's UI
- Building custom barcode or QR code scanners in hybrid apps
- Creating augmented reality (AR) overlays with transparent camera views
- Implementing in-app photo or video capture without switching to the native camera app
- Developing social or communication features with real-time camera filters
- Building document scanning or identity verification flows within an app
Not Ideal For
- Applications requiring real-time computer vision or advanced image processing (e.g., face detection filters)
- Projects that need identical camera features across iOS, Android, and web without platform-specific limitations
- Teams looking for a plug-and-play camera solution with minimal configuration and no native code adjustments
- Apps targeting older Capacitor versions without a clear upgrade path, due to strict version dependencies
Pros & Cons
Pros
Embeds a live camera feed directly into the web view, allowing for interactive overlays and custom UI without switching to a full-screen native camera app.
Supports iOS, Android, and web with platform-specific options like pinch-to-zoom on mobile and opacity for AR on Android/web, offering tailored control.
Captures photos as base64 data or file paths with adjustable quality and dimensions, and records videos in .mp4 format on mobile platforms.
Regularly updated with versions aligned to Capacitor releases (e.g., v8 for Capacitor 8), indicating ongoing support and compatibility fixes.
Cons
Key features like video recording are only available on Android/iOS, and opacity control is missing on iOS, leading to inconsistent cross-platform development.
Requires manual configuration for each platform, such as adding permissions in AndroidManifest.xml and Info.plist, which can be error-prone for beginners.
The plugin enforces exact version matching with Capacitor (e.g., v8 only for Capacitor 8), complicating upgrades and increasing maintenance overhead.
Web support is less feature-rich, with methods like flip() unsupported and potential performance issues compared to native mobile implementations.
Frequently Asked Questions
Related Projects
SQLite⚡Capacitor plugin for native & electron SQLite databases.
Barcode scannerA fast and efficient (QR) barcode scanner for Capacitor
ElectronDeploy your Capacitor apps to Linux, Mac, and Windows desktops, with the Electron platform! 🖥️
Bluetooth-leCapacitor plugin for Bluetooth Low Energy
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.