Camera preview (fork of @capgo/camera-preview with pending PR fixes)
npm install @sbuhler/camera-preview
!NPM Version
!NPM Downloads
!GitHub Repo stars
!GitHub Actions Workflow Status
!GitHub License
!Maintenance
Capacitor plugin that allows camera interaction from Javascript and HTML
(based on cordova-plugin-camera-preview).
A free, fully-featured alternative to paid camera plugins, built for maximum flexibility and performance:
- Complete UI control - Build your own camera interface with HTML/JS overlays instead of native constraints
- Full hardware access - Manual focus, zoom, exposure controls, flash modes, multiple cameras
- Video recording - Record with custom settings, no arbitrary limitations
- Universal device support - Tested across hundreds of Android and iOS devices
- Performance optimized - Direct camera stream access, efficient memory usage
- Modern package management - Supports both Swift Package Manager (SPM) and CocoaPods (SPM-ready for Capacitor 8)
- Same JavaScript API - Compatible interface with paid alternatives
Unlike restrictive paid plugins, you get full camera control to build exactly the experience you want - from QR scanners to professional video apps.
This plugin is compatible Capacitor 7 and above.
Use v6 for Capacitor 6 and below.
PR's are greatly appreciated.
-- @riderx, current maintainers
Remember to add the style below on your app's HTML or body element:
``css`
:root {
--ion-background-color: transparent !important;
}
Take into account that this will make transparent all ion-content on application, if you want to show camera preview only in one page, just add a custom class to your ion-content and make it transparent:
`css`
.my-custom-camera-preview-content {
--background: transparent;
}
If the camera preview is not displaying after applying the above styles, apply transparent background color to the root div element of the parent component
Ex: VueJS >> App.vue component
`html